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

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.