feat(application-config): add permissions policy header (#2143)

commercetools · Apr 14, 2021 · 53b27b0 · 53b27b0 · vercel · Apr 14, 2021
1 parent ed7f6ac
commit 53b27b0
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 2 deletions.
diff --git a/.changeset/bright-glasses-grin.md b/.changeset/bright-glasses-grin.md
@@ -0,0 +1,20 @@
+---
+"@commercetools-frontend/application-config": minor
+"@commercetools-frontend/mc-html-template": minor
+"@commercetools-frontend/mc-scripts": minor
+"@commercetools-website/custom-applications": minor
+---
+
+Adds support for specifying the `Permissions-Policy` header supported in Chrome 90.
+
+Similar to the `Feature-Policies` header an application config now support a `permissionsPolicies` field.
+
+```js
+headers: {
+  permissionPolicies: {
+     mircophone: '()'
+  }
+}
+```
+
+More information about supported permission policies can be found [here](https://github.com/w3c/webappsec-permissions-policy/blob/main/permissions-policy-explainer.md).
diff --git a/packages/application-config/schema.json b/packages/application-config/schema.json
@@ -144,6 +144,10 @@
         "featurePolicies": {
           "description": "Configuration for the HTTP Feature-Policy header (https://developer.mozilla.org/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy)",
           "type": "object"
+        },
+        "permissionsPolicies": {
+          "description": "Configuration for the HTTP Permissions-Policy header (https://github.com/w3c/webappsec-permissions-policy/blob/main/permissions-policy-explainer.md)",
+          "type": "object"
         }
       },
       "additionalProperties": false,

diff --git a/packages/application-config/src/schema.ts b/packages/application-config/src/schema.ts
@@ -96,5 +96,11 @@ export interface JSONSchemaForCustomApplicationConfigurationFiles {
     featurePolicies?: {
       [k: string]: unknown;
     };
+    /**
+     * Configuration for the HTTP Permissions-Policy header (https://github.com/w3c/webappsec-permissions-policy/blob/main/permissions-policy-explainer.md)
+     */
+    permissionsPolicies?: {
+      [k: string]: unknown;
+    };
   };
 }
diff --git a/packages/application-config/test/fixtures/config-full.json b/packages/application-config/test/fixtures/config-full.json
@@ -23,6 +23,9 @@
     },
     "featurePolicies": {
       "microphone": "none"
+    },
+    "permissionsPolicies": {
+      "microphone": "()"
     }
   }
-}
+}
diff --git a/packages/application-config/test/process-config.spec.js b/packages/application-config/test/process-config.spec.js
@@ -186,6 +186,9 @@ describe('processing a full config', () => {
         featurePolicies: {
           microphone: 'none',
         },
+        permissionsPolicies: {
+          microphone: '()',
+        },
       },
     });
   });
@@ -229,6 +232,9 @@ describe('processing a full config', () => {
           featurePolicies: {
             microphone: 'none',
           },
+          permissionsPolicies: {
+            microphone: '()',
+          },
         },
       });
     });
@@ -269,6 +275,9 @@ describe('processing a full config', () => {
           featurePolicies: {
             microphone: 'none',
           },
+          permissionsPolicies: {
+            microphone: '()',
+          },
         },
       });
     });
@@ -314,6 +323,9 @@ describe('processing a full config', () => {
           featurePolicies: {
             microphone: 'none',
           },
+          permissionsPolicies: {
+            microphone: '()',
+          },
         },
       });
     });

diff --git a/packages/mc-html-template/src/process-headers.js b/packages/mc-html-template/src/process-headers.js
@@ -124,6 +124,11 @@ const processHeaders = (applicationConfig) => {
         applicationConfig.headers.featurePolicies
       ),
     }),
+    ...(applicationConfig.headers.permissionsPolicies && {
+      'Permissions-Policy': toHeaderString(
+        applicationConfig.headers.permissionsPolicies
+      ),
+    }),
   };
 };
 

diff --git a/packages/mc-scripts/src/compile-html.js b/packages/mc-scripts/src/compile-html.js
@@ -39,7 +39,6 @@ const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
 const publicAssetsPath = resolveApp('public');
 
 const paths = {
-  featurePoliciesPath: flags.featurePolicies,
   publicAssetsPath,
   // NOTE: previously, for running the prod server locally, we were copying
   // assets into public/assets and compiling the index.html into public folder.

diff --git a/website/src/content/development/application-config.mdx b/website/src/content/development/application-config.mdx
@@ -143,6 +143,10 @@ The `csp` object can be used to define additional settings for the following dir
 
 The `featurePolicies` object can be used to configure the [HTTP `Feature-Policy` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy).
 
+### `headers.permissionsPolicies`
+
+The `permissionsPolicies` object can be used to configure the [HTTP `Permission-Policy` header](https://github.com/w3c/webappsec-permissions-policy/blob/main/permissions-policy-explainer.md).
+
 ## JSON Schema support for VSCode
 
 To enable JSON schema autocompletion and validation support, add a reference to the `schema.json` URL in the VSCode settings (either user settings or workspace settings):