HMR contains eval(), interferes with good CSP

[CxRes]

🐛 bug report

This is not really a bug, it does trip you up! I can turn off HMR or put CSP to reporting mode, but having it work out of the box would be nicer.

I have a CSP setup with require-trusted-types-for *

Which throws on:

http://localhost:*/__parcel_source_root/node_modules/@parcel/runtime-browser-hmr/lib/runtime-0ab3a625a281ec74.js

at line 101:

try {
    (0, eval)('throw new Error("test"); //# sourceURL=test.js');
  } catch (err) {
    supportsSourceURL = err.stack.includes('test.js');
 }

with error:

Trusted Type expected, but received string

💁 Possible Solution

Add a trusted type that is added as a CSP header to Parcel static server?
Remove eval?

Software	Version(s)
Parcel	2.6.2
Node	16.15.0
~npm/Yarn/~pnpm	7.0.1
Operating System	Windows 10 x64

Tested on Brave Version 1.40.109 Chromium: 103.0.5060.66 (Official Build) (64-bit)

[mischnic]

#8034:

As a side benefit, HMR should now fall back to loading URLs for changed assets via HTTP if eval is not allowed, e.g. with a strict CSP.

parcel/packages/runtimes/hmr/src/loaders/hmr-runtime.js

Lines 373 to 379 in 99cf505

	// If sourceURL comments aren't supported in eval, we need to load
	// the update from the dev server over HTTP so that stack traces
	// are correct in errors/logs. This is much slower than eval, so
	// we only do it if needed (currently just Safari).
	// https://bugs.webkit.org/show_bug.cgi?id=137297
	// This path is also taken if a CSP disallows eval.
	if (!supportsSourceURL) {

So the code you referenced should only be the check for determining if eval is allowed.

[CxRes]

Since you intend to keep eval, can we introduce a trusted type policy through dev server headers?

[mischnic]

I'm not familiar with CSP or trusted type policies, but as I've said: the current code should fall back to another method when eval is disabled.

[CxRes]

Unfortunately, it does not work that way. If you have a Content Security Policy defined (and every modern site should) without a trusted type policy for exceptions, the browser will panic. It is not that eval does not work, it actually works and that becomes a security violation. So the question of a fallback is moot!

For now, I guess I would take your advice from the other thread and not use Parcel dev server for production testing (which in some cases is just extra work, hence I suggested a Vite like option here). But, the error itself is something you are likely to encounter more of going in the future.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

[CxRes]

Go away bot. This issue is not resolved!

[mischnic]

So the situation here is that you have some HTML served with CSP enabled containing <script src="localhost:1234/index.js">, and then from there load code from the Parcel dev server?

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.