I have an angular ssr application which hosted with express. I am using google analytics and now i would like to use helmet.js to harden my application.
Right now I faced that the google analytics inline script violates the SCP.
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-xxxxxxx');
</script>
Google says i should use nonce to identify my scripts and no i dont want to use unsafe-inline setting, because it is really bad practise. Anybody has an example code?
I tried plenty of codes from google and chat gpt.
At a high level, you'll do the following:
res.locals.cspNonce
or equivalent.nonce
HTML attribute to your relevant<script>
or<style>
tags.Step 1: generate a nonce value
First, you'll need to generate a nonce value and save it to
res.locals
. It should be difficult to guess this nonce, so we'll generate 32 random bytes (256 random bits) and convert them to a hex string.Step 2: tell Helmet about this nonce
Next, tell Helmet about this nonce. More specifically, tell the
script-src
directive about it.In this example, we plan to use this nonce with a
<script>
tag. If you want to use an inline style instead, use thestyleSrc
directive.Step 3: put the nonce in your HTML
Finally, you need to set the
nonce
attribute of your<script>
or<style>
tag.It's likely that you're using a templating engine like Pug or EJS, but we'll do something simpler for this example and just send HTML inline.
If you've done everything correctly, you should see "Hello world!" in the console. You should also see a difference
nonce
value every time you refresh the page.Full app code
Here's the full source code for this example.
For more, see Helmet's docs.