Closed Bug 1699413 Opened 4 years ago Closed 4 years ago

CORS Workaround

Categories

(Core :: Storage: Cache API, task)

task

Tracking

()

RESOLVED INVALID

People

(Reporter: mweyaruider, Unassigned)

Details

(Keywords: reporter-external, Whiteboard: [reporter-external] [client-bounty-form] [verif?])

Attachments

(4 files)

I'm honestly not too sure if this really is a bug or not, however, in websites where this would fail due to the headers of the response not being correctly set:

<script src='https://www.gstatic.com/firebasejs/4.12.0/firebase.js'></script>

you can work around it by first adding the script to cache like so:

cache.add(fetch('https://www.gstatic.com/firebasejs/4.12.0/firebase.js', {
method: 'GET',
mode: 'no-cors',
}))

Resulting in a full code snippet that looks like:

<script>
cache.add(fetch('https://www.gstatic.com/firebasejs/4.12.0/firebase.js', {
method: 'GET',
mode: 'no-cors',
}))
</script>
<script src='https://www.gstatic.com/firebasejs/4.12.0/firebase.js'></script>

Thank you for your consideration!

Flags: sec-bounty?

Can you provide more information about how this relates to CORS or what headers these servers would set?

In principle a <script> element doesn't use CORS and can execute script from anywhere (module scripts do require CORS, but you're not using them it seems).

Flags: needinfo?(mweyaruider)

The attempted downloading of firebase.js from this file (when hosted on localhost) results in a CORS error blocking it.

Flags: needinfo?(mweyaruider)
Attached file The fix

This work around gets around the CORS error.

Thanks for taking a look at this!

I have uploaded two files which I hope may help, as well as a screenshot from my terminal.
The reason it fails is that the "Access-Control-Allow-Origin" header is missing.

Moving this to what I hope is a more relevant component for further triage/diagnosis/evaluation.

Group: firefox-core-security → dom-core-security
Component: Security → Storage: Cache API
Product: Firefox → Core

And this is in Firefox with a fresh profile? <script> as such doesn't make CORS requests and I cannot reproduce that error. I get that error the moment I add a crossorigin attribute. Also, cache.add() on its own throws as cache is not defined.

Very strange, if it helps, I'm hosting this application from a react app?

I stumbled into this when running this: https://github.com/cybersemics/em

I will be uploading a screenshot showing that this also happens with a fresh profile

I can't reproduce this either. There's got to be more to this in your actual context than is apparent in these test cases.

In general CORS is not a mechanism to forbid downloading anything: it prevents the use of resources in certain contexts. Your page can include a cross-origin <IMG>, you can put that image into a canvas, but if your site wants to then read the state of that canvas (which would let it read the content of that image) you better have used CORS to get that image. It's still in the cache though -- that's not a problem. CORS doesn't prevent you, the user, from reading anything. It prevents spy.example from learning the contents of resources from sensitive.example that aren't already public unless sensitive.example grants permission (using CORS).

From that screenshot it seems like fetch() in something named 0.chunk.js might be doing the fetching here, not <script>. That's a very different situation.

Thanks for taking a look at this! It looks like I've misunderstood the issue here, so I'll go ahead and mark this bug as invalid.

Have a great day further!

Status: UNCONFIRMED → RESOLVED
Closed: 4 years ago
Resolution: --- → INVALID
Group: dom-core-security
Flags: sec-bounty? → sec-bounty-
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: