CODEWITHSUNDEEP
angularspring-bootgoogle-mapsgoogle-analyticscontent-security-policy
Jam
Jam

Reputation: 39

How to add nonce (CSP) to allow inline js/styles on Angular SPA pages served by Spring boot Java Application?

I have an Angular SPA application served by Angular boot Java application with a strict CSP Policy in place.

I've added the below config to allow Google Analytics and Maps to work -

"img-src 'self' data: maps.gstatic.com *.googleapis.com *.ggpht.com https://www.google-analytics.com"
"connect-src 'self' https://www.google-analytics.com *.a2develop.com"
"script-src 'self' maps.googleapis.com www.googletagmanager.com

Analytics seems to work, but google Maps seems to apply inline styles, so that does not work

Errors


Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' maps.googleapis.com https://www.google-analytics.com https://ssl.google-analytics.com". Either the 'unsafe-inline' keyword, a hash ('sha256-a2VR/Wq1VPr0+3GRY+lEmAQm7wjwwnDtPpcCs2zTrw='), or a nonce ('nonce-...') is required to enable inline execution.

Are there any methods to add a nonce to the Angular SPA application served by the Java Spring boot app?

Upvotes: 1

Views: 2821

Answers (1)

granty
granty

Reputation: 8546

Of couse you can manage 'nonce-value' into CSP HTTP header using Spring Security built-in filters.
But SPA uses meta tag CSP and also SPA are not compatible with nonce.

CSP spec requшres that server MUST generate a fresh value for the 'nonce-value' at random and independently each time it transmits a policy (each page loading). But the SPA loads the page once, and then just updates parts of it instead of loading a new page.

Therefore, the meta tag with nonce will remain the same. Changing meta tag CSP with the script will no effect, because previous policy will be in force and a second one will be added.

Upvotes: 1

Related Questions