CodingForums.com - JavaScript trouble accessing cross-domain CSS file

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - JavaScript trouble accessing cross-domain CSS file (http://www.codingforums.com/showthread.php?t=283266)

johnsmith153

11-30-2012 02:06 AM

JavaScript trouble accessing cross-domain CSS file

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

11-30-2012 07:00 AM

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

11-30-2012 07:37 AM

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

11-30-2012 07:43 AM

Quote:

Originally Posted by johnsmith153 (Post 1296071)

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

11-30-2012 08:21 AM

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

11-30-2012 10:01 AM

Quote:

Originally Posted by johnsmith153 (Post 1296080)

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

11-30-2012 05:01 PM

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

11-30-2012 05:04 PM

Quote:

Originally Posted by johnsmith153 (Post 1296178)

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

11-30-2012 07:15 PM

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

Code:

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:

Code:

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

11-30-2012 07:23 PM

Quote:

Originally Posted by Philip M (Post 1296180)

it's pretty straight-forward.

run this in firebug or devtool right now from here:

Code:

// 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

11-30-2012 07:37 PM

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

11-30-2012 08:32 PM

Quote:

Originally Posted by felgall (Post 1296225)

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

11-30-2012 10:33 PM

Quote:

Originally Posted by rnd me (Post 1296249)

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

12-01-2012 12:25 AM

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.

All times are GMT +1. The time now is 07:07 AM.