CSP Nonce Support

Hi guys,

I wondering if there is any desire to add CSP nonce support to the .toml – similar to something like CSP Nonce support in Nginx. Essentially, a nonce would automatically be generated and be attached to the CSP header. Any inline script in the index.html with a predefined string (ie
CSP_NONCE) would then be replaced with the nonce when the file was served.

This seems to be the prescribed solution for google tag manager (コンテンツ セキュリティ ポリシーが設定されているページでの Google タグ マネージャーの使用  |  ウェブ トラッキング向け Google タグ マネージャー  |  Google Developers), which is a pretty common inline script. Having something like this supported out of the box in the .toml would be awesome. I assume the same objective could be accomplished with a lambda but was hoping to avoid that if possible.

Thanks!

Hi, @alexdbuchanan. You can set a CSP nonce using custom header rules.

You can even put that nonce into an environment variable. Then your site build code can insert the nonce into the HTML pages that require it and also add the nonce to your CSP header rules as well.

This would need to be done in your site build code though. It isn’t automatically done like it is with that Nginx feature but it can be done.

Are there questions about how to do this? Are you instead asking that we create a feature request to duplicate the automatic replacement behavior of that Nginx feature?

Hi! Thanks for the reply.

My understanding is that the nonce must change on every request to the server, so unless I’m misunderstanding, providing a static nonce value as a build env wouldn’t work?

I suppose my question is both a bit of feature request / request for guidance. But yes, I’m looking for the capability of having a dynamic nonce set on every request and then being able to have that nonce automatically inserted / replaced if I needed it by using some pre-defined string match.

Thanks!

3 Likes

Hi @luke, like @alexdbuchanan, being able to use a server-side generated nonce per request is something I’ve been trying to figure out for a while too.

In the past I’ve considered an approach using functions, but didn’t achieve much success with that approach.

With the (fairly) recent announcement of Edge Handlers (Edge Functions overview | Netlify Docs) I’m wondering whether that might offer a solution to this problem? Or might this be an over-engineered solution?

Any advice or insights you could provide would also be super helpful for me too!

Thanks

1 Like

hi Tim and Alex,

I’ve passed this information back to our product team - and if anything actionable happens, we would be happy to report back! General consensus seems to be at the moment that this could be handled (pardon the pun) by edge handlers, but that would be some custom code you might have to write.

3 Likes

Ha, thanks Perry.

I thought that might be the answer, but it never hurts to ask and see if you can get people to do work for you. Have a good one!

1 Like

Thanks Perry, appreciate your reply.