CORS Workaround
Categories
(Core :: Storage: Cache API, task)
Tracking
()
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!
Comment 1•4 years ago
|
||
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).
Reporter | ||
Comment 2•4 years ago
|
||
The attempted downloading of firebase.js from this file (when hosted on localhost) results in a CORS error blocking it.
Reporter | ||
Comment 3•4 years ago
|
||
This work around gets around the CORS error.
Reporter | ||
Comment 4•4 years ago
|
||
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.
Reporter | ||
Comment 5•4 years ago
|
||
Comment 6•4 years ago
|
||
Moving this to what I hope is a more relevant component for further triage/diagnosis/evaluation.
Comment 7•4 years ago
|
||
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.
Reporter | ||
Comment 8•4 years ago
|
||
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
Reporter | ||
Comment 9•4 years ago
|
||
Comment 10•4 years ago
|
||
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).
Comment 11•4 years ago
•
|
||
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.
Reporter | ||
Comment 12•4 years ago
|
||
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!
Reporter | ||
Updated•4 years ago
|
Updated•4 years ago
|
Updated•5 months ago
|
Description
•