"SharedArrayBuffer will require cross-origin isolation" with the dev server

[mischnic]

🐛 bug report

Using SharedArrayBuffer will require/already requires setting some headers on the server:

https://developer.chrome.com/blog/enabling-shared-array-buffer/

💁 Solution

We already set the "normal" CORS headers:

parcel/packages/reporters/dev-server/src/Server.js

Lines 33 to 41 in a67a5f0

	res.setHeader('Access-Control-Allow-Origin', '*');
	res.setHeader(
	'Access-Control-Allow-Methods',
	'GET, HEAD, PUT, PATCH, POST, DELETE',
	);
	res.setHeader(
	'Access-Control-Allow-Headers',
	'Origin, X-Requested-With, Content-Type, Accept, Content-Type',
	);

The dev server should set the headers described on the linked Chrome page, probably these:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Resource-Policy: same-origin

The question is whether we can just always set them or if this can cause problems

🌍 Your Environment

Software	Version(s)
Parcel	v2

[LironHazan]

@mischnic

Hey 👋

I wanted to take a look but regardless to the issue itself, running "yarn build" for the simple example is routing to the 404 page, is it something known?

So I added the following block into the setHeaders()

  res.setHeader('Cross-origin-Opener-Policy', 'same-origin');
  res.setHeader('Cross-Origin-Resource-Policy', 'same-origin');
  res.setHeader('Cross-Origin-Embedded-Policy', 'require-corp');

Verified that all tests are passing, and started "react-refresh" example instead,
it seem to work ok with or without the new headers,
I updated the react@latest react-dom@latest in order to avoid the "SharedArrayyBuffer" deprecation warning (a bug in version 16)

Updating the react dependencies also tweaked the parcel-create-react-app and the core/parcel package.json bin location from src/bin.js to lib/bin.js, I'm not sure why actually, maybe you'll know?

LMK what is the right way of testing the headers additions?

Thanks!

[mischnic]

running "yarn build" for the simple example is routing to the 404 page, is it something known?

That's probably because there's no HTML file in https://github.com/parcel-bundler/parcel/tree/v2/packages/examples/simple.

Updating the react dependencies also tweaked the parcel-create-react-app and the core/parcel package.json bin location from src/bin.js to lib/bin.js, I'm not sure why actually, maybe you'll know?

That only happens after running yarn build. You need to revert that change.

LMK what is the right way of testing the headers additions?

Our existing dev server integration tests are here: https://github.com/parcel-bundler/parcel/blob/v2/packages/core/integration-tests/test/server.js

[valentinbdv]

Hello, these headers will prevent loading external script with parcel:

Is there a way to choose if we want to include them or not?

Thanks a lot for your help, Valentin

[LironHazan]

@valentinbdv can you try using the crossorigin attribute as follows?
<img src="https://third-party.example.com/image.jpg" crossorigin>
read more here (I didn't tested btw, I'm not sure that will work)
(@mischnic worth documenting)

[mischnic]

I think what #6499 describes would fix this for you

[valentinbdv]

Thanks for your answers!

@LironHazan, I confirm that the cross-origin attribute fixes the issue as I used it already.
But in this case, I am loading a script that is itself loading another script so I can't add the attribute.

@mischnic I also tried to use proxyrc but then I guess I had the same issue as the one you linked. Do you know when the fix will be available?

[mischnic]

That bug is fixed already in the latest nightly

[valentinbdv]

I confirm this is working! Thanks a lot ;)

[bminer]

Just continuing the above discussion, you can disable COEP by creating .proxyrc.js with the following:

module.exports = function(app) {
  app.use((req, res, next) => {
    res.setHeader('Cross-Origin-Embedder-Policy', 'unsafe-none')
    next()
  })
}