From ad79c04d6bfe91cb25f2a85e7b170e75ac769ed4 Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Tue, 1 Feb 2022 02:00:47 +0530 Subject: [PATCH] Update Content-Security-Policy header usage explanation (#33833) This PR improves the Content-Security-Policy header usage explanation in the `next.config.js` file. ## Bug - [x] Related issues linked using fixes #33598 - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [x] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint` --- docs/advanced-features/security-headers.md | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/docs/advanced-features/security-headers.md b/docs/advanced-features/security-headers.md index 772d085a09b90..521ab7be2869f 100644 --- a/docs/advanced-features/security-headers.md +++ b/docs/advanced-features/security-headers.md @@ -113,10 +113,29 @@ This header helps prevent cross-site scripting (XSS), clickjacking and other cod You can read about the many different CSP options [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). +You can add Content Security Policy directives using a template string. + +```jsx +// Before defining your Security Headers +// add Content Security Policy directives using a template string. + +const ContentSecurityPolicy = ` + default-src 'self'; + script-src 'self'; + child-src example.com; + style-src 'self' example.com; + font-src 'self'; +` +``` + +When a directive uses a keyword such as `self`, wrap it in single quotes `''`. + +In the header's value, replace the new line with an empty string. + ```jsx { key: 'Content-Security-Policy', - value: // Your CSP Policy + value: ContentSecurityPolicy.replace(/\s{2,}/g, ' ').trim() } ```