Firefox error with CSS from different domain

[nbremer]

Not sure if this is something that should be fixed, but I at least wanted to mention it. I'm using this polyfill, but I also load a font file from Google's fonts. Which comes down to a stylesheet from another domain. When I try to use the polyfill, Firefox gives me the following error: SecurityError: The operation is insecure., when trying to access sheet.cssRules in the walkStyles function.

For now I've found two ways to get around it:

I can add crossorigin="anonymous" to the Google fonts load, e.g.:

<link href="https://fonts.googleapis.com/css?family=Signika" rel="stylesheet" crossorigin="anonymous">

I don't know enough about it to say if that will work with every external CSS file though...

I can (also) filter out anything that comes from the google fonts domain. I know this "solution" is only going to work if the only external CSS that you load is from Google's fonts, so I guess it isn't really a solution. But perhaps any CSS from a separate domain could be filtered out instead?

//Change the original start of the update function from
//function update() {
//  let sheets = [].slice.call(document.styleSheets)
//to
function update() {
        let sheets = [].slice.call(document.styleSheets)
        sheets = sheets.filter(p => p.href && !p.href.includes("fonts.googleapis.com"))

For now I'm assuming that people using this polyfill will have it working through their own CSS files, although that's probably too strong of an assumption to make...

[developit]

I think we can solve this by wrapping the stylesheet access in a try/catch. It'll still allow using crossorigin, but won't break in cases where the polyfill isn't going to be able to access those rules anyway.

[developit]

Fixed in 1.1.1.