Geek Answers Handbook

Cross Resource Search (CORS) and Javascript

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

  • We can access the contents of this URL from any popular browser as a regular URL, the browser has no problems opening this URL, and the server does not return any errors.

  • A server-side language such as PHP / RoR can extract content from this URL without adding additional headers or special server settings. I used the following PHP code and it just worked.

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

  • I just started working in the javascript framework, AngularJS. I used the 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 the AngularJS code above, I got the following error:

    XMLHttpRequest cannot load http://api.duckduckgo.com/?q=computer&format=json. The requested resource does not have an Access-Control-Allow-Origin header. Therefore, the source address http: // localhost: 63342 'is not allowed.

  • AngularJS uses jQuery, so I tried the same in jQuery with the following code:

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

    This also caused the same error as AngularJS code.

  • Then my further research led me to the point that this is not really typical of jQuery and AngularJS. Both of these inherit this problem from Javascript!

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

  • My understanding is whether it is a web browser or it is PHP / RoR or it is Javascript frameworks, everyone is requesting a URL through the same http or https, right? Of course yes. Then why should http be more secure when requests come from javascript? How do http and server know that the request comes from javascript?

  • When a web browser can open the URL, and PHP / RoR (or any server language) can access this URL without any additional settings / headers, why can't AngularJS, JQuery (or in one word javascript), unless the server set the Access-Control-Allow-Origin header for the root request?

  • What is this feature (that PHP / RoR is and is) missing in Javascript so that it cannot access the same URL in the same browsers that can open this URL without any problems from its address bars?

Just want to mention that I am mainly an iOS developer and have recently started to learn web development, especially AngularJS. Therefore, I wonder what all this is happening and why!

+6
source share
3 answers

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

  • Suppose Facebook has a "post message on timeline" api message that requires user authentication.
  • You are logged in to Facebook when you visited badsite.com.
  • badsite.com uses javascript to call the Facebook api. As the browser makes a valid request to Facebook, your authentication cookie is sent, and Facebook receives the message and posts an error message on your timeline.

This is not a server issue because the badsite.com server does not have access to your Facebook authentication cookie and cannot fake a valid request on your behalf.

+5
source

You remember that all javascript requests are handled by the browser. Thus, the browser detects a cross-origin request.

The request from javascript has nothing to do with PHP / RoR, it is rejected by the browser.

Server code can accept a cross-initial javascript request with the "Access-Control-Allow-Origin" header, because before rejecting the javascript request, the browser will send the "OPTIONS" request to the server to ask the "Access-Control-Allow-Origin" header for a response. If the value matches the current start, the browser will accept a javascript request and send it to the server.

All browsers implement this policy. Same origin policy.

+1
source

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

+1
source

More articles:


All Articles