feat: make security connection optional by default

vuestorefront · Sep 5, 2022 · ccf1704 · ccf1704
1 parent c9fa186
commit ccf1704
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 21 deletions.
diff --git a/.github/workflows/deploy-vue-storefront-cloud.yml b/.github/workflows/deploy-vue-storefront-cloud.yml
@@ -119,6 +119,8 @@ jobs:
           VSF_RECAPTCHA_SITE_KEY: 6Ldce0EeAAAAAAGGtGWG-e-SygXiFub6PXHT5fKd
           VSF_RECAPTCHA_SECRET_KEY: ${{ secrets.RECAPTCHA_SECRET_KEY }}
 
+          VSF_COOKIE_SECURE: true
+
           VSF_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
 
           LAST_COMMIT: ${{ github.sha  }}

diff --git a/docs/installation-setup/configure-integration.md b/docs/installation-setup/configure-integration.md
@@ -77,6 +77,14 @@ After installation, the first step is configuring the integration using the envi
     VSF_RECAPTCHA_VERSION=3
     ```
 
+    #### Cookies configuration
+    ```
+    VSF_COOKIE_HTTP_ONLY=
+    VSF_COOKIE_SECURE=
+    VSF_COOKIE_SAME_SITE=
+    VSF_COOKIE_PATH=
+    ```
+
     #### Other
     ```
     NODE_TLS_REJECT_UNAUTHORIZED=0      # toggle TLS verification (eg. for a local development)
@@ -132,7 +140,7 @@ When working with translation in your application, you need to:
 
 ### 4. Configure default cookies settings
 
-Vue Storefront app uses different cookies but all share the same default config. To adjust the configuration you have to modify `middleware.config.js`.
+Vue Storefront app uses different cookies but all share the same default config. To adjust the configuration you have to add `env` variable, which is the recommended way, or modify `middleware.config.js`.
 Once done, rebuild your application.
 
 ```js
@@ -143,8 +151,8 @@ module.exports = {
         /*...*/
         // Here you can override default cookies options
         cookiesDefaultOpts: {
-          httpOnly: false,
-          secure: true, // Make sure that you have ssl configured, otherwise disable this flag
+          httpOnly: VSF_COOKIE_HTTP_ONLY || false,
+          secure: VSF_COOKIE_SECURE || true, // Make sure that you have ssl configured, otherwise disable this flag
         },
         /*...*/
       },
@@ -158,13 +166,28 @@ module.exports = {
 ### Install `mkcert`
 Please, follow the steps in the [official instruction](https://github.com/FiloSottile/mkcert). Different OS might require different steps to accomplish the task.
 
-### Generate certificate for a local development
+#### Update nuxt.config.js
+In the `nuxt.config.js` add the certificate configuration
+
+```
+baseConfig.server = {
+  ...baseConfig.server,
+  https: {
+    key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
+    cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem')),
+  },
+};
+```
+
+
+#### Generate certificate for a local development
 If you set up your project from CLI run the command in the APP root directory.
 If you are a contributor and have cloned Vue Storefront repository, run the command in `packages/theme`.
 ```
 mkcert localhost
 ```
 
+
 ### Start project
 ```bash
 yarn dev

diff --git a/packages/theme/.env.example b/packages/theme/.env.example
@@ -1,6 +1,6 @@
 VSF_NUXT_APP_ENV=development
 VSF_NUXT_APP_PORT=3000
-VSF_NUXT_APP_HOST=0.0.0.0
+VSF_NUXT_APP_HOST=localhost
 
 VSF_STORE_URL=https://localhost:3000
 VSF_MIDDLEWARE_URL=https://localhost:3000/api/
@@ -31,4 +31,9 @@ VSF_RECAPTCHA_SIZE=invisible
 VSF_RECAPTCHA_MIN_SCORE=0.5
 VSF_RECAPTCHA_VERSION=3
 
+VSF_COOKIE_HTTP_ONLY=
+VSF_COOKIE_SECURE=
+VSF_COOKIE_SAME_SITE=
+VSF_COOKIE_PATH=
+
 NODE_TLS_REJECT_UNAUTHORIZED=0
diff --git a/packages/theme/middleware.config.js b/packages/theme/middleware.config.js
@@ -29,10 +29,10 @@ module.exports = {
           ...cookieNames,
         },
         cookiesDefaultOpts: {
-          httpOnly: false,
-          secure: true,
-          sameSite: 'Strict',
-          path: '/',
+          httpOnly: process.env.VSF_COOKIE_HTTP_ONLY || false,
+          secure: process.env.VSF_COOKIE_SECURE || false,
+          sameSite: process.env.VSF_COOKIE_SAME_SITE || 'Strict',
+          path: process.env.VSF_COOKIE_PATH || '/',
         },
         defaultStore: 'default',
         externalCheckout: {

diff --git a/packages/theme/nuxt.config.js b/packages/theme/nuxt.config.js
@@ -2,8 +2,6 @@
 /* eslint-disable unicorn/prefer-module */
 // @core-development-only-end
 import webpack from 'webpack';
-import fs from 'fs';
-import path from 'path';
 import middleware from './middleware.config';
 import { getRoutes } from './routes';
 
@@ -296,15 +294,5 @@ export default () => {
     };
   }
 
-  if (process.env.NODE_ENV === 'development' || process.env.VSF_NUXT_APP_ENV === 'development') {
-    baseConfig.server = {
-      ...baseConfig.server,
-      https: {
-        key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
-        cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem')),
-      },
-    };
-  }
-
   return baseConfig;
 };