This section covers the details of setting up a CSP.
## What is CSP and why is it useful? CSP mitigates cross-site scripting (XSS) attacks by requiring developers to whitelist the sources their assets are retrieved from. This list is returned as a header from the server. For instance, say you have a site hosted at `https://example.com` the CSP header `default-src: 'self';` will allow all assets that are located at `https://example.com/*` and deny all others. If there is a section of your website that is vulnerable to XSS where unescaped user input is displayed, an attacker could input something like: ```html ``` This vulnerability would allow the attacker to execute anything. However, with a secure CSP header, the browser will not load this script. You can read more about CSP on the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP). ## How does one implement CSP? ### Server-Side Rendering (SSR) To use CSP with Material UI (and Emotion), you need to use a nonce. A nonce is a randomly generated string that is only used once, therefore you need to add server middleware to generate one on each request. A CSP nonce is a Base 64 encoded string. You can generate one like this: ```js import crypto from 'node:crypto'; const nonce = crypto.randomBytes(16).toString('base64'); // 128 bits of entropy ``` This generates a value that satisfies the [W3C CSP specification](https://w3c.github.io/webappsec-csp/#security-nonces) guidelines. You then apply this nonce to the CSP header. A CSP header might look like this with the nonce applied: ```js header('Content-Security-Policy').set( `default-src 'self'; style-src 'self' 'nonce-${nonce}';`, ); ``` You should pass the nonce in the `