I have a CSR Vue project deployed to an AKS cluster. Now I have been tasked to apply CSP to this deployment, and I’ve encountered an issue with unsafe-inline, specifically

Refused to apply inline style because it violates the following Content Security Policy directive: “style-src-elem ‘self’ https://*.googleapis.com”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-fI4n6MflQImBULJAJb5wNHA9Dv2oAKihCDDbmPDuhqwk=’), or a nonce (‘nonce-…’) is required to enable inline execution.

Now, I am able to apply the actual CSP using Azure Application Gateway’s Rewrite Policy. I have thought about using hash to whitelist every resource needed, but there is simply way too many and I ended with 1000 characters limit from the Rewrite Policy so I have to use nonce as I do not want to allow unsafe-inline. But, I do not understand how I can apply such nonce logic within the Azure Environment.

In my other setup with Nginx, I used sub_filter within nginx.conf so that it goes into index.html and insert nonce into each script tags. I have yet to find any possible solution with setting up nonce within Azure. Would appreciate any pointers, thanks!