CSP: Remove unsafe-eval & unsafe-inline from script-src

[robhudson]

One-line summary

Remove unsafe-eval & unsafe-inline from script-src

NOTE
This also changes webpack to use devtool: 'source-map' which may result in slightly slower build times. This is needed to satisfy the CSP requirements locally (not use eval) so devs can spot any breaking CSP being added. On my machine it was a negligible difference but I'd be interested to hear about other experiences.

Issue / Bugzilla link

#14828

Testing

I tested locally by clicking around with the console open looking for CSP violations, including the wagtail admin in my checks.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 79.07%. Comparing base (8478feb) to head (f36d92e).

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #14831   +/-   ##
=======================================
  Coverage   79.06%   79.07%           
=======================================
  Files         160      160           
  Lines        8355     8357    +2     
=======================================
+ Hits         6606     6608    +2     
  Misses       1749     1749           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[alexgibson]

Thanks for taking a look at this one @robhudson! It would really be great to make these improvements.

One area that might be worth investigating is GA4. In particular, I see in their CSP docs there is mention of needing 'unsafe-eval' if we use any custom JavaScript variables.

I might be mistaken (and maybe @stephaniehobson can confirm?), but we might use a couple still that need removing:

• Replace GTM variable {{CJS - data-cta-type (filtered for GA4)}} with non-JS version #13951
• Replace GTM variable {{CJS - combine data-link position and group }} with non-JS version #14054

[stephaniehobson]

Yeah, we are still using those but they can be removed now that GA3 is gone. We just have to make some changes bedrock side first.

[robhudson]

This updates the PR to only remove these from the report-only policy so we can see how it does there and we should get CSP reports in sentry, but it won't break anything since it's not enforced.

[janbrasna]

The GTM changes are published now:

• [GTM Review] Review "Remove CJS" workspace  #15259
• Update docs and code to remove GA3 references and match GA4 reality #14910

Does that mean eval() is no longer needed for GA and this can move forward?

[stephaniehobson]

Confirmed: we're no long using any custom javascript variables in GTM.

[stephaniehobson]

R+ 📜

[stephaniehobson]

@robhudson I've approved this but I'll leave it to you to merge in case it's gotten too stale.

[robhudson]

It's a little stale. I need to refresh my context around it, esp with the webpack bit. I'll be doing more stuff around CSP next week.

[janbrasna]

So that's unsafe-eval ✅ — the docs also mention unsafe-inline for loading the container, that I feel is worked around here by the bespoke gtm-snippet.js:

bedrock/media/js/base/gtm/gtm-snippet.es6.js

Lines 25 to 34 in 9b5f2a3

	GTMSnippet.loadSnippet = () => {
	if (GTM_CONTAINER_ID) {
	// prettier-ignore
	(function(w,d,s,l,i,j,f,dl,k,q){
	w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});f=d.getElementsByTagName(s)[0];
	k=i.length;q='//www.googletagmanager.com/gtm.js?id=@&l='+(l||'dataLayer');
	while(k--){j=d.createElement(s);j.async=!0;j.src=q.replace('@',i[k]);f.parentNode.insertBefore(j,f);}
	}(window,document,'script','dataLayer',[GTM_CONTAINER_ID]));
	}
	};

that will hopefully be sufficient (they pass the nonces normally, making it feel like they then drop more inline JS from their code…) so we'll see in the RO violations if there's some spaghetti coming from the loaded sources.

---

The webpack (re)build performance for different devtool settings for source mapping is described in more depth here:

• https://webpack.js.org/configuration/devtool/
• https://github.com/webpack/webpack/tree/main/examples/source-map#generated-source-maps
  (This setting is high fidelity so slow for dev, but at the same time has the most accurate results mapping to the original, so I personally don't mind it too much)

The only question is whether this doesn't wholesale add source maps also to prod outputs?

[robhudson]

Rebased. It sounds like this is good to go for testing in report-only mode. Just wanting to confirm.