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

@@ -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()
 }
 ```