From b405f4e0c067b2412883faa2d5c2626e9ea63136 Mon Sep 17 00:00:00 2001 From: EugeneHlushko Date: Thu, 15 Feb 2018 11:23:55 +0200 Subject: [PATCH 1/3] Start adding Nonce documentation --- src/content/guides/csp.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/content/guides/csp.md diff --git a/src/content/guides/csp.md b/src/content/guides/csp.md new file mode 100644 index 000000000000..d7fdd4d34781 --- /dev/null +++ b/src/content/guides/csp.md @@ -0,0 +1,23 @@ +--- +title: Content Security Policy +sort: 17 +contributors: + - EugeneHlushko +related: + - title: Nonce purpose explained + url: https://stackoverflow.com/questions/42922784/what-s-the-purpose-of-the-html-nonce-attribute-for-script-and-style-elements + - title: On the Insecurity of Whitelists and the Future of Content Security Policy + url: https://research.google.com/pubs/pub45542.html +--- + +Webpack is capable of adding `nonce` to all scripts that it loads. +To activate the feature set a `__webpack_nonce__` variable in your entry script. A unique hash based nonce should be generated and provided for each unique page view this is why `__webpack_nonce__` is specified in the entry file and not in the configuration. + +Example: + +```javascript +import React from 'react'; +// ... +__webpack_nonce__ = 'GSJADfsabfsafYFJSA123617'; +// ... +``` \ No newline at end of file From e601a0f7960f23d5e63e107ecedb58837f3f9f11 Mon Sep 17 00:00:00 2001 From: EugeneHlushko Date: Fri, 16 Feb 2018 09:42:27 +0200 Subject: [PATCH 2/3] Start adding Nonce documentation: more useful stuff on CSP and nonce --- src/content/guides/csp.md | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/src/content/guides/csp.md b/src/content/guides/csp.md index d7fdd4d34781..35166b4baece 100644 --- a/src/content/guides/csp.md +++ b/src/content/guides/csp.md @@ -3,21 +3,38 @@ title: Content Security Policy sort: 17 contributors: - EugeneHlushko + - probablyup related: - title: Nonce purpose explained url: https://stackoverflow.com/questions/42922784/what-s-the-purpose-of-the-html-nonce-attribute-for-script-and-style-elements - title: On the Insecurity of Whitelists and the Future of Content Security Policy url: https://research.google.com/pubs/pub45542.html + - title: Locking Down Your Website Scripts with CSP, Hashes, Nonces and Report URI + url: https://www.troyhunt.com/locking-down-your-website-scripts-with-csp-hashes-nonces-and-report-uri/ + - title: CSP on MDN + url: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --- Webpack is capable of adding `nonce` to all scripts that it loads. -To activate the feature set a `__webpack_nonce__` variable in your entry script. A unique hash based nonce should be generated and provided for each unique page view this is why `__webpack_nonce__` is specified in the entry file and not in the configuration. +To activate the feature set a `__webpack_nonce__` variable in your entry script. A unique hash based nonce should be generated and provided for each unique page view this is why `__webpack_nonce__` is specified in the entry file and not in the configuration. Please note that nonce should always be a base64-encoded string. -Example: +## Examples +In the entry file: ```javascript import React from 'react'; // ... -__webpack_nonce__ = 'GSJADfsabfsafYFJSA123617'; +__webpack_nonce__ = 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM='; // ... -``` \ No newline at end of file +``` + +## Enabling CSP + +Please note that CSP is not enable by default. A corresponding header `Content-Security-Policy` or meta tag `` needs to be sent with the document to instruct the browser to enable CSP. +Example CSP header including a CDN white-listed URL would look like: + +```http +Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; +``` + +For more information on CSP and `nonce` attribute refer to `Further reading` section in the bottom of this page. \ No newline at end of file From f02042bc4193c49232efb11b6a84fce2a2dc16e1 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sat, 24 Feb 2018 09:08:12 -0500 Subject: [PATCH 3/3] docs(guides): update grammar and formatting in csp.md --- src/content/guides/csp.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/content/guides/csp.md b/src/content/guides/csp.md index 35166b4baece..09dd15294b3a 100644 --- a/src/content/guides/csp.md +++ b/src/content/guides/csp.md @@ -1,5 +1,5 @@ --- -title: Content Security Policy +title: Content Security Policies sort: 17 contributors: - EugeneHlushko @@ -15,26 +15,26 @@ related: url: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --- -Webpack is capable of adding `nonce` to all scripts that it loads. -To activate the feature set a `__webpack_nonce__` variable in your entry script. A unique hash based nonce should be generated and provided for each unique page view this is why `__webpack_nonce__` is specified in the entry file and not in the configuration. Please note that nonce should always be a base64-encoded string. +Webpack is capable of adding `nonce` to all scripts that it loads. To activate the feature set a `__webpack_nonce__` variable needs to be included in your entry script. A unique hash based nonce should be generated and provided for each unique page view this is why `__webpack_nonce__` is specified in the entry file and not in the configuration. Please note that `nonce` should always be a base64-encoded string. + ## Examples + In the entry file: -```javascript -import React from 'react'; +``` js // ... __webpack_nonce__ = 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM='; // ... ``` + ## Enabling CSP -Please note that CSP is not enable by default. A corresponding header `Content-Security-Policy` or meta tag `` needs to be sent with the document to instruct the browser to enable CSP. -Example CSP header including a CDN white-listed URL would look like: +Please note that CSPs are not enable by default. A corresponding header `Content-Security-Policy` or meta tag `` needs to be sent with the document to instruct the browser to enable the CSP. Here's an example of what a CSP header including a CDN white-listed URL might look like: -```http +``` http Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; ``` -For more information on CSP and `nonce` attribute refer to `Further reading` section in the bottom of this page. \ No newline at end of file +For more information on CSP and `nonce` attribute, please refer to __Further Reading__ section at the bottom of this page.