Mechanism to request restricted resources on a web page from another domain
Cross-origin resource sharing
(
CORS
) is a mechanism that allows a web page to access restricted resources from a server on a domain different than the domain that served the web page.
A web page may freely embed cross-origin images, stylesheets, scripts, iframes, and videos. Certain "cross-domain" requests, notably
Ajax
requests, are forbidden by default by the same-origin security policy. CORS defines a way in which a browser and server can interact to determine whether it is safe to allow the cross-origin request.
[1]
It allows for more freedom and functionality than purely same-origin requests, but is more secure than simply allowing all cross-origin requests.
The specification for CORS is included as part of the WHATWG's Fetch Living Standard.
[2]
This specification describes how CORS is currently implemented in browsers.
[3]
An earlier specification was published as a W3C Recommendation.
[4]
Technical overview
[
edit
]
For HTTP requests made from JavaScript that can't be made by using a <form> tag pointing to another domain or containing non-safelisted headers, the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP OPTIONS request method, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method. Servers can also notify clients whether "credentials" (including Cookies and HTTP Authentication data) should be sent with requests.
[5]
Simple request example
[
edit
]
Suppose a user visits http://www.example.com and the page attempts a cross-origin request to fetch data from http://service.example.com. A CORS-compatible browser will attempt to make a cross-origin request to service.example.com as follows.
- The browser sends the GET request with an extra
Origin
HTTP header
to service.example.com containing the domain that served the parent page:
Origin: http://www.example.com
- The server at service.example.com sends one of these three responses:
A wildcard same-origin policy is appropriate when a page or API response is intended to be accessible to any code on any site. A freely available
web font
on a public hosting service like
Google Fonts
is an example.
A wildcard same-origin policy is also widely and appropriately used in the
object-capability model
, where pages have unguessable URLs and are meant to be accessible to anyone who knows the secret.
[
original research?
]
The value of "*" is special in that it does not allow requests to supply credentials, meaning that it does not allow HTTP authentication, client-side SSL certificates, or cookies to be sent in the cross-domain request.
[7]
Note that in the CORS architecture, the Access-Control-Allow-Origin header is being set by the external web service (
service.example.com
), not the original web application server (
www.example.com
). Here,
service.example.com
uses CORS to permit the browser to authorize
www.example.com
to make requests to
service.example.com
.
If a site specifies the header "Access-Control-Allow-Credentials:true", third-party sites may be able to carry out privileged actions and retrieve sensitive information.
Preflight example
[
edit
]
When performing certain types of cross-domain Ajax requests, modern browsers that support CORS will initiate an extra "preflight" request to determine whether they have permission to perform the action. Cross-origin requests are preflighted this way because they may have implications to user data.
OPTIONS /
Host: service.example.com
Origin: http://www.example.com
Access-Control-Request-Method: PUT
If service.example.com is willing to accept the action, it may respond with the following headers:
Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Methods: PUT
The browser will then make the actual request. If service.example.com does not accept cross-site requests from this origin then it will respond with error to the OPTIONS request and the browser will not make the actual request.
The HTTP headers that relate to CORS are:
Origin
Access-Control-Request-Method
Access-Control-Request-Headers
Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Expose-Headers
Access-Control-Max-Age
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Browser support
[
edit
]
CORS is supported by all browsers based on the following layout engines:
History
[
edit
]
Cross-origin support was originally proposed by Matt Oshry, Brad Porter, and Michael Bodell of
Tellme Networks
in March 2004 for inclusion in
VoiceXML
2.1
[19]
to allow safe cross-origin data requests by VoiceXML browsers. The mechanism was deemed general in nature and not specific to VoiceXML and was subsequently separated into an implementation NOTE.
[20]
The WebApps Working Group of the W3C with participation from the major browser vendors began to formalize the NOTE into a
W3C Working Draft
on track toward formal
W3C Recommendation
status.
In May 2006 the first W3C Working Draft was submitted.
[21]
In March 2009 the draft was renamed to "Cross-Origin Resource Sharing"
[22]
and in January 2014 it was accepted as a W3C Recommendation.
[23]
CORS vs JSONP
[
edit
]
CORS can be used as a modern alternative to the
JSONP
pattern. The benefits of CORS are:
- While JSONP supports only the
GET
request method, CORS also supports other types of HTTP requests.
- CORS enables a web programmer to use regular
XMLHttpRequest
, which supports better error handling than JSONP.
- While JSONP can cause
cross-site scripting (XSS)
issues when the external site is compromised, CORS allows websites to manually parse responses to increase security.
[1]
The main advantage of JSONP was its ability to work on legacy browsers which predate CORS support (
Opera Mini
and
Internet Explorer 9
and earlier). CORS is now supported by most modern web browsers.
[24]
See also
[
edit
]
References
[
edit
]
External links
[
edit
]