From c889b2c9634c10164e9f2dcd8baa02e22d10e989 Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Mon, 31 Jan 2022 22:36:41 +0530 Subject: [PATCH 1/3] Update Content-Security-Policy header usage explanation This PR add more context on how to define and use Content-Security-Policy header in `next.config.js` file and fixes #33598 --- 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 772d085a09b9..efea05626b02 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(/\n/g, '') } ``` From fb23c559f9b938d51bf12f1bd28416a762c5d886 Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Mon, 31 Jan 2022 22:57:17 +0530 Subject: [PATCH 2/3] Update docs/advanced-features/security-headers.md Co-authored-by: Alexander Kachkaev --- docs/advanced-features/security-headers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/advanced-features/security-headers.md b/docs/advanced-features/security-headers.md index efea05626b02..c30940fb1280 100644 --- a/docs/advanced-features/security-headers.md +++ b/docs/advanced-features/security-headers.md @@ -135,7 +135,7 @@ In the header's value, replace the new line with an empty string. ```jsx { key: 'Content-Security-Policy', - value: ContentSecurityPolicy.replace(/\n/g, '') + value: ContentSecurityPolicy.replace(/\s{2,}/g, ' ') } ``` From 71e50f216dfdef989924a5551127d5a81b8344cd Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Mon, 31 Jan 2022 23:06:34 +0530 Subject: [PATCH 3/3] Update Content-Security-Policy header usage explanation; address newline when applying regex --- docs/advanced-features/security-headers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/advanced-features/security-headers.md b/docs/advanced-features/security-headers.md index c30940fb1280..521ab7be2869 100644 --- a/docs/advanced-features/security-headers.md +++ b/docs/advanced-features/security-headers.md @@ -135,7 +135,7 @@ In the header's value, replace the new line with an empty string. ```jsx { key: 'Content-Security-Policy', - value: ContentSecurityPolicy.replace(/\s{2,}/g, ' ') + value: ContentSecurityPolicy.replace(/\s{2,}/g, ' ').trim() } ```