Cross-origin Resource Sharing

Traditional Ajax requests can only obtain resources under the same domain name, but HTML5 breaks this restriction and allows ajax to initiate cross-origin requests. The browser can initiate cross-origin requests. For example, you can chain images or scripts from an external domain. However, JavaScript scripts cannot obtain the content of these resources. They can only be executed or rendered by browsers.

In flash and Silverlight, the server needs to create a crossdomain. xml file to allow cross-origin requests. If this file declares that the http://your.site allows requests from the http://my.site, requests from the http://my.site can access all files in the http://your.site. This is a control mode at the site level. You can either allow access to a site in an external domain or reject the access.

Cor is different. It is a page-level control mode. Each page needs to return an HTTP header named 'access-control-allow-origin' to allow access from external sites. You can only expose limited resources and limited access to external domain sites. In cor mode, the role of access control can be put in the hands of page developers, rather than the server administrator. Of course, page developers need to write special processingCodeTo allow access by external domains.

Another major difference is that the crossdomain. xml file of a website was first obtained and analyzed by the browser. If a website in an external domain is not allowed to be accessed, the browser will not send a cross-origin request at all.

Cor, on the contrary, JavaScript first sends a cross-origin request and then checks the response's 'access-control-allow-origin' header. If this header allows access from this external domain, JavaScript can read this response; otherwise, access is prohibited. If the request is not a simple Cor, a pre-check request is sent to the external domain server. If the response header allows access, a cross-domain request is sent; otherwise, the request is not allowed.

The implementation standard of cor is the CORS protocol.

For browsers, Cor requests are initiated by JavaScript, and there are two types of Cor requests:

1. Simple cor request, which can directly initiate a request to external domain resources. It must only contain simple methods and headers. For specific definitions, see [2] 6.1.

2. If cor contains complex methods and headers, it needs to issue a preflight request, which first sends an options method to the resource server and a request containing the "Origin" header. This reply can control the CoR request method, HTTP header, verification, and other information. A real external domain request is initiated only after the request is permitted.

The following is a simple cor request:

<Script language = "JavaScript" type = "text/JavaScript">

VaR client = new XMLHttpRequest ();

Client. Open ("get", "http://bar.org/B ")

Client. onreadystatechange = function () {/* Do something */}

Client. Send ()

</SCRIPT>

Assume that the domain of the request's page is http://foo.org ". If the reply packet from "http://bar.org/ B ”" contains the following content:

Access-control-allow-origin: http://foo.org

Indicates that it allows cross-origin requests from the http://foo.org.

The following JavaScript will send a pre-check request and a real request:

<Script language = "JavaScript" type = "text/JavaScript">

VaR client = new XMLHttpRequest ();

Client. Open ("get", "http://bar.org/B ")

Client. setRequestHeader ('content-type', 'text/html ')

Client. onreadystatechange = function () {/* Do something */}

Client. Send ()

</SCRIPT>

Because "Content-Type: text/html" is not a simple header, it first sends an options HTTP request to "http://bar.org/B. The reply may contain the following headers:

Access-control-allow-origin: http://foo.org

Access-control-max-age: 3628800

Access-control-allow-Methods: Get, put, delete

Access-control-allow-headers: Content-Type

"Access-control-allow-origin" indicates that it allows the "http://foo.org" to initiate a cross-origin request

"Access-control-max-Age" indicates that the result is cached within 3628800 seconds without sending a pre-check request.

"Access-control-allow-methods" indicates that it allows external domain requests of get, put, and delete

"Access-control-allow-headers" indicates that it allows cross-origin requests to contain the Content-Type header.

If the pre-check request passes, JavaScript then initiates a real cor request, which is similar to a simple cor request.

Implementation of CORS Protocol

Currently, HTML5 standards are in full swing in the development and development. As part of HTML5, CORS is supported in most modern browsers. browsers that support (partially support) The CORS protocol include IE8 +, firefox5 +, chrome12 +, safari4 +

Server implementation

The library thinktecture. identitymodel has already provided support for our webapi and MVC projects. For details, refer to [6].

 

References:

[1] http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity

[2] http://www.w3.org/TR/cors/

[3] Cross-origin_resource_sharing

[4] cross-origin resource sharing for Ajax cross-origin requests

[5] http://restfulobjects.codeplex.com/wikipage? Title = cross % 20 origin % 20 Resource % 20 Sharing & referringtitle = documentation

[6] CORS support in webapi, MVC and IIS with thinktecture. identitymodel