From ef6c82cd1ababfb49057563abe8c9c044ec7ad9e Mon Sep 17 00:00:00 2001 From: Milan Raj Date: Mon, 15 Apr 2024 17:02:53 -0500 Subject: [PATCH] Add CSP headers to the karma run (#1893) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 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. --- .../projects/example-client-app/karma.conf.js | 17 ++++++++++++++++- .../projects/ni/nimble-angular/karma.conf.js | 17 ++++++++++++++++- ...ed-46b9b80c-a269-4b4c-adf2-57f68e5f4829.json | 7 +++++++ ...ar-39a7b01f-f617-432e-a667-cdc9f7775a0b.json | 7 +++++++ ...ts-ad3e3c6c-2355-4248-9dab-a01fc85b7aab.json | 7 +++++++ packages/jasmine-parameterized/karma.conf.cjs | 13 ++++++++++++- packages/nimble-components/README.md | 7 +++++++ packages/nimble-components/karma.conf.js | 16 +++++++++++++++- 8 files changed, 87 insertions(+), 4 deletions(-) create mode 100644 change/@ni-jasmine-parameterized-46b9b80c-a269-4b4c-adf2-57f68e5f4829.json create mode 100644 change/@ni-nimble-angular-39a7b01f-f617-432e-a667-cdc9f7775a0b.json create mode 100644 change/@ni-nimble-components-ad3e3c6c-2355-4248-9dab-a01fc85b7aab.json 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);