Document CSSOM CORS: "SecurityError: The operation is insecure." with ext. CSS about object-fit HOT 11 CLOSED

Can be manually fixed by site authors:

p.s. I fixed the security problem by avoiding @import and setting a header in PHP:
header('Access-Control-Allow-Origin:*');
then adding the crossorigin attribute to the <link crossorigin="use-credentials"

respectively setting it in the .htaccess file.
We should still try to fix this in our script or it needs to be documented but this is the short fix.

ccing @mattbbp

from object-fit.

I researched a bit more and found out we could only fix this by circumventing the CSSOM CORS. This is a massive hack which I don’t think should land in our codebase as it has too many side effects.

Therefore I’ll rename the issue as it only needs to be documented.

from object-fit.

Hi! I receive "SecurityError: The operation is insecure." even though i'm bundling polyfill.object-fit.js with a relative URL.

Is there something i can do to solve it?

from object-fit.

Is there any SSL involved or a different port / host?

from object-fit.

No SSL.

The web server is running in a virtualbox, serving all assets locally (i. e. with relative paths). I'm opening it in browser as http://foo:3000.

from object-fit.

PS Firefox.

from object-fit.

So, are you using Webfonts that are from a 3rd party, by chance? Somewhere there must be another host / protocol involded to trigger this issue as far as I know. It’s very annoying but this these are the circumstances we’re dealing with when using JS (and we can’t use anything else here) nowadays for such stuff.

from object-fit.

I do use web fonts served from an external URL. I thought only the fitted images are concerned...

from object-fit.

Okay, then this is the issue. Unfortunately, as the polyfill needs to read out your computed CSS it does exactly that. And this means all inherited properties and values, such as fonts as well. I’m not sure if that is somehow avoidable, I have a look at this specific GetMatchedCSSRules.js anyways as it causes major problems and performance issues as well.

from object-fit.

By the way this should not affect your live setup when protocols and ports match (=non mixed content, so HTTP or HTTPS only).

from object-fit.

I had a similar problem like @lolmaus (I was using typekit)

I solved adding this code inside getSheetRules():

if (stylesheet.href && stylesheet.href.match(/typekit/)) {
            return [];
}

from object-fit.