feat(mc-html-template): make transport security configurable (#2244)

.changeset/wild-trees-love.md

@@ -0,0 +1,14 @@
+---
+"@commercetools-frontend/application-config": patch
+"@commercetools-frontend/mc-html-template": patch
+---
+
+Allow configuration of `Strict-Transport-Security` header through custom application config.
+
+Similar to the `Feature-Policies` header use the `strictTransportSecurity` property of the custom application config to add to the defaults. 
+
+```js
+headers: {
+  strictTransportSecurity: ['includeSubDomains']
+}
+```

packages/application-config/schema.json

@@ -14,6 +14,13 @@
         "type": "string"
       },
       "uniqueItems": true
+    },
+    "hstsDirective": {
+      "type": "array",
+      "items": {
+        "enum": ["includeSubDomains", "preload"]
+      },
+      "uniqueItems": true
     }
   },
   "properties": {
@@ -148,6 +155,10 @@
         "permissionsPolicies": {
           "description": "Configuration for the HTTP Permissions-Policy header (https://github.com/w3c/webappsec-permissions-policy/blob/main/permissions-policy-explainer.md)",
           "type": "object"
+        },
+        "strictTransportSecurity": {
+          "description": "Additional configuration for the HTTP Strict-Transport-Security header (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security)",
+          "$ref": "#/definitions/hstsDirective"
         }
       },
       "additionalProperties": false,

packages/application-config/src/schema.ts

@@ -102,5 +102,9 @@ export interface JSONSchemaForCustomApplicationConfigurationFiles {
     permissionsPolicies?: {
       [k: string]: unknown;
     };
+    /**
+     * Additional configuration for the HTTP Strict-Transport-Security header (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security)
+     */
+    strictTransportSecurity?: ('includeSubDomains' | 'preload')[];
   };
 }

packages/application-config/test/fixtures/config-full.json

@@ -26,6 +26,7 @@
     },
     "permissionsPolicies": {
       "microphone": "()"
-    }
+    },
+    "strictTransportSecurity": ["includeSubDomains"]
   }
 }

packages/application-config/test/process-config.spec.js

@@ -189,6 +189,7 @@ describe('processing a full config', () => {
         permissionsPolicies: {
           microphone: '()',
         },
+        strictTransportSecurity: ['includeSubDomains'],
       },
     });
   });
@@ -235,6 +236,7 @@ describe('processing a full config', () => {
           permissionsPolicies: {
             microphone: '()',
           },
+          strictTransportSecurity: ['includeSubDomains'],
         },
       });
     });
@@ -278,6 +280,7 @@ describe('processing a full config', () => {
           permissionsPolicies: {
             microphone: '()',
           },
+          strictTransportSecurity: ['includeSubDomains'],
         },
       });
     });
@@ -326,6 +329,7 @@ describe('processing a full config', () => {
           permissionsPolicies: {
             microphone: '()',
           },
+          strictTransportSecurity: ['includeSubDomains'],
         },
       });
     });

packages/mc-html-template/src/process-headers.js

@@ -120,7 +120,9 @@ const processHeaders = (applicationConfig) => {
   );
 
   return {
-    'Strict-Transport-Security': 'max-age=31536000; includeSubDomains; preload',
+    'Strict-Transport-Security': ['max-age=31536000']
+      .concat(applicationConfig.headers.strictTransportSecurity || [])
+      .join('; '),
     'X-XSS-Protection': '1; mode=block',
     'X-Content-Type-Options': 'nosniff',
     'X-Frame-Options': 'DENY',

packages/mc-html-template/src/process-headers.spec.js

@@ -96,3 +96,39 @@ describe('structured header string', () => {
     });
   });
 });
+
+describe('with strict transport security', () => {
+  describe('when value is a string', () => {
+    it('should convert to a header string', () => {
+      const testApplicationConfig = {
+        ...defaultApplicationConfig,
+        headers: {
+          strictTransportSecurity: ['includeSubDomains'],
+        },
+      };
+
+      const processedApplicationConfig = processConfig(testApplicationConfig);
+
+      expect(
+        processedApplicationConfig['Strict-Transport-Security']
+      ).toMatchInlineSnapshot(`"max-age=31536000; includeSubDomains"`);
+    });
+  });
+});
+
+describe('without strict transport security', () => {
+  describe('when value is a string', () => {
+    it('should convert to a header string', () => {
+      const testApplicationConfig = {
+        ...defaultApplicationConfig,
+        headers: {},
+      };
+
+      const processedApplicationConfig = processConfig(testApplicationConfig);
+
+      expect(
+        processedApplicationConfig['Strict-Transport-Security']
+      ).toMatchInlineSnapshot(`"max-age=31536000"`);
+    });
+  });
+});