diff --git a/docs/02-app/01-building-your-application/07-configuring/15-content-security-policy.mdx b/docs/02-app/01-building-your-application/07-configuring/15-content-security-policy.mdx index 504ee124dbcf9..e332dc2374faa 100644 --- a/docs/02-app/01-building-your-application/07-configuring/15-content-security-policy.mdx +++ b/docs/02-app/01-building-your-application/07-configuring/15-content-security-policy.mdx @@ -209,6 +209,42 @@ export default function Page() { } ``` +## Without Nonces + +For applications that do not require nonces, you can set the CSP header directly in your [`next.config.js`](/docs/app/api-reference/next-config-js) file: + +```js filename="next.config.js" +const cspHeader = ` + default-src 'self'; + script-src 'self' 'unsafe-eval' 'unsafe-inline'; + style-src 'self' 'unsafe-inline'; + img-src 'self' blob: data:; + font-src 'self'; + object-src 'none'; + base-uri 'self'; + form-action 'self'; + frame-ancestors 'none'; + block-all-mixed-content; + upgrade-insecure-requests; +` + +module.exports = { + async headers() { + return [ + { + source: '/(.*)', + headers: [ + { + key: 'Content-Security-Policy', + value: cspHeader.replace(/\n/g, ''), + }, + ], + }, + ] + }, +} +``` + ## Version History We recommend using `v13.4.20+` of Next.js to properly handle and apply nonces.