I've been reading CSP stuffs recently, but I failed to find a clear explanation or solid example about how nonce gonna work. I tried to avoid using unsafe-inline for security concerns.
So far, my understanding is like the following:
A server will generate a new nonce every connection A client gets this nonce by a certain way and inserts this string into each script tag
However, I have no idea how the client will get this value which is dynamic and unique among each connection. What does a certain way be like? Should I implement an extra API to get this value?
I used React.js and there's a Google Tag Manager snippet in my HTML head, if someone can provide the example related to these would be perfect.
React applications is a SPA(Single Page Application) so content is loaded using XMLHttpRequest() and inserted without page reloading. Therefore 'nonce-value' is not used since you have no way to generate a new 'nonce' each time page refreshing.
The 'nonce' can be used when SSR (Server Side Rendering), in this case server can gererate fresh 'nonce' value and insert it into HTML code been sent (into <script nonce='value'>, <script src ='some_url' nonce='value'>, <style nonce='value'> and <link href='some_url' nonce='value' rel='stylesheet'>).
For this reason, React applications use 'hash-value' to allow inline scripts and styles.
For example react-static-plugin-csp-meta-tags package adds a CSP meta tag to your html files and adding hashes for all inline script and style tags.