Add CSP headers to the karma run (#1893)

# Pull Request

Add docs for Content Security Policy configuration and run tests with a
defined Content Security Policy.

## 🤨 Rationale

End goal is to be aware / prevent regressions to CSP safety (i.e.
prevent adoption of a library that requires eval usage, etc).

## 👩‍💻 Implementation

Created security policies for the karma test runners aligned with [OWASP
Basic non-Strict CSP
Policy](https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#basic-non-strict-csp-policy)
with additions needed for nimble / specific test runners.

## 🧪 Testing

Rely on CI.

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.
- README docs added to nimble components. Didn't really seem worth
linking to it from all the wrappers so just captured it on components.
Each of the frameworks has their own docs, i.e.
[Angular](https://angular.io/guide/security#content-security-policy) and
[Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/content-security-policy?view=aspnetcore-8.0#apply-the-policy)
and didn't seem like something we need to duplicate and merge in.

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);