Add CSP headers to the karma run

angular-workspace/projects/example-client-app/karma.conf.js

@@ -42,6 +42,21 @@ module.exports = function (config) {
     autoWatch: true,
     browsers: ['ChromeHeadless'],
     singleRun: false,
-    restartOnFileChange: true
+    restartOnFileChange: true,
+    customHeaders: [
+      // Test under the OWASP Basic non-strict CSP Policy
+      // See: https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#basic-non-strict-csp-policy
+      // Need script-src 'unsafe-inline' to support karma behavior
+      // See https://github.com/karma-runner/karma/issues/3260
+      // Need script-src 'unsafe-eval' to support running in Angular tests
+      // Need style-src 'unsafe-inline' to support FAST
+      // See: https://github.com/microsoft/fast/issues/4510
+      // Need worker-src blob: to support current worker loading pattern
+      {
+          match: '\\.html',
+          name: 'Content-Security-Policy',
+          value: "default-src 'self'; frame-ancestors 'self'; form-action 'self'; object-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; worker-src 'self' blob: ;"
+      }
+  ]
   });
 };

angular-workspace/projects/ni/nimble-angular/karma.conf.js

@@ -48,6 +48,21 @@ module.exports = config => {
         autoWatch: true,
         browsers: ['ChromeHeadless'],
         singleRun: false,
-        restartOnFileChange: true
+        restartOnFileChange: true,
+        customHeaders: [
+            // Test under the OWASP Basic non-strict CSP Policy
+            // See: https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#basic-non-strict-csp-policy
+            // Need script-src 'unsafe-inline' to support karma behavior
+            // See https://github.com/karma-runner/karma/issues/3260
+            // Need script-src 'unsafe-eval' to support running in Angular tests
+            // Need style-src 'unsafe-inline' to support FAST
+            // See: https://github.com/microsoft/fast/issues/4510
+            // Need worker-src blob: to support current worker loading pattern
+            {
+                match: '\\.html',
+                name: 'Content-Security-Policy',
+                value: "default-src 'self'; frame-ancestors 'self'; form-action 'self'; object-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; worker-src 'self' blob: ;"
+            }
+        ]
     });
 };

change/@ni-jasmine-parameterized-46b9b80c-a269-4b4c-adf2-57f68e5f4829.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Add CSP headers to the karma run",
+  "packageName": "@ni/jasmine-parameterized",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@ni-nimble-angular-39a7b01f-f617-432e-a667-cdc9f7775a0b.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Add CSP headers to the karma run",
+  "packageName": "@ni/nimble-angular",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@ni-nimble-components-ad3e3c6c-2355-4248-9dab-a01fc85b7aab.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Add CSP headers to the karma run",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/jasmine-parameterized/karma.conf.cjs

@@ -58,7 +58,18 @@ module.exports = config => {
             captureConsole: true
         },
         // to disable the WARN 404 for image requests
-        logLevel: config.LOG_ERROR
+        logLevel: config.LOG_ERROR,
+        customHeaders: [
+            // Test under the OWASP Basic non-strict CSP Policy
+            // See: https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#basic-non-strict-csp-policy
+            // Need script-src 'unsafe-inline' to support karma behavior
+            // See https://github.com/karma-runner/karma/issues/3260
+            {
+                match: '\\.html',
+                name: 'Content-Security-Policy',
+                value: "default-src 'self'; frame-ancestors 'self'; form-action 'self'; object-src 'none'; script-src 'self' 'unsafe-inline';"
+            }
+        ]
     };
 
     config.set(options);

packages/nimble-components/README.md

@@ -121,6 +121,13 @@ If a client is localized, it should:
     ```
 -   For each label token on the label provider API, localize the English string, and set the corresponding HTML attribute or JS property on the label provider to the localized values. A list of all label tokens for each label provider (and their corresponding attribute/property names and English strings) can be found in the [Tokens/Label Providers section of Storybook](http://nimble.ni.dev/storybook/?path=/docs/tokens-label-providers--docs).
 
+## Content Security Policy
+
+When using Nimble in an environment with a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) enabled, the following are known required settings beyond "common" settings (such as the [OWASP Basic non-Strict CSP Policy](https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#basic-non-strict-csp-policy)) for using Nimble:
+
+-   `style-src 'unsafe-inline'` is [needed to support style patterns in the FAST library](https://github.com/microsoft/fast/issues/4510) leveraged by Nimble.
+-   `worker-src blob:` is needed to support controls that leverage Web Workers (for example the Wafer Map).
+
 ## Accessibility
 
 For accessibility information related to nimble components, see [accessibility.md](/packages/nimble-components/docs/accessibility.md).

packages/nimble-components/karma.conf.js

@@ -148,7 +148,21 @@ module.exports = config => {
             },
             captureConsole: true
         },
-        logLevel: config.LOG_ERROR // to disable the WARN 404 for image requests
+        logLevel: config.LOG_ERROR, // to disable the WARN 404 for image requests
+        customHeaders: [
+            // Test under the OWASP Basic non-strict CSP Policy
+            // See: https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#basic-non-strict-csp-policy
+            // Need script-src 'unsafe-inline' to support karma behavior
+            // See: https://github.com/karma-runner/karma/issues/3260
+            // Need style-src 'unsafe-inline' to support FAST
+            // See: https://github.com/microsoft/fast/issues/4510
+            // Need worker-src blob: to support current worker loading pattern
+            {
+                match: '\\.html',
+                name: 'Content-Security-Policy',
+                value: "default-src 'self'; frame-ancestors 'self'; form-action 'self'; object-src 'none'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; worker-src 'self' blob: ;"
+            }
+        ]
     };
 
     config.set(options);