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?

Dilatometer

The stylish chrome extension does a great job at adding styles to certain domains: chrome.google.com/webstore/detail/stylish/… – Primordium

It works for Chrome, it doesn't for Firefox. – Dilatometer

Stylish for Firefox works even better than the Chrome version. (Chrome has issues with iframes, for example.) – Precast

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.

Precast

Answer 2

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);

Olericulture

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.

Node

This is a Greasemonkey application, the OP doesn't control the target page, nor does he have access to the CDN. – Precast

Hmm. Does greasemonkey not run its scripts with expanded privileges? – Node

Yes Greasemonkey can run with slightly enhanced privileges (depending on the @grant state), but it can't affect anything at the server side. Nor does it ever bypass CORS or COWS, except that GM_xmlhttpRequest() can make cross-domain requests. – Precast