c703fae24c
Fixes issue where a freshly cloned example will not work in development mode due to `unsafe-eval` being blocked by the CSP. Currently, the example will not work in development. Running the example with `run dev` will produce EvalError errors in console which prevent the app from functioning. This error also prevents any `<Script>` components with `afterInteractive` from being loaded. These issues do not occur in production where `eval` is not used. This PR: - Fixes the issue by allowing `unsafe-eval` if the environment is not `production`. - Improves the `script-src` value by [allowing backwards compatibility with browsers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#strict-dynamic) that do not support `strict-dynamic` (`https: http: 'unsafe-inline'` will be ignored by browsers that support `strict-dynamic`). Some further details are available here: https://github.com/vercel/next.js/issues/55638. This PR is not a fix for the issue however. - Fixes https://github.com/vercel/next.js/issues/61316 Co-authored-by: Sam Ko <sam@vercel.com> |
||
|---|---|---|
| .. | ||
| app | ||
| .gitignore | ||
| middleware.js | ||
| package.json | ||
| README.md | ||
Content Security Policy with Nonce
This example shows how to create a Next.js application that sets a strict Content Security Policy (CSP) for your pages, including generating a dynamic nonce.
Deploy your own
How to use
Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example with-strict-csp with-strict-csp-app
yarn create next-app --example with-strict-csp with-strict-csp-app
pnpm create next-app --example with-strict-csp with-strict-csp-app
Deploy it to the cloud with Vercel (Documentation).