The Same-Origin Policy (SOP) is a security measure implemented by web browsers to restrict web pages from making requests to a different domain than the one that served the original web page. This policy helps to prevent malicious websites from making unauthorized requests to another site on behalf of the user.

So in summary SOP Is a rule that is enforced by the browsers to control access to data between web apps

The policy is based on the concept of the "same origin," which is defined by the combination of the protocol (http or https), domain, and port of a URL.

Definition of an origin

"origin" refers to the combination of three components that uniquely identifies a web page's source:

  1. Scheme (Protocol): This can be either "http" or "https."
  2. Host (Domain): This is the domain name of the web page's server.
  3. Port: This is the port number on the server. It is optional, and if not specified, it is assumed to be the default port (80 for HTTP, 443 for HTTPS).

The following table gives examples of origin comparisons with the URL http://store.company.com/dir/page.html:

URL Outcome Reason
http://store.company.com/dir2/other.html Same origin Only the path differs
http://store.company.com/dir/inner/another.html Same origin Only the path differs
https://store.company.com/page.html Failure Different protocol
http://store.company.com:81/dir/page.html Failure Different port (http:// is port 80 by default)
http://news.company.com/dir/page.html Failure Different host

Why we need SOP ?

The Same-Origin Policy (SOP) is a critical security measure on the web that helps protect users from various types of attacks by preventing unauthorized access to sensitive data and resources. Here are some key reasons why the Same-Origin Policy is necessary:

  1. Preventing Cross-Site Scripting (XSS): XSS is an attack where an attacker injects malicious scripts into a web page that is viewed by other users. These scripts can then perform actions on behalf of the user without their consent. The SOP prevents such attacks by restricting scripts to accessing resources only from the same origin.
  2. Protecting Sensitive Data: Web pages often load sensitive data, such as authentication tokens, session cookies, and personal information. The SOP ensures that scripts running on one page cannot access this sensitive data from another origin, helping to prevent unauthorized access.
  3. Mitigating Cross-Site Request Forgery (CSRF): CSRF attacks involve tricking a user's browser into making an unintended and potentially malicious request to a different site where the user is authenticated. The SOP prevents such attacks by blocking cross-origin requests initiated by scripts.
  4. Preventing Data Theft: Without the SOP, a malicious website could make cross-origin requests to a user's other open tabs or windows, potentially stealing sensitive data from those pages.
  5. Isolating Web Applications: The SOP provides a level of isolation between different web applications and their components. This helps ensure that the actions of one application do not interfere with or compromise the security of another application running in a different origin.
  6. Enhancing User Privacy: By enforcing restrictions on cross-origin requests, the SOP helps protect user privacy by preventing unauthorized tracking and profiling of users across different websites.

How is the SOP implemented?

The same-origin policy generally controls the access that JavaScript code has to content that is loaded cross-domain. Cross-origin loading of page resources is generally permitted. For example, the SOP allows embedding of images via the <img> tag, media via the <video> tag and JavaScript includes with the <script> tag. 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.