SOP, CORS, Pre-flight

Same-origin policy (SOP)

  • The same-origin policy restricts scripts on one origin from accessing data from another origin.

  • An origin consists of a URI scheme, domain and port number.

  • The SOP prevents a malicious website from running JS in a browser to read data from a third-party website. (There are various exceptions)

  • The SOP allows embedding of images via the <img> <video> <script>.

    • However, while these external resources can be loaded by the page, any JavaScript on the page won't be able to read the contents of these resources.

Cross-origin resource sharing

The cross-origin resource sharing specification provides controlled relaxation of the same-origin policy. The CORS specification identifies a collection of protocol headers

  • Origin header added by the browser.

    • Origin : https://normal-website.com

  • Access-Control-Allow-Origin returned by a server when a website requests a cross-domain resource.

    • Access-Control-Allow-Origin: https://normal-website.com

This means that the browser will allow code running on normal-website.com to access the response because the origins match.

Note: Access-Control-Allow-Origin is returned only if the whitelisted values or * or null matched the Origin.

Access-Control-Allow-Origin: *

The use of the wildcard * is restricted in the specification as you cannot combine the wildcard with the cross-origin transfer of credentials (authentication, cookies or client-side certificates). This following response is not permitted

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

Access-Control-Allow-Origin: null

Specifies that only origins with a null origin are allowed to access the resource. Browsers might send the value null in the Origin header in various unusual situations:

  • Cross-origin redirects.

  • Requests from serialized data.

  • Request using the file protocol.

  • Sandboxed cross-origin requests.

Pre-flight checks

Under certain circumstances, when a cross-domain request includes a non-standard HTTP method or headers, the cross-origin request is preceded by a request using the OPTIONS method.

For example, this is a pre-flight request that is seeking to use the PUT method together with a custom request header called Special-Request-Header

OPTIONS /data HTTP/1.1
Host: <some website>
...
Origin: https://normal-website.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Special-Request-Header
HTTP/1.1 204 No Content
...
Access-Control-Allow-Origin: https://normal-website.com
Access-Control-Allow-Methods: PUT, POST, OPTIONS
Access-Control-Allow-Headers: Special-Request-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 240

  • This response sets out the allowed methods (PUT, POST and OPTIONS) and permitted request headers (Special-Request-Header). In this particular case the cross-domain server also allows the sending of credentials (authentication, cookies or client-side certificates), and the Access-Control-Max-Age header defines a maximum timeframe for caching the pre-flight response for reuse

  • More info about preflight: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#preflighted_requests

Last updated