Same-origin policy

Same-origin policy (SOP) — security policy governing such as Javascript downloaded from one origin can integrate with resources from another origin.

Description

User of web browser uses his Gmail mail in one tab of web browser, and opens another website attacker.com in the second tab. If the Same-origin policy did not exist, than then website attacker.com could send Ajax request to read mail to Gmail and receive the contents of the letters from the response, since the user's Cookie from Gmail is sent along with the request.

Same-origin policy restricts Javascript access to one downloaded from one origin to:

  • Reading Ajax responses via XMLHttpRequest and fetch from another origin
  • Reading and writing the Document Object Model (DOM) of another origin
  • Reading and writing stored data (Cookie, session & local storage) of another origin

Origin

Origin is the triple

  • protocol
  • domain
  • port
Origin = schema://host:port

The same origins are origins which coincide protocol, domain and port.

An example for determination of identical origins with http://sub.domain.com/path/page.html
URL Result Reason
http://sub.domain.com/path/other.html Same origins
http://sub.domain.com/dir/dir2/page.htm Same origins
https://sub.domain.com/secure.html Different origins Different protocols
http://sub.domain.com:81/dir/etc.html Different origins Different ports
http://sub2.domain.com/dir/other.html Different origins Different domains

Reading Ajax responses via XMLHttpRequest and fetch

The user entered Facebook on one tab of the web browser, and opened another site on the second tab attacker.com. This website is trying to steal personal correspondence from Facebook by making the following Ajax request for reading private messages

$.ajax({
    url: "https://facebook.com/loadMessages",
    type: "GET",
    xhrFields: { withCredentials: true }
}, function( data ) {
    console.log(data);
});

If you copy this code into the web browser console, the following error occurs XMLHttpRequest cannot load https://facebook.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://attacker.com' is therefore not allowed access.

This is Same-origin policy in action. The browser does not allow to read the request response to another origin. But the request was successfully sent to Facebook from the user's Cookie, and Facebook sent back private messages in response.

Reading and writing Document Object Model

The web browser user is authorized on the Wikipedia site and switches to another website attacker.com. The attacker builds on his site attacker.com iframe on Wikipedia and tries to read the contents of the DOM from the iframe.

<iframe src="https://www.wikipedia.org" id="victimIframe"></iframe>
<script>
$(document).ready(function(){
    var iframeContent = document.getElementById("victimIframe").contentDocument;
    console.log(iframeContent);
});
</script>

This code will cause an error Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://attacker.com" from accessing a cross-origin frame.

Since web browser does not allow DOM reading and writing to an origin other than origin iframe (windows).

Reading and writing stored data from another origin

Each origin gets its own instance of localStorage and IndexedDB. Javascript from one origin can not read or write to the repository of another origin. Cookies use a different origin definition. A domain can set a cookie for its domain and any subdomain, the protocol and port do not matter.

Exceptions

Same-origin policy does not forbid you to connect from other origins for:

  • Javascript across <script src="http://another-origin.com"></script>. Connected Javascript will have a origin equal to an origin of the page that connects it. It means that any library connected through the <script> tag gains access to the resources of the current origin, including the content of the page and Cookie.
  • CSS across <link rel="stylesheet" href="http://another-origin.com">.
  • The content of the tags <img>, <video>, <audio>, <object>, <embed>, <applet> can also be from another origin.

  Bypass methods →