Print

The Same-Origin Policy (SOP)

Web browsers have built-in controls to prevent malicious web sites from stealing users' personal data. Through the Same-Origin Policy (SOP) browsers also restrict the ways that web applications can communicate with (1) web servers and with (2) other windows in the browser.

What Is SOP?

  • Assume you are logged into Facebook and in another browser window you are also visiting a malicious website. Without the SOP, JavaScript on the malicious website could read private messages, post status updates, analyze the HTML DOM-tree in the FaceBook window.
  • The SOP restricts how a document or script loaded from one origin can interact with a resource from another origin.The SOP states that when a user is viewing a web page in his browser, script running on that web page should only be able to read from or write to the content of another web page if both pages have the same origin. 
  • The origin (SOP rules) is defined as a combination of protocol://domain:port:
    • the page's application layer protocol (HTTP or HTTPS),
    • its TCP port (usually 80 for HTTP or 443 for HTTPS), and
    • its domain name.
  • Using the SOP rules, checks against the following URL: "http://www.example.com/dir/page.html".

    Compared URL Pass/Fail Reason
    http://www.example.com/dir/page2.html

    http://www.example.com/dir2/other.html

    http://www.example.com:81/dir/other.html

    https://www.example.com/dir/other.html

    http://en.example.com/dir/other.html

    http://example.com/dir/other.html

    http://v2.www.example.com/dir/other.html

    (source: Wikipedia)

  • An illustration: 
    • A script hosted on A.com is embedded in a web page hosted on B.com using the script element's "src" attribute in the <link> tag. 
    • The origin of the script is B.com, because the origin of the script is the page's domain in which it's embedded. 
    • The script embedded in B.com has full access to the content and properties of any page that's hosted on B.com regardless of whether it's opened in new window or iframe. 
    • The SOP prohibits the B.com page with the embedded script from openning a new window and loading a document from A.com or any other domain. Demo 1

Applications of SOP

  • The SOP applies to JavaScript in web pages to provide the foundation of most browser security principles. Attacks such as cross-site scripting (XSS) and cross-site request forgery (CSRF) intend to bypass the inherent defense of the SOP.
  • The SOP also applies to XMLHttpRequest (AJAX) and robots.txt.
  • The SOP only applies to browsers running client-side scripting code, not server-side script. The difference is that when a server-side code calls out to a website, there is no cookies involved. 

Exceptions to SOP 

The opposite of SOP is Cross-Origin Resource Sharing (CORS) where a browser is allowed to bypass ("relax") the SOP in certain controlled ways to access resources from other websites.
  • HTML elements: 
    • JavaScript with <script src="..."></script>
    • Div with <div style="">
    • CSS with <link rel="stylesheet" href="...">
    • Images with <img src="">
    • Media files with <video src=""> and <audio src="">
    • Plug-ins with <object src="">, <embed src=""> and <applet src="">.
    • Fonts with @font-face.
    • <frame> and <iframe>
  • HTML frame element: The frame elements such as <frame>, <frameset>, and <iframe> are allowed to open views to other website pages inside the current web page. However, although it is not allowed to read from another origin, but some properties are writable. The most notable one is location.   Demo 3
    <iframe src="http://www.otherwebsite.com/webpage.htm" width="300px" height="300px"> <iframe>
  • JavaScript Object Notation (JSON) : Many web services or AJAX applications (cross-origin data fetching) use JSON as the data format instead of XML a as strings, which makes the incoming data might tampered. 
    "OrderNo": "12345",
    "OrderDate": "12/12/2012",
    "Subtotal": "155.98",
    "Tax": "13.42",
  • AJAX applications: XMLHttpRequest also allows client-side script code to make requests to other web servers to fetch new data. In AJAX, you can selectively disable the SOP by adding an Access-Control-Allow-Origin HTTP header to your server's responses through an alternative called cross-origin resource sharing (CORS). (note: Apple's iOS devices don't support Flash or Silverlight, so iOS with rich interface will need to go with Ajax.)
    • Origin: http://www.stackoverflow.com
    Access-Control-Allow-Origin: http://www.stackoverflow.com
  • HTML5's postMessage method: HTML5 lets a script in one document pass messages to a script in another document, no matter the origin of the two documents, through the postMessage method.  

Resources