I'm looking for help on how to create a secure Content Security Policy (CSP) directive that allows specifically for Stripe's scripts while eliminating the use of 'unsafe-inline'. My current CSP header looks like this: "script-src-elem 'self' 'unsafe-inline' https://js.stripe.com https://checkout.stripe.com". I have heard that using the 'nonce' directive might be the way to go, but I'm a bit confused about how to implement it properly. A little context: I'm working with Deno and Fresh using TypeScript, and as a junior developer, I want to ensure I understand this security feature without relying on AI tools for guidance. Any insights would be appreciated!
2 Answers
Using a nonce is a great idea for allowing scripts while still keeping your CSP tight! Basically, you'll want to generate a random nonce for each request. This nonce will be added to your CSP header, like this: `Content-Security-Policy: script-src 'nonce-yourRandomNonceHere'`. You also need to add the same nonce as an attribute in your script tags, like so: `...`. Just keep in mind that the nonce needs to be completely random and unique for each request; if someone tries to reuse it, it won't work since the value will change each time. Also, MDN has a solid guide on this topic if you need more detailed info! By the way, configuring third-party scripts can be a challenge. I dealt with a lot of weird errors from injected scripts before implementing CSP, so it’s really worth the effort!
Every time a page is served, ensure you create a new random nonce that you'll use in your CSP header. It should look like this: `Content-Security-Policy: script-src 'nonce-uniqueNonceValue';`. You'll need to use this same value in your inline scripts too, so format it like this in your HTML: `...`. Make sure you generate this nonce server-side and inject it into your response correctly. This method helps keep your application safe since a guessed nonce won’t work on other requests. Adapt the specifics based on your framework; for example, since you're using Deno and Fresh, make sure you're setting this correctly in your server responses! Good luck!
Thanks for the tips! I'm trying to customize my Fresh setup, but it seems Vite is complicating using nonce due to its automatic script handling. Any advice on that?

That's really helpful, thanks! Just to clarify, how do I deal with the issues thrown by Vite when trying to implement nonce?