how to implement content security policy NONCE in html script tags with node and helmet-CodePudding

I am having a hard time finding an answer to my question, and it is undoubtably because I don't know what to search for but I am hoping someone here can help :)

I have implemented helmet using a nonce in my node app which is hosting a react application.

Helmet implementation in node app:

app.use((req, res, next) => {
  res.locals.cspNonce = crypto.randomBytes(16).toString("hex");
  next();
});

app.use(
  helmet.contentSecurityPolicy({
    useDefaults: true,
    directives: {
      scriptSrc: ["'self'", (req, res) => `'nonce-${res.locals.cspNonce}'`],
      styleSrc: ["'self'", (req, res) => `'nonce-${res.locals.cspNonce}'`],
    },
  })
);

The only place in my entire react app where I am importing scripts and stylesheets is the head of my index.html page. So my question is, what do I need to add to the script and link tags below in order for me to use the CSP with nonce correctly?

react app index.html

<!DOCTYPE html>

<html lang="en">
  <head>      

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link 
      rel="stylesheet" 
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
      nonce="What to put here, if it even goes here?"
    />
    
    <script 
      type="text/javascript" 
      src="https://code.jquery.com/jquery.min.js" 
      nonce="How do I implement the res.locals.cspNonce here?"
    >
    </script>

    
    <title>Some title</title>

CodePudding user response：

The nonce should be injected via templating, so that the nonce that is always generated on access of a route is always up to date.

CodePudding user response：

React apps are mostly SPA where page's content is not totally reloaded from the server, but it is partially refreshed through XMLHttpRequest().

Therefore it is no technical possibility to refresh the value of 'nonce' when the page's parts are "reloaded", because <meta http-equiv='Content-Security-Pilicy'...> in the <head> section can not be changed when page "refreshes" in such way.
By this reason React use 'hash-values' instead of nonces.

The 'nonce-value' in React applications can only be used when Server-Side Rendering is used for whole page, which has many pitfalls and is used extremely rarely. And in this case, the application will lose all the benefits of React.