Same Origin Policy & CORS— From the beginning
Let's consider the following scenario, Some users logged in to their bank account, and then the same user visits another website where a malicious code is trying to cheat you by faking transactions to your bank website.
Let’s focus on Step 4&5: A malicious website is reading cookies from some other website. This is bad as once a malicious website has this data, it cannot differentiate between a good user and an attacker.
To fix this issue, the browsers implement the Same-Origin Policy.(step 7)
Same-Origin Policy in simple words is a policy that stops one website from reading or writing data to another, In technical words, it will prevent scripts from one origin from accessing content on another origin.
So what does Origin meaning?
Origin is defined as a combination of — Scheme, Domain, and Port.
Example 1:
Origin 1: https://Google.com
Origin 2: https://Googlee.com Example 2:
Origin 1: https://Imperva.comOrigin 2: https://Imperva.com
Example of what an origin consists of :
- URI Scheme / Protocol (e.g http, https, ftp .. etc)
- Domain (e.g google.com, imperva.com)
- Port (80, 443)
So in the first example, it is not the same-origin(because there is a difference in the domain name) but in the second example origin 1, is the same origin as origin 2, so in example 2 we do have the same-origin.
As result without the same-origin policy, if you visited a malicious website, the attacker would be able to get private financial data from your account bank, read your emails from Gmail, private messages from Facebook, etc.
Cross-Origin Resource Sharing
So Same-Origin Policy is a good feature in the browsers to add a secure layer, but, there are situations where you need to have api.your-website.com interacting with your-website.com. In these instances, CORS needs to be enabled to share the resource across your origin.
