Nonce injected into single html page react app

Question

I have created a react app built with vite and generated into a single html page. Everything works as expected when developing locally, but when I upload the file to the saas system server where it is hosted I get an error saying

Uncaught SyntaxError: Unexpected identifier '<random generated nonce string>'

The error shows it is coming from a script tag generated by the react production build which is within the parent inline script tag

(e.innerHTML = "<script nonce="<random generated nonce string>"></script>")

The nonce attribute looks like it is injected into the script and not allowing the page to load.

I tried uploading a basic html file with no script or style in it and it works just fine. I have a feeling it has to do with needing a CSP header on my end, but I am not to sure.

I created a very simple html page with no scripts and it works just fine, I then created another html page with a simple script and that works fine as well. Where the problem seems to be is the string script within the parent inline script

Answer 1

As far as I understand, your vite.config.ts inserts literally <random generated nonce string>. The problem is that the browser is unable to properly parse the resulting html document, in the belief that you created <random></random> html tag in an unexpected place with parameters generated, nonce, string. My suggestion is to replace <random generated nonce string> with $$CSP_NONCE$$ or something among the lines.