Add a content security policy

In this tutorial, you'll learn how to do the following tasks:

• Setup a Content Security Policy on an existing Hydrogen app.
• Define custom directives within your Content Security Policy.
• Secure third party scripts with a Content Security Policy nonce.

• You've completed the Hydrogen Getting Started with a Hello World example project.

Hydrogen provides a default content security policy. Add the content security policy by using the createContentSecurityPolicy utility within your entry.server.jsx file which returns:

• nonce: Pass this value to React's renderToReadableStream or any other custom component that renders a script under the hood.
• NonceProvider: This makes the nonce available throughout the app, and renders it by wrapping RemixServer.
• header: This is the actual content security policy header value. Add it to your app response headers.

Your updated entry.server.jsx should look something like the following:

If you start your app's server, you'll notice a lot of errors in the console and scripts will fail to load. This is because the nonce value also needs to be passed to each script in the app.

1. Update root.jsx to use the useNonce() hook and pass the value to the ScrollRestoration, Scripts, and LiveRelod components. Make sure to also update the error boundary:

1. If you use any third-party scripts, then use the Script component which automatically attaches the nonce:

You can extend the default CSP generated by Hydrogen by passing custom directives into createContentSecurityPolicy. Refer to the content security policy reference for a description of available directives.