Accessing Cross Domain Stylesheet with .cssRules

Question

I get this error in FireBug when I try to access some CSS files hosted on external domains:

Security error" code: "1000
rules = styleSheets[i].cssRules;

The code I am using is:

$(document).ready(function () {
    $("p").live('mousedown', function getCSSRules(element) {
        element = $(this);
        var styleSheets = document.styleSheets;
        var matchedRules = [],
            rules, rule;
        for (var i = 0; i < styleSheets.length; i++) {
            rules = styleSheets[i].cssRules;
            for (var j = 0; j < rules.length; j++) {
                rule = rules[j];
                if (element.is(rule.selectorText)) {
                    matchedRules.push(rule.selectorText);
                }
            }
        }
        alert(matchedRules);
    });
});

Is there a way to fix this, beside moving all the css files on the same domain? Thank you

Answer 1

Sorry I do not think there is anything you can do about this as you can see from this forum post it looks like others are having a similar issues.

http://support.mozilla.com/tiki-view_forum_thread.php?comments_parentId=377420&forumId=1

Can you give some more information as to what exactly you want to do with this information. Maybe there is another way to tackle your problem?

Answer 2

You may have to write a proxy for that CSS-file.

• http://developer.yahoo.com/javascript/howto-proxy.html
• http://ajaxpatterns.org/Cross-Domain_Proxy

Answer 3

If you have control over the domain where the external stylesheet is hosted, it may help to add an appropriate Access-Control-Allow-Origin header.

Access-Control-Allow-Origin: http://stylesheet-user.example.com