Content Security Policy is blocking download of a blob (csv) in an iframe on Firefox only, this works fine in Chrome... Not sure what I'm doing wrong. I've renamed the domains to make it easier to understand the parent child frame relationship.
This is the error:
Content Security Policy: The page’s settings blocked the loading of a
resource at
blob:https://mysubdomain-prod.mychilddomain.net/4663b181-76a0-dd4b-a5b2-7bbb65fd9f38
(“child-src https://mysubdomain-prod.mychilddomain.net
https://*.myparent.net”)
Firefox 54.0 on Sierra
Any ideas?
Related
I'm writing a web media viewer for images/videos and I need to cache that media for offline use.
I have a manifest and service worker so it can be installed as a PWA, and I'm trying to cache media from a list of URLs with esentially:
let cache = await window.caches.open('pwa-assets');
for(let url of allAssetURLs) {
await cache.add(url);
}
This seems to work fine for local assets, but if those URLs are on a different domain (from a CMS/CDN) I get this CORS error.
Access to fetch at 'https://storage.googleapis.com/....appspot.com/...example.mp4' from origin 'https://127.0.0.1:4173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Web.dev has a note that cross-domain caching is possible here, but doesn't say much about it.
The URLs I'm trying to cache are for files store in google cloud storage, for example:
https://storage.googleapis.com/....appspot.com/...example.mp4
These do work if used in <img/> or <video/> tags, so I don't think it's a CORS header issue on the CDN.
You write:
These do work if used in <img/> or <video/> tags, so I don't think it's a CORS header issue on the CDN.
Loading such subresources across origins is by default compatible with the Same-Origin Policy (SOP) and doesn't trigger CORS errors. See the relevant section of the MDN Web Docs about the SOP:
Here are some examples of resources which may be embedded cross-origin: [...]
Images displayed by <img>.
Media played by <video> and <audio>.
You write:
This seems to work fine for local assets, but if those URLs are on a different domain (from a CMS/CDN) I get this CORS error.
Invoking the add method on a Cache results in a GET request. If its argument is on a different origin, the resource in question needs to be configured for CORS or you'll get a CORS error, as you've experienced. See the note in the relevant MDN Web Docs:
Note that for opaque filtered responses [...]
we can't access to [sic] the response headers, so this check
will always fail and the font won't be cached. [...]
It is something to keep in mind if you're attempting to
cache other resources from a cross-origin domain that
doesn't support CORS, though!
You write:
The URLs I'm trying to cache are for files store in google cloud storage, for example https://storage.googleapis.com/....appspot.com/...example.mp4.
This page of the Google Storage documentation explains how to configure CORS for your bucket(s), assuming those buckets are indeed yours. Otherwise, you're out of luck and won't be able to cache those resources on the client side.
I am using this firefox addon to run javascript on sites to tweak how they work for me:
https://addons.mozilla.org/en-US/firefox/addon/codeinjector
Unfortunately on twitter I get this error:
Content Security Policy: The page's settings blocked the loading of a resource at inline ("script-src").
Is there a way I can override this in firefox settings?
Content Security Policy is a mechanism which allow a web server to specify, via HTTP headers, which source of content (scripts, images, ...) are considered safe.
As your scripts are not part of the content security policy, they are blocked by the browser, which is the intended behavior.
You can either:
Use a Firefox plugin, such as Modify Header Value, to dynamically add your script locations in the CSP rules coming from the HTTP headers.
Use the same plugin to completely remove the CSP headers. But this is means you will not be protected by CSP when browsing Twitter. This is not safe.
You can also totally disable CSP rules by disabling security.csp.enable in the about:config panel, but this is really not safe and I don't recommend it.
I am developing a page and for some reason I started getting this errors on our test server (replaced its hostname for security reasons):
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). injectGlobalHook.js:808:49
Content Security Policy: The page’s settings blocked the loading of a resource at https://example.com/admin/assets/demo/default/base/scripts.bundle.js (“script-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at https://example.com/admin/runtime.4cbfbfa49b193f847ed1.js (“script-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at https://example.com/admin/polyfills.7e64f3b1273a474a8867.js (“script-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at https://example.com/admin/scripts.9ad8122b74233091de3d.js (“script-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at https://example.com/admin/main.53084d308f02a83449d8.js (“script-src”).
The problem is that this errors happen only to me, only on firefox and only when not using incognito.
I also don't have any CSP configuration in the project.
I assume the reason is that at some point there were some CSP rules on that server and they got cached.
How can I debug the reason why I am getting those errors and where can I find the cached CSP rules?
edit:
Forgot to mention, this errors are not specific to angular.
They appear on all scripts loaded from that domain including angular page, swagger api-doc and Symfony debugger.
I just used the angular one as example.
After playing around a bit with three.js and the gltf loader I have noticed that Mozilla and Edge don't require the gltf file to be located in a web server, but ie11 does. Could anyone explain me why is this?
Thanks
This happens because of security restrictions in browsers. For example if you try load a glTF asset directly from file via the file protocol (file:///), Chrome logs the following error:
Access to XMLHttpRequest at 'file:///...DamagedHelmet.gltf' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
The behavior of browsers varies since they do not implement equal security policies.
In order to avoid security related problems, three.js recommends to use a local web server when developing/testing WebGL applications that load assets from external files.
I am afraid that Akamai can cache cookie. I want to avoid it.
Is there way to check it?
Can I I open browser, browser console and detect it?
P.S. I have not direct access to akamai configuration.
There is a addon called "Akamai Content Source" which is provided in akamai portal. "Content Source is a Mozilla Firefox and Firebug Extension that gives an overview of cache information in Firebug's Content Source panel. Both Firefox and Firebug are required to use this add-on." This will tell you if the request was served from akamai or it went to origin to get the response.