Cross Origin Resource Policy with Parcel nightly build version (local env)

[jasonhieu1905]

🐛 bug report

Having an <img tag include external src causes the CORS issue.

<img
                src="https://images.unsplash.com/photo-1593642532842-98d0fd5ebc1a?crop=entropy&cs=srgb&fm=jpg&ixid=Mnw3NjY4NXwxfDF8YWxsfDF8fHx8fHwyfHwxNjI1NjQzNDQ1&ixlib=rb-1.2.1&q=85"
                width="32px"
                height="32px"
            />

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

added crossOrigin to img tag

<img
                src="https://images.unsplash.com/photo-1593642532842-98d0fd5ebc1a?crop=entropy&cs=srgb&fm=jpg&ixid=Mnw3NjY4NXwxfDF8YWxsfDF8fHx8fHwyfHwxNjI1NjQzNDQ1&ixlib=rb-1.2.1&q=85"
                width="32px"
                height="32px"
                crossOrigin="anonymous"
            />

🔦 Context

💻 Code Sample

🌍 Your Environment

Parcel nightly version 2.0.0-nightly.753 | local server.

[mischnic]

You can do what #6499 (comment) describes, to override/unset these headers.

[jasonhieu1905]

@mischnic : thanks for the response, i am just curious why we should do that. It's not happened in previous version. and the issue depends on different image source.

[mischnic]

Things like SharedArrayBuffer will require these headers very soon: https://web.dev/coop-coep/ (in Firefox & Chrome)

[jasonhieu1905]

I did not get that. How could I apply proxy without backend server. I am using react with parcel.

[mischnic]

If you add a .proxyrc.js in your project, Parcel will use it for its dev server. This way, you can override the headers

[barisbikmaz]

I have the same problem. We're building office addins. For that we need to include an external office.js file which dynamically loads other js files.

I can use crossorigin="" on the office.js file which works

<script
  type="text/javascript"
  src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"
  crossorigin=""
></script>

but the file outlook_strings.js which is dynamically loaded by the office.js has the Cross-Origin-Resource-Policy problem.

[mischnic]

You can use a proxyrc to undo this recent change we did in Parcel.

Sorry for hitting the close button accidentally...

[barisbikmaz]

This worked for me now. Added .proxyrc.js

module.exports = function (app) {
    app.use((req, res, next) => {
        res.removeHeader('Cross-Origin-Resource-Policy');
        res.removeHeader('Cross-Origin-Embedder-Policy');
        next();
    });
};

[MaxFlower]

Thank you @barisbikmaz it works for me as well 👍🏻

This worked for me now. Added .proxyrc.js

module.exports = function (app) {
    app.use((req, res, next) => {
        res.removeHeader('Cross-Origin-Resource-Policy');
        res.removeHeader('Cross-Origin-Embedder-Policy');
        next();
    });
};

[JohnnyMcFadden]

After a solid few hours of searching and thinking it was something over on my cloudfront distribution settings or s3 bucket policy... I finally found this! I recently upgraded from parcel 1 to parcel "^2.0.0-rc.0". All my external asset requests were being blocked by cors. Adding the .proxyrc.js file immediately fixed my localhost issues. Is this something that we can expect to remove in the future?

[domenkozar]

Same workaround works for me!

[Banou26]

I don't understand why Parcel is making COOP/COEP a default behavior when 99% of the web doesn't use features like SharedArrayBuffer, and other timing heavy functions that present security problems.

The COOP/COEP are opt-in headers so why does Parcel make that opt-in, a opt-out ?

One thing you could do if you want to make it a default behavior is detect the use of those features in the code and then apply the COOP/COEP headers just like Parcel already does with service workers or webworkers's usage of their register function serviceWorkerContainer.register.
If we use SharedArrayBuffer or performance., then apply the COOP/COEP headers, otherwise, don't.

In the worst case, users that actually want COOP/COEP will have to set their proxyrc.js to set those headers, but at least the other 99% won't have to manually remove it.

(I am actually one of those that will want and use COOP/COEP for some of my projects to unlock that nice SharedArrayBuffer so that's good for me, but it just doesn't make sense from the POV of everyone else lol)

[MagnusBrzenk]

Another voice here saying how unhappy I am to have to add yet another config file to my repo to avoid CORS issue :(

[mischnic]

This has been reverted (in the nightly versions): #6789

[drazik]

I confirm that the problem is not present anymore on 2.0.0-nightly.845. Thank you @mischnic 🎉