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>
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.
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.
Helmet maintainer here.
You should set the nonce attribute of the <link> and <script> tags. For example, if the generated nonce is abc123def456, you'll do something like this:
<script nonce="abc123def456" src="https://example.com/script.js"></script>
Because nonces are only one-time use, you cannot use nonces with static HTML. In other words, you need server-side HTML rendering in order to use CSP nonces.
If that's a problem for you, you don't have to use nonces. There may be other ways around the problem, like using CSP hashes for scripts instead.