refactor: fix middleware URL generation

packages/core/cache/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/cache",
-  "version": "2.5.7",
+  "version": "2.5.12",
   "license": "MIT",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",
@@ -12,7 +12,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@vue-storefront/core": "~2.5.7"
+    "@vue-storefront/core": "~2.5.11"
   },
   "peerDependencies": {
     "@nuxtjs/composition-api": "^0.29.3"

packages/core/core/__tests__/utils/nuxt/proxyUtils.spec.ts

@@ -38,7 +38,7 @@ describe('[CORE - utils] _proxyUtils', () => {
       { someGivenOption: 1 }
     )).toEqual({
       axios: {
-        baseURL: 'some-url',
+        baseURL: 'some-url/api/',
         headers: {}
       },
       someGivenOption: 1
@@ -57,7 +57,7 @@ describe('[CORE - utils] _proxyUtils', () => {
       {}
     )).toEqual({
       axios: {
-        baseURL: 'some-url',
+        baseURL: 'some-url/api/',
         headers: {
           cookie: 'xxx'
         }

packages/core/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/core",
-  "version": "2.5.8",
+  "version": "2.5.12-c.3",
   "sideEffects": false,
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",
@@ -15,7 +15,6 @@
   "dependencies": {
     "axios": "0.21.1",
     "express": "^4.17.1",
-    "is-https": "^3.0.2",
     "lodash-es": "^4.17.15",
     "vue": "^2.6.11"
   },

packages/core/core/src/types.ts

@@ -2,6 +2,7 @@
 
 import { Ref } from '@nuxtjs/composition-api';
 import type { Request, Response } from 'express';
+import { HelmetOptions } from 'helmet';
 
 /**
  * Default name of the cookie storing active localization code
@@ -845,6 +846,7 @@ export type IntegrationsSection = Record<string, Integration>
 
 export interface MiddlewareConfig {
   integrations: Record<string, Integration>;
+  helmet: Readonly<HelmetOptions>;
 }
 
 export interface ApiClientFactoryParams<T, F = any> {

packages/core/core/src/utils/nuxt/_proxyUtils.ts

@@ -1,6 +1,7 @@
 import { Context as NuxtContext } from '@nuxt/types';
 import merge from 'lodash-es/merge';
 import { ApiClientMethod } from './../../types';
+import { Logger } from './../logger';
 
 interface CreateProxiedApiParams {
   givenApi: Record<string, ApiClientMethod>;
@@ -25,25 +26,20 @@ export const createProxiedApi = ({ givenApi, client, tag }: CreateProxiedApiPara
 export const getCookies = (context: NuxtContext) => context?.req?.headers?.cookie ?? '';
 
 export const getIntegrationConfig = (context: NuxtContext, configuration: any) => {
+  const baseURL = process.server ? context?.$config?.middlewareUrl : window.location.origin;
   const cookie = getCookies(context);
 
-  if (context?.$config?.middlewareUrl) {
-    const { middlewareUrl } = context.$config;
-    return merge({
-      axios: {
-        baseURL: middlewareUrl,
-        headers: {
-          ...(cookie ? { cookie } : {})
-        }
-      }
-    }, configuration);
+  if (process.server && context?.$config?.middlewareUrl) {
+    Logger.info('Applied middlewareUrl as ', context?.$config?.middlewareUrl);
   }
 
   return merge({
     axios: {
+      baseURL: new URL(/\/api\//gi.test(baseURL) ? '' : 'api', baseURL).toString(),
       headers: {
         ...(cookie ? { cookie } : {})
       }
     }
   }, configuration);
 };
+

packages/core/core/src/utils/nuxt/index.ts

@@ -26,6 +26,7 @@ export const integrationPlugin = (pluginFn: NuxtPlugin) => (nuxtCtx: NuxtContext
     const injectInContext = createAddIntegrationToCtx({ tag, nuxtCtx, inject });
     const config = getIntegrationConfig(nuxtCtx, configuration);
     const client = axios.create(config.axios);
+
     const api = createProxiedApi({ givenApi: configuration.api || {}, client, tag });
 
     if (nuxtCtx.app.i18n.cookieValues) {

packages/core/docs/.vuepress/config.js

@@ -189,6 +189,14 @@ module.exports = {
           ['/performance/ssr-cache', 'SSR cache']
         ]
       },
+      {
+        title: 'Security',
+        collapsable: true,
+        children: [
+          ['/security/headers-security', 'HTTP Headers security'],
+          ['/security/api-url', 'Server Middleware URL']
+        ]
+      },
       {
         title: 'Reference',
         collapsable: true,

packages/core/docs/getting-started/configuration.md

@@ -12,21 +12,6 @@ Every Vue Storefront project must contain two configuration files described belo
 
 You can learn more about this file and available configuration options on the [Nuxt configuration file](https://nuxtjs.org/docs/directory-structure/nuxt-config/) page.
 
-The only thing  you have to configure when setting up a new project is the `middlewareUrl` property which defines the URL to the Server Middleware. Usually, it's your application domain followed by the `/api` path.
-
-Example:
-
-```javascript
-// nuxt.config.js
-export default {
-  publicRuntimeConfig: {
-    middlewareUrl: 'https://yourdomain.com/api/'
-  }
-}
-```
-
-For the local development, set it to `http://localhost:3000/api/`.
-
 ### `middleware.config.js`
 
 The `middleware.config.js` file is as essential as `nuxt.config.js`, but much simpler and likely smaller. It configures the Server Middleware used for communication with e-commerce platforms and contains sensitive credentials, custom endpoints, queries, etc.

packages/core/docs/reference/changelog.md

@@ -1,8 +1,9 @@
 # Changelog
 
-## 2.5.8 (deprecated)
+## 2.5.12
 
-- **[BREAKING]** `middlewareUrl` is no longer required from the global config, however it should be provided to handle integration specific API calls
+- Middleware and Nuxt Middleware [Helmet](https://github.com/helmetjs/helmet) added. ([6688](https://github.com/vuestorefront/vue-storefront/pull/6688)) [Heitor Ramon](https://github.com/bloodf)
+- Revert the breaking change introduced in `2.5.7`, with the default behavior and the possibility to use Nuxt `middlewareUrl` as the endpoint definition. ([6688](https://github.com/vuestorefront/vue-storefront/pull/6688)) [Heitor Ramon](https://github.com/bloodf)
 
 ## 2.5.7
 

packages/core/docs/reference/migrate/2.5.12/overview.md

@@ -0,0 +1,40 @@
+# Migrating projects to 2.5.12
+
+## Update `nuxt.config.js`
+
+In this release, we've added the optional  `middlewareUrl` property to define the URL to the Server Middleware. Open the `nuxt.config.js` file and add the `middlewareUrl` property to the `publicRuntimeConfig` object as shown below.
+
+:::warning
+Make sure to pass the whole URL with protocol, port (if applicable), and suffix it with `/api/`.
+:::
+
+```javascript
+// nuxt.config.js
+export default {
+  publicRuntimeConfig: {
+    middlewareUrl: 'https://example.com/api/' // For the local development, set it to `http://localhost:3000/api/`.
+  }
+}
+```
+
+If you don't want to hardcode the URL in the configuration file, you can use environmental variables.
+
+Example:
+
+```javascript
+// nuxt.config.js
+export default {
+  publicRuntimeConfig: {
+    middlewareUrl: process.env.API_BASE_URL
+  }
+}
+```
+
+Then add an entry in the `.env` file or use any other method for passing environmental variables that suits your needs.
+
+Example:
+
+```text
+// .env
+API_BASE_URL=https://example.com/api/
+```

packages/core/docs/reference/migrate/index.md

@@ -1,7 +1,7 @@
 # Migration guides
 
-## 2.5.7
-- [Overview](./2.5.7/overview.md)
+## 2.5.12
+- [Overview](./2.5.12/overview.md)
 
 ## 2.5.0
 - [Overview](./2.5.0/overview.md)

packages/core/docs/security/api-url.md

@@ -0,0 +1,40 @@
+# Server Middleware URL
+
+Internally we use Nuxt environment properties to get the URL of Server Middleware. However, you can change it by defining the `middlewareUrl` property in the `publicRuntimeConfig` object inside the `nuxt.config.js` file.
+
+:::warning
+Make sure to pass the whole URL with protocol, port (if applicable), and suffix it with `/api/`.
+:::
+
+```javascript
+// nuxt.config.js
+export default {
+  publicRuntimeConfig: {
+    middlewareUrl: process.env.NODE_ENV === 'production'
+      ? `https://${process.env.API_BASE_URL}/api/`
+      : 'http://localhost:3000/api/'
+  }
+}
+```
+
+If you don't want to hardcode the URL in the configuration file, you can use environmental variables.
+
+Example:
+
+```javascript
+// nuxt.config.js
+export default {
+  publicRuntimeConfig: {
+    middlewareUrl: process.env.API_BASE_URL
+  }
+}
+```
+
+Then add an entry in the `.env` file or use any other method for passing environmental variables that suits your needs.
+
+Example:
+
+```text
+// .env
+API_BASE_URL=https://example.com/api/
+```

packages/core/docs/security/headers-security.md

@@ -0,0 +1,81 @@
+# HTTP Headers security
+
+To improve the security of Vue Storefront applications, we preinstall the [Helmet](https://helmetjs.github.io/) security extension by default for Nuxt application and the [Server Middleware](/architecture/server-middleware.html).
+
+In this document we show how to change the default configuration in both applications. For a list of all available options, see the [Helmet documentation](https://helmetjs.github.io/docs/).
+
+## Configuring Helmet in Nuxt
+
+**Helmet** is disabled by default, you can enable it by passing `helmet` property set to `true` or as a configuration object like this.
+
+```javascript
+// nuxt.config.js
+export default {
+  modules: [
+    ['@vue-storefront/middleware/nuxt', {
+      helmet: true
+      // or
+      helmet: {
+        // ...configuration
+      }
+    }]
+  ]
+}
+```
+
+To change the default configuration of Helmet in Nuxt application, use the `helmet` object in the configuration of the `@vue-storefront/middleware/nuxt` module.
+
+```javascript
+// nuxt.config.js
+export default {
+  modules: [
+    ['@vue-storefront/middleware/nuxt', {
+      helmet: {
+        // default configuration
+        crossOriginOpenerPolicy: false,
+        contentSecurityPolicy: false,
+        crossOriginEmbedderPolicy: false,
+        permittedCrossDomainPolicies: {
+          permittedPolicies: 'none'
+        }
+      }
+    }]
+  ]
+}
+```
+
+## Configuring Helmet in VSF Server Middleware
+
+**Helmet** is disabled by default, you can enable it by passing `helmet` property set to `true` or as a configuration object like this.
+
+```javascript
+// nuxt.config.js
+export default {
+  modules: [
+    ['@vue-storefront/middleware/nuxt', {
+      helmet: true
+      // or
+      helmet: {
+        // ...configuration
+      }
+    }]
+  ]
+}
+```
+
+To change the default configuration of Helmet in Server Middleware, use the `helmet` object in the `middleware.config.js` file.
+
+```javascript
+// middleware.config.js
+module.exports = {
+  helmet: {
+    // default configuration
+    crossOriginOpenerPolicy: false,
+    contentSecurityPolicy: false,
+    crossOriginEmbedderPolicy: false,
+    permittedCrossDomainPolicies: {
+      permittedPolicies: 'none'
+    }
+  }
+};
+```

packages/core/health-check/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/health-check",
-  "version": "2.5.7",
+  "version": "2.5.12",
   "description": "",
   "main": "lib/module.js",
   "scripts": {