Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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.

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,175
    Thanks
    203
    Thanked 2,550 Times in 2,528 Posts
    Quote Originally Posted by johnsmith153 View Post
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,175
    Thanks
    203
    Thanked 2,550 Times in 2,528 Posts
    Quote Originally Posted by johnsmith153 View Post
    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?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,175
    Thanks
    203
    Thanked 2,550 Times in 2,528 Posts
    Quote Originally Posted by johnsmith153 View Post
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,413
    Thanks
    11
    Thanked 595 Times in 575 Posts
    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.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #10
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,413
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Quote Originally Posted by Philip M View Post
    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:

    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.
    Last edited by rnd me; 11-30-2012 at 07:28 PM.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • Users who have thanked rnd me for this post:

    johnsmith153 (12-01-2012)

  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #12
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,413
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Quote Originally Posted by felgall View Post
    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!
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #13
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by rnd me View Post
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #14
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •