{"id":115,"date":"2014-05-16T00:02:17","date_gmt":"2014-05-15T18:02:17","guid":{"rendered":"http:\/\/promincproductions.com\/blog\/?p=115"},"modified":"2023-10-04T20:44:02","modified_gmt":"2023-10-05T01:44:02","slug":"cors-cross-site-scripting-ie8-ie9","status":"publish","type":"post","link":"https:\/\/promincproductions.com\/blog\/cors-cross-site-scripting-ie8-ie9\/","title":{"rendered":"CORS – Cross Site \/ Domain Scripting – IE8 & IE9"},"content":{"rendered":"

UPDATE 01\/23\/2015<\/strong><\/h3>\n\n\n\n

I’ve realized that CORS can at times be blocked by firewalls and thus have adopted a new personal best practice for performing CORS requests using a server side proxy setup – which is browser agnostic and thus conditional code is not needed on a per-browser basis. \u00a0I suggest you read Successful Cross Site Scripting (CORS) Using A Server Proxy<\/a><\/strong>\u00a0for how to best implement a server side proxy CORS request.<\/p>\n\n\n\n

\n\n\n\n

I ran into an annoying problem today…  We were getting complaints that our application wasn’t working (of course the customers never tell you what browser, what they are doing, etc.).  But I knew it was breaking where I to an AJAX call to my NodeJS server, which I’m calling to via IP address due to our multi-server setup.  This technically creates a cross site scripting issue.<\/p>\n\n\n\n

I’m using jQuery to do this AJAX call, and I know I have the jQuery settings for cross-site scripting enabled.<\/p>\n\n\n\n

jQuery.support.cors = true;  \/* Allow cross domain scripting *\/<\/code><\/pre>\n\n\n\n
So what gives?<\/p>\n\n\n\n
Bottom line – our good ‘ole evil friend, Internet Explorer, has a situation where cross site scripting is not supported by our not-so-evil friend jQuery.  Now to be fair to IE, this only affects users who have their security settings to block cross site scripting.  Which I believe is the default setting…  So we could add a message to the site for them to change their settings.  It’s simple really:<\/p>\n\n\n\n
    \n
  1. Click on the little gear thingy if in IE9.  If your in IE8 use the settings<\/strong> menu.<\/li>\n\n\n\n
  2. Choose Internet <\/strong>Options<\/strong><\/li>\n\n\n\n
  3. Select the Security<\/strong> tab<\/strong><\/li>\n\n\n\n
  4. Click the Custom Level…<\/strong> button (why did they add the ellipses there???)<\/li>\n\n\n\n
  5. Scroll about 2\/3rds the way down the long list to the Miscellaneous<\/strong> section<\/li>\n\n\n\n
  6. For the option Access data sources across domains<\/strong>, choose Enable<\/strong> (or Prompt<\/strong> if you want the annoying alert box everytime you come across this)<\/li>\n\n\n\n
  7. Click OK<\/strong><\/li>\n\n\n\n
  8. Click OK<\/strong><\/li>\n\n\n\n
  9. Reload your page and try again.<\/li>\n<\/ol>\n\n\n\n
    \"CORS
    Just ask your users to simply change these settings. Or you could change your code….<\/figcaption><\/figure>\n\n\n\n
    Easy peasy, right?<\/p>\n\n\n\n
    I guess the other option is to use Javascript \/ jQuery to sniff for only our unfortunate IE friends and do a custom function for just them.  Now I should say, IE10 and greater is safe from this, so we don’t need to treat them special.  Oh, and for IE7 and lower this fix does not work – they are essentially a lost cause in many regards.  But IE 8 & IE 9 are fixed with this solution.<\/p>\n\n\n\n
    The Solution<\/h2>\n\n\n\n
    I’m not going to take credit for the solution – rather am going to do my best to pass along those with higher knowledge than me.  Thank you so much to Tom Elliott at Web Dev Door<\/a> for clearly documenting the solution I used for this.  So the solution is this article:<\/p>\n\n\n\n
    http:\/\/www.webdevdoor.com\/jquery\/cross-domain-browser-json-ajax\/<\/a><\/p>\n\n\n\n
    I didn’t personally need to do anything with the Step 1<\/strong> portion of his article, but that’s not to say that your case won’t require it.  This is of course dependent on your server and code setup.<\/p>\n\n\n\n
    But the Step 2<\/strong> portion of his article is a brilliant little script that simply detects if you are a IE8 or IE9 visitor.  If so, the AJAX request is sent via xdr – the Microsoft protocol for cross-domain Asynchronous JavaScript and XML requests<\/a>.  If you are NOT on one of those two browsers, the AJAX request is handled via jQuery (or if you have some other means by all means go ahead.<\/p>\n\n\n\n
    I did do one addition to Tom’s code.  For the IE visitors using xdr, I added an onerror event in the case that something does go wrong.  This is something I was doing in my jQuery AJAX call already, so needed to add it here as well.<\/p>\n\n\n\n
    xdr.onerror = function() {\n processFinalImageOutputError(xdr.responseText);\n};<\/code><\/pre>\n\n\n\n
    I created two functions – one for AJAX success and one for AJAX error and both the xdr and jQuery functions can call those functions in their appropriate instance.<\/p>\n\n\n\n
    So my final output looks something like this:<\/p>\n\n\n\n
    var url = 'http:\/\/cross-domain-url.com\/script?param1=something&param2=somethingElse';\nvar browser = navigator.userAgent;\nvar IEversion = 99; \/\/Give a default value for non-IE browsers\n\nif (browser.indexOf(\"MSIE\") > 1) { \/\/Detects if IE\n IEversion = parseInt(browser.substr(browser.indexOf(\"MSIE\")+5, 5));\n}\n\nif (IEversion < 10) {\n \/* For older IE, sending AJAX request using xdr *\/\n xdr = new XDomainRequest(); \/\/ Creates a new XDR object.\n xdr.timeout = 3000;\/\/Set the timeout time to 3 second.\n xdr.onload = function () {\n   successFunction(xdr.responseText);\n };\n xdr.onerror = function () {\n   errorFunction(xdr.responseText);\n };\n xdr.ontimeout = function () {\n   alert(\"Error\");\n };\n \/\/ this also needs to be set\n xdr.onprogress = function() {\n   window.console.log('progress');\n };\n xdr.open(\"GET\", url); \/\/ Creates a cross-domain connection with our target server using GET method.\n xdr.send(); \/\/Send string data to server\n} else {\n \/* For modern browsers, send AJAX request using jQuery *\/\n jQuery.ajax({\n   url: url,\n   dataType: 'json',\n   crossDomain: true,\n   success: function( data ) {\n     successFunction(data);\n   },\n   error: function(xhr, status, errorThrown) {\n     errorFunction(xhr, status, errorThrown);\n   }\n });\n}\n\nfunction successFunction(data) {\n console.log(\"AJAX Request Success\");\n}\n\nfunction errorFunction(xhr, status, errorThrown) {\n console.log(\"AJAX Request ERROR\");\n console.log(xhr);\n console.log(status);\n console.log(errorThrown);\n}\n<\/code><\/pre>\n\n\n\n
     UPDATED 07\/11\/2014<\/strong><\/p>\n\n\n\n
    Modified the XDR functions a bit – according to Rich Apodaca<\/a> on this post<\/a>, I was missing a few of the required functions.<\/p>","protected":false},"excerpt":{"rendered":"
    UPDATE 01\/23\/2015 I’ve realized that CORS can at times be blocked by firewalls and thus have adopted a […]<\/p>\n","protected":false},"author":1,"featured_media":120,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wprm-recipe-roundup-name":"","wprm-recipe-roundup-description":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[12,5],"tags":[],"class_list":["post-115","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-jquery","category-website-development"],"jetpack_featured_media_url":"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/05\/CORS.png","jetpack_shortlink":"https:\/\/wp.me\/p4BbcR-1R","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/comments?post=115"}],"version-history":[{"count":7,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/115\/revisions"}],"predecessor-version":[{"id":3477,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/115\/revisions\/3477"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media\/120"}],"wp:attachment":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media?parent=115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/categories?post=115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/tags?post=115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}