Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IE8 XSS / Jquery problem

Everything works perfect in Firefox and Chrome but except in IE8 (8.0.6001.18702)

This is the test code (Jquery 1.4.2) (same problem with $.post):

$(function() {
   $.get("http://domain2.tld/some.php", {}, function(response) {
       alert(response);
   });
});

This code is executed in domain1.tld and it is loaded from domain2.tld, this way:

<script type="text/javascript" src="http://domain2.tld/test.js"></script>

I'm getting a "Permission denied" message in IE8. I have tried so far without success:

1) adding in domain1.tld (php code):

header("X-XSS-Protection: 0");

2) disabling XSS filter in IE8 options.

I'm using IE8 debugger and it shows the error in line 5113:

xhr.open(type, s.url, s.async);

If instead of calling $.get(domain2.tld ...), I call $.get(domain1.tld ...) there is no error, which confirms to me that is an XSS "same origin policy" problem.

My only solution (I think) is doing it through a proxy (php code) but I would prefer not to do it as it impacts the performance.

Have someone knows of an alternative/fix to this problem?

Note: Updating IE8 is not an option as I want to test it without updates.

A very similar problem to mine: http://forum.jquery.com/topic/jquery-ui-tabs-ie8-and-injecting-elements-into-dom

like image 362
lepe Avatar asked Aug 02 '10 06:08

lepe


1 Answers

I'm sorry if my English is not perfect, as I can see I was not clear enough... One of my main concerns is explained by other person here: http://forum.jquery.com/topic/cross-domain-ajax-and-ie

So, what alternative exists?

1) XDomainRequest

Personally I think this is the best way to implement cross-site scripting in IE8+ (as it is supported natively). The only problem is that is a Microsoft-only way. But as many other things with IE family we can easily extend JQuery ajax functionality.

According to the documentation you will need to specify some additional headers in domain1.tld, for example, in PHP like this:

header("Access-Control-Allow-Origin: http://domain2.tld"); //use * for any

Maybe the next alternative is useful to provide the jquery implementation of XDomainRequest;

Update(a): There is a XDR library (non-jquery) which "replace" the XHR class to make it cross-browser, it is based in pmxdr client library. I haven't try it yet.

2) CORS

The only problem with this plugin is that is not exactly an extension as its functions are named differently, so you need to either change your codes or wrap that plugin.

Update(b): I modified the CORS plugin to make it easier. Check my other answer to get the code.

3) JsonP in JQuery

This should be the easiest way to solve my problem (as I have control of both servers). Natively most browsers supports cross site scripting, only if json format is used (I believe xml can be used as well). In this case $.getJSON() function is used. In order to make it work, you need to specify (as the documentation states) callback=? in the URL, for example:

$.getJSON("http://domain2.tld/index.php?callback=?",funciton(res){ ... }); 

The "?" after "callback" will be replaced with an identifier... in your php file, you need to get that identifier and surround the Json code like this:

print_r($_GET["callback"])."(".json_encode($mydata).");";

(I got that example from here)

The problem with this method is that if you want to retrieve HTML only, it must reside inside a json object and thus making the process a little bit more complicated and overwhelming.

4) jquery.jsonp plugin

If you need extra validations and features to the native JSONP support in JQuery, then try this plugin which will also simplify the process.

5) xdomainajax

This plugin uses an interesting aproach using Yahoo's service YQL, in which any web page (or a part of it) can be converted to Json, making it possible to import it into javascript. This method is good for those situations in which you can not change the origin format.

6) flXHR

This solution uses flash (swf) to achieve the magic. I could say that this is a very quick way to achieve almost a totally cross-browser implementation (as it relies in flash support). This method may be ideal for those sites in which flash will be present (for sure). However if your site does not requires flash, then that become the main disadvantage as users should have flash installed in order this to work.

7) xdajax

This solution is based in YUI implementation together with the "Flash" approach.

8) If none of the previous options is good for you, remember that you can still use the old trick of inserting a tag to import JS code.

9) Lowering IE security to the minimum also solve the problem. But I think it won't be good to have a message like this: "Please lower your security settings in order to use this site"... lol

I hope this can help others in a similar situation.

like image 124
lepe Avatar answered Sep 20 '22 12:09

lepe