What is CORS and how does it work?

🔎 What is CORS?

CORS (Cross-Origin Resource Sharing) is a mechanism that allows a web server to explicitly permit requests from one origin (domain, scheme, port) to another.

It’s essentially a secure relaxation of the Same-Origin Policy (SOP), giving developers a way to allow controlled cross-origin requests.

🏛 Same-Origin Policy (SOP) – The Foundation

The Same-Origin Policy is a critical browser security feature.
It restricts how scripts loaded from one origin can interact with resources from another origin.

• Definition of origin: scheme + domain + port
• Example:
  text Copy

  http://normal-website.com/example/example.html

  Origin = http, normal-website.com, 80

SOP Rules Example

⚠️ Note: Internet Explorer historically ignored the port number when applying SOP.

❓ Why is the Same-Origin Policy Necessary?

• Prevents malicious sites from reading sensitive data in authenticated sessions.
• Without SOP, visiting a malicious site could expose:
  • Gmail messages
  • Facebook private chats
  • Banking account details

⚙️ How is SOP Implemented?

• Controls JavaScript access to cross-domain content.
• Loading of resources cross-origin (images, scripts, iframes) is allowed, but reading their content is blocked.

SOP Exceptions

• Some objects are writable but not readable across domains (e.g., location.href).
• Some objects are readable but not writable (e.g., window.length).
• Functions like close, blur, focus, or postMessage can be invoked cross-domain.

Legacy Relaxation with document.domain

• Example: marketing.example.com and example.com can both set document.domain = "example.com" to relax SOP between them.
• Modern browsers restrict this so you can’t set document.domain to a top-level domain like .com.

🌍 Where Does CORS Fit In?

CORS allows servers to selectively relax SOP by adding headers to responses, such as:

Access-Control-Allow-Origin: https://trusted-site.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Credentials: true

This enables controlled sharing of resources between trusted origins, without removing the protection SOP provides.

✅ Key Takeaways

• SOP is the foundation of browser security.
• CORS is a controlled mechanism to safely bypass SOP when necessary.
• Correctly configuring CORS is crucial; misconfigurations often lead to serious vulnerabilities.