Loading CSS from different domain, and accessing it from Javascript

Question

I want to split up my website acrosss different servers and use subdomains for this purpose.

xttp://site.com will serve the main php file xttp://static.site.com will serve the css and js xttp://content.site.com will serve images and such

(xttp to prevent stackoverflow form thinking it is a url)

For the why, read below.

However, I run into a problem when I try to access through javascript any of the css rules. NS_ERROR_DOM_SECURITY_ERR to be precise. This is a relatively recent security measure and has to do with protection against cross domain scripting.

In the past, there were measures to fix this including just turning this protection off. This no longer works.

My question:

Is there anyway to access a normally loaded css rule through javascript if it is from a different domain then the main page?

The javascript:

MUI.getCSSRule=function(selector){
    for(var ii=0;ii<document.styleSheets.length;ii++){
        var mysheet=document.styleSheets[ii];
        var myrules=mysheet.cssRules?mysheet.cssRules:mysheet.rules;
        for(i=0;i<myrules.length;i++){
            if(myrules[i].selectorText==selector){
                return myrules[i]
                }
            }
        }
    return false
};

The javascript and css is loaded from the html with absolute paths

and the site url is "http://site.com"

Both domains are fully under my control but they are seperate machines (virtual for now but if it is even possible, in production they might not even be in the same location)

Rephrasing the question:

Is there any way to let Firefox and other browsers know that it should treat certain domains as being the same even though the domain names are different?

Why? So, I can easily use different servers with their own configuration, optimized for their task. A fast machine for the php, a simple one to serve the static stuff, a large machine for the content.

Why? Costs. A static server typically has little need for security against anyone downloading the files. It has little content so no need for an expensive array. Just load it in memory and serve from there. Memory itself can be limitted as well, try it. A PHP server, in my case at least, however will typically need lots of memory, need redundant storage, extensive logging. A content server will need massive storage and massive bandwidth but relatively little in the way of CPU power. Different hardware/hosting requirements for each. Finetuning each not only gives better performance but also reduces hosting costs, for me at least still one of the biggest costs of running a website.

Answer 1

CORS (cross-origin resource sharing) is a standard that allows sites to opt-in to access of resources cross-origin. I do not know if Firefox applies this to CSS yet; I know that it works for XMLHttpRequest, and it is intended that it will work for most other cross-domain request restrictions, but I haven't tested it in your precise use-case.

You can add following header to responses from static.site.com to allow your main page to access the content of resources served from there:

Access-Control-Allow-Origin: http://site.com

Or even, if you don't consider any of your content on static.site.com to be sensitive:

Access-Control-Allow-Origin: *

There's more information available on the Mozilla Developer Network.