Document CSSOM CORS: "SecurityError: The operation is insecure." with ext. CSS

[anselmh]

When using external CSS (like a CDNed CSS, ext. Webfonts) Firefox throws an error in part of our script:
resp. https://gist.github.com/ydaniv/3033012/#file-mozgetmatchedcssrules-js-L23

There are some hints for this here: http://stackoverflow.com/a/5323868 and http://stackoverflow.com/questions/3211536/accessing-cross-domain-stylesheet-with-cssrules.

The issue, solution and circumvention hack should be well documented so authors don't run into it not knowing what is going on.

[anselmh]

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

[anselmh]

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.

[lolmaus]

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?

[anselmh]

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

[lolmaus]

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.

[lolmaus]

PS Firefox.

[anselmh]

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.

[lolmaus]

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

[anselmh]

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.

[anselmh]

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

[luruke]

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 [];
}