Attempt to add a rule to a CSS stylesheet gives "The operation is insecure" in Firefox

Question

I'm using Greasemonkey and trying to add a rule in a specific domain. But it results in an error saying The operation is insecure.
The code works fine on Chrome.

The script runs on http://mydomain.com/test/test.php
And the CSS file is http://cdn.mydomain.com/test/css/global.css

My function:

function css(selector, property, value) {
    for (var i=0; i<document.styleSheets.length;i++) 
    {
        try 
        { 
            document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}', document.styleSheets[i].cssRules.length);
        } 
        catch(err) 
        { 
            try // IE
            { 
                document.styleSheets[i].addRule(selector, property+':'+value);
            } 
            catch(err) {}
        }
    }
}

On Google I found that it could be because I'm trying to access cross-domains, so I've tried adding the URL to the CSS file to the 'accepted URLs' but no result.

How do I fix this?

Answer 1

I found this solution works around the issue:

var style = document.createElement("style");
document.head.appendChild(style);
style.sheet.insertRule("body { font-size:40px; }", 0);

Answer 2

Yes, Firefox blocks access to stylesheets that are cross-domain. It can (or at least used to) throw the exception:

"Access to restricted URI denied" code: "1012"
nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)"
location: ... ...

But, with CSS, you don't need to add rules to a specific style sheet. Just overwrite the style you care about.

For example, if the page sets:

body {
    background: white;
}

And your script sets:

body {
    background: red;
}    

Then the page will be red (nominally).

For the easiest, smartest way to change target page styles, see previous answers like this one.

Answer 3

Rules from a stylesheet run with the permissions of that stylesheet in various ways. Which means that if you can inject rules into a cross-site stylesheet you can carry out some cross-site attacks. That's why Firefox blocks adding a rule to a cross-site stylesheet.

It's possible that Chrome runs all rules with the permissions of the linking document instead, which is why it allows you to add things to the sheet.... However note that Chrome won't let you read a cross-site stylesheet.

Note that if you load your stylesheet with CORS (by setting the "crossorigin" attribute on the <link> and making sure your CDN is serving the right headers) then you will be able to get cross-site access to it.