Cross Origin Resource Sharing (CORS) and Javascript

Question

As an example case let's take this url: http://api.duckduckgo.com/?q=computer&format=json (CORS not enabled on this server!)

1. We can access the contents from this URL from any popular browser as a normal URL, browser has no issues opening this URL nor the server returns any error.

2. A server-side language like PHP/RoR can fetch the contents from this URL without adding any additional headers or special server settings. I used following PHP code and it simply worked.

   $url='http://api.duckduckgo.com/?q=computer&format=json';
   $json = file_get_contents($url);
   echo $json;
   

3. I just started working in javascript framework, AngularJS. I used following code...

   delete $http.defaults.headers.common['X-Requested-With'];
   var url="http://api.duckduckgo.com/?q=computer&format=json";
   $http.get(url)
        .success(function(data) {
            $scope.results=data;
         })
   

   With above AngularJS code, I received following error:

   XMLHttpRequest cannot load http://api.duckduckgo.com/?q=computer&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access.

4. AngularJS uses JQuery so I tried the same in JQuery with following code:

   var url="http://api.duckduckgo.com/?q=computer&format=json";
   $.getJSON(url , function( data ) {
       console.log(data);
   });
   

   This also produced the same error as did AngularJS code.

5. Then my further research brought me to the point that it's actually not specific to JQuery and AngularJS. Both of these inherit this issue from Javascript!

---

• Here is an excellent resource with explanation of what CORS is and how to handle with it: http://enable-cors.org/index.html.
• And also W3C has it official CORS specification: http://www.w3.org/TR/cors/

---

So my question is not what CORS is. My question is

1. My understanding is that whether it is a web browser or it is PHP/RoR or it is Javascript frameworks, all make requests to a URL via the same http or https, right? Certainly, yes. Then why http has to be more secure when requests come from javascript? How does http and server know that request is coming from javascript?

2. When a web browser can open a URL and PHP/RoR (or any server-side language) can access that URL without any extra settings/headers, why can't AngularJS, JQuery (or in a single word javascript) access that URL unless the server has set Access-Control-Allow-Origin header for requesting root?

3. What's that special feature (that PHP/RoR have and) that is missing in Javascript so that it can't access the same URL in the same browsers that can open that URL without any issue from their address bars?

Just to mention that I am basically an iOS developer and recently started to learn web development, specially AngularJS. So I am curious about what's all this going on and why!

Answer 1

It's disabled from javascript for security reasons. Here's one scenario:

• Assume Facebook has a "post message on timeline" api that requires the user to be authenticated.
• You are logged into Facebook when you visit badsite.com.
• badsite.com uses javascript to call the Facebook api. Since the browser is making a valid request to Facebook, your authentication cookie is sent, and Facebook accepts the message and posts badsite's ad on your timeline.

This isn't an issue from a server, because badsite.com's server doesn't have access to your Facebook authentication cookie and it can't forge a valid request on your behalf.

Answer 2

You remember that all javascript request is handled by browser. So browser detect cross-origin request is easy.

Request from javascript has no difference with PHP/RoR, it is only rejected by browser.

Server code can accept cross-origin javascript request by header "Access-Control-Allow-Origin" because before reject javascript request, browser will send a request "OPTIONS" to server to ask header "Access-Control-Allow-Origin" on response. If value is match with current origin, browser will accept javascript request and send to server.

All browser are implement this policy Same Origin Policy

Answer 3

Please read http://en.wikipedia.org/wiki/Cross-site_scripting, you will get the reason why its prohibited for JavaScript.