JavaScript trouble accessing cross-domain CSS file

[johnsmith153]

http://page-test.co.uk/js.php

The above link shows my attempt to read a CSS file hosted on a CDN.

Why won't it work and what can I do?

I have access to all and everything, so can change anything.

I have tried to implement CORS, but no luck.

[devnull69]

The external CSS has clearly been loaded, but when you try to access the content of the external stylesheet you will stumble upon the browser SOP (same origin policy) which will consider the operation insecure.

Nevertheless, as soon as you create an element with for example class="style3" the external style will be applied correctly.

[johnsmith153]

I need to be able to read the contents of the CSS file in JS like in the example. Obviously I can use the styles, but that's not what this is about.

Is there no way to do this?

[Philip M]

Originally Posted by johnsmith153

I need to be able to read the contents of the CSS file in JS like in the example. Obviously I can use the styles, but that's not what this is about.

Is there no way to do this?

As devnull69 has said, you are blocked by the Same Origin Policy.

JavaScript automatically prevents scripts on one server from accessing properties of documents on a different server. This restriction prevents scripts from, for example, fetching private information such as directory structures or user session history

Simply stated, the SOP states that JavaScript code running on a web page may not interact with any resource not originating from the same web site.

Don't ask for a work-around - there isn't one.

[johnsmith153]

So you can't use something like CORS to authenticate it?

I believe you can with an Ajax request, but are you saying this isn't possible in this situation?

[Philip M]

Originally Posted by johnsmith153

So you can't use something like CORS to authenticate it?

I believe you can with an Ajax request, but are you saying this isn't possible in this situation?

One more time - Don't ask for a work-around - there isn't one. OK?

[johnsmith153]

I'm asking why CORS can't be used in this situation, because it could if I was making an XMLHttpRequest to submit data.

Why do you think I just want someone to post a load of code? Nobody learns that way. Surely you don't just hover around these forums posting code all day. Sometimes explaining things is better, quicker and more helpful.

[Philip M]

Originally Posted by johnsmith153

I'm asking why CORS can't be used in this situation, because it could if I was making an XMLHttpRequest to submit data.

Why do you think I just want someone to post a load of code? Nobody learns that way. Surely you don't just hover around these forums posting code all day. Sometimes explaining things is better, quicker and more helpful.

I can't tell you that because I don't know anything about CORS. Ask rndme.
As I understand it the CORS standard works by adding new HTTP headers that allow servers to serve resources to permitted origin domains.
But Javascript still cannot access those resources due to the SOP.

[rnd me]

you can't use CORS because the server at http://02873eb16af5eb15ff11-40b15116...s?v=1354302269 is not emitting an Access-Control-Allow-Origin header:

Cache-Control:public, max-age=259167
Connection:keep-alive
Content-Type:text/css
Date:Fri, 30 Nov 2012 19:12:17 GMT
ETag:b0263a895d13a9e5de138ef2716478f3
Expires:Mon, 03 Dec 2012 19:11:34 GMT
Last-Modified:Fri, 30 Nov 2012 01:45:21 GMT
Vary:Accept-Encoding

if it did emit that header, a plain old ajax command would work as though the request was made to your site.


while the cssText property is blacklisted by the SOP, you CAN sniff out external styles from off-domain sources.

in your example at http://page-test.co.uk/js.php, run this in firebug/devtools:

document.body.className="style3"; //text turns green
getComputedStyle(document.body).color; //shows "rgb(0, 128, 0)", which is "green"

so, one-at-a-time, you can sniff style properties. Note that you cannot hit pseudo-elements (:before/:after), and content: hello world; won't work either, so don't bother with that.

you can also send arbitrary text as the #hash of a background-image URL, or if you have clean CSV data, a font-family stack. you can "rip" both of those using getComputedStyle(). i've actually used to deliver tweets to an HTTPS client from HTTP without the dreaded popups about mixed zones, since the browser doesn't worry about css safety. a little janky, but it works.

[rnd me]

Originally Posted by Philip M

I can't tell you that because I don't know anything about CORS. Ask rndme.
As I understand it the CORS standard works by adding new HTTP headers that allow servers to serve resources to permitted origin domains.
But Javascript still cannot access those resources due to the SOP.

it's pretty straight-forward.

run this in firebug or devtool right now from here:

// normal 'ajax' function circa 2007:
function aGet(turl, callback) {
	var XHRt =  new XMLHttpRequest();

	XHRt.onreadystatechange = function () {
               if (XHRt.readyState == 4 && XHRt.status == 200) {
                   callback(XHRt.responseText, XHRt);
                }
        };

	XHRt.open("GET", turl, true);
	XHRt.send("");
	return XHRt;
} //end aGet()


// example async call to 3rd party domain:
aGet( 
    "http://cdn.atlas.illinois.edu/css/?file=http://www.it.illinois.edu/styles/screen.css" , 
    function(data){
        alert( data.toUpperCase() );
    }
);

it just works, no big whoop. you should see uppercase CSS when it's run.

[felgall]

The only way to access a different domain via Ajax is to call a script ron the server running on the same domain and have that script access the other domain for you.

The only way to pass information between JavaScript running on different domains is to set up message listeners in both scripts and use postMessage to send the messages across. Note that this requires either that you have access to update the scripts on both domains or the owner of the other domain has set up their side of the processing.

[rnd me]

Originally Posted by felgall

The only way to access a different domain via Ajax is to call a script ron the server running on the same domain and have that script access the other domain for you.

that's just not true.

did the code in post #10 not work for you?
granted, it's not the ie8 compatible syntax, but i sure hope that's not the browser you are using!

[felgall]

Originally Posted by rnd me

that's just not true.

It is when the site you are trying to access doesn't allow ajax calls from other domains.

It is the site you are trying to access that has to have CORS implemented in order for cross domain ajax calls to work. Implementing it on your own site allows scripts on other sites access to your server but does not allow your scripts access to other servers.

[johnsmith153]

Thanks everyone for replying. I've been away for a bit and there's lots to look at. I think I understand everything that can and can't be done and why this is.

Thanks again.