How To Inject A Nonce Into CoudFront Distribution For My Content Security Policy

Question

Hello All,
 
 I am building a new website from scratch.  I want to comply with the latest CSP recommendations.

Using Nginx on an EC2 instance that serves as my origin. I have configured Nginx to inject a nonce into me Headers and the various scripts and styles. I have moved al in-line stuff to style sheets and js files. I used this tutorial: --https://krvtz.net/posts/easy-nonce-based-content-security-policy-with-nginx.html

All works great when I access the server directly via cdn.mywebsite.com. I also use the same subdomain, cdn.mywebsite.com as the source for my CloudFront Distribution.  I then invalidate the whole,  /*, distribution.  When I access the site via mywebsite.com, which is set up via Rout 53 to fetch from CloudFront, everything breaks.

I view the source code and see that the nonce has been rewritten to "" instead of the nice and secure string that I get when directly accessing via the origin.

I can figure things out but am lost. Do I need a Lambada function or something else?

Hugs and kisses for any help provided,

JCU

Answer

Hi,

Thanks for your question and it seems we missed on our backlog. I am really sorry for that.
Can you please confirm if you still have issues?

I believe that this issues it is related to CORS - cross-origin resource sharing
How do I resolve the "No 'Access-Control-Allow-Origin' header is present on the requested resource" error from CloudFront? -> https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/

Looking forward for hearing back from you.

Answer

Im running with the same issue, we need the "nonce-xxx" csp to in cloudfront, there is no way to make it dynamically generated.

Answer

First off if you view the source code in Chrome or FF developer tools it blanks the nonce attribute (`nonce=""`) so it is obfuscated but it is still present in the DOM. You can confirm this if you pop up the context menu (right-click) and View Source. The nonce will show if it is being served there.

To solve the main problem of squeezing the nonce value into the CSP served by a CloudFront Response Policy you can use a CloudFront function. We have our origin / HTTP server return the nonce it used in the HTML in a custom header. We then use a Viewer Response CloudFront Function to extract this nonce value (remembering to delete the custom header), and then insert it dynamically into the Content-Security-Policy HTTP header value. We've not had any issues with this solution so far.

Hope this helps.

How To Inject A Nonce Into CoudFront Distribution For My Content Security Policy

Relevant content