diff --git a/angular-workspace/projects/example-client-app/karma.conf.js b/angular-workspace/projects/example-client-app/karma.conf.js index cb3fb06a5c..34077676d3 100644 --- a/angular-workspace/projects/example-client-app/karma.conf.js +++ b/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: ;" + } + ] }); }; diff --git a/angular-workspace/projects/ni/nimble-angular/karma.conf.js b/angular-workspace/projects/ni/nimble-angular/karma.conf.js index ac2aa009a6..9ab6a02d3f 100644 --- a/angular-workspace/projects/ni/nimble-angular/karma.conf.js +++ b/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: ;" + } + ] }); }; diff --git a/change/@ni-jasmine-parameterized-46b9b80c-a269-4b4c-adf2-57f68e5f4829.json b/change/@ni-jasmine-parameterized-46b9b80c-a269-4b4c-adf2-57f68e5f4829.json new file mode 100644 index 0000000000..4e7aa6a614 --- /dev/null +++ b/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": "rajsite@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/change/@ni-nimble-angular-39a7b01f-f617-432e-a667-cdc9f7775a0b.json b/change/@ni-nimble-angular-39a7b01f-f617-432e-a667-cdc9f7775a0b.json new file mode 100644 index 0000000000..7f586a8f0c --- /dev/null +++ b/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": "rajsite@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/change/@ni-nimble-components-ad3e3c6c-2355-4248-9dab-a01fc85b7aab.json b/change/@ni-nimble-components-ad3e3c6c-2355-4248-9dab-a01fc85b7aab.json new file mode 100644 index 0000000000..223f1ca893 --- /dev/null +++ b/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": "rajsite@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/packages/jasmine-parameterized/karma.conf.cjs b/packages/jasmine-parameterized/karma.conf.cjs index 03d6751ea9..9c60fdfa2e 100644 --- a/packages/jasmine-parameterized/karma.conf.cjs +++ b/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); diff --git a/packages/nimble-components/README.md b/packages/nimble-components/README.md index 867509e020..6663053bdb 100644 --- a/packages/nimble-components/README.md +++ b/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). diff --git a/packages/nimble-components/karma.conf.js b/packages/nimble-components/karma.conf.js index c3aedff86b..d3878a5406 100644 --- a/packages/nimble-components/karma.conf.js +++ b/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);