The Internet’s Bouncer: A Clear Guide to SOP and CORS

If you’ve ever seen a red error message in your browser console shouting about "Cross-Origin Request Blocked," you’ve met the web’s most important security duo: SOP and CORS.

Here is everything you need to know to understand how they work together to keep the web safe.

---

What is Same-Origin Policy (SOP)?

The Same-Origin Policy (SOP) is a fundamental security feature implemented by web browsers. It’s like the internet’s bouncer, preventing web pages from making requests to different origins unless they match.

Without SOP, malicious websites could easily access sensitive data on other tabs you’ve got open—imagine your bank account details hanging out for all to see!

What Defines an "Origin"?

If any of these three components differ between two URLs, they are considered to have different origins:

• Protocol (e.g., http vs. https)
• Domain (e.g., example.com vs. api.example.com)
• Port (e.g., :80 vs. :443)

Example:

https://example.com:443/page1  ✅ Same origin as https://example.com:443/page2
http://example.com/page1       ❌ Different origin from https://example.com/page2 (different protocol)

---

How SOP Restricts Interactions

To protect your data, the browser restricts what scripts can do across origins:

• Cookies: You can only access cookies for your own origin.
• Storage: LocalStorage and SessionStorage are origin-specific. No peeking at someone else’s data!
• DOM Access: A script from Origin A cannot access the DOM of a page from Origin B.
• AJAX/Fetch Requests: Requests are blocked by default unless explicitly allowed.

---

What Is CORS (Cross-Origin Resource Sharing)?

CORS is a security feature that allows or restricts resources on a web server to be requested from a different domain. It’s like giving permission to certain websites to knock on your server’s door and grab some data.

Without CORS, web pages are locked in their own origin-sandbox, unable to communicate with external APIs, CDNs, or other resources.

Why Is CORS Important?

1. Enforces SOP: It makes the strictness of SOP flexible for legitimate communication.
2. Controlled Sharing: Servers can whitelist specific domains to keep data safe.
3. Prevents Attacks: It helps protect against attacks like Cross-Site Request Forgery (CSRF) and Cross-Site Scripting (XSS).

---

The CORS Workflow

1. Simple Requests

These include GET, POST, and HEAD requests that don’t require special handling.

• The browser sends the request with an Origin header.
• If the server returns an Access-Control-Allow-Origin header that matches, all is good.

2. Preflight Requests

These are like asking the server, "Hey, is it cool if I send a DELETE request?" before making the actual request. This is done via an OPTIONS call.

---

CORS Headers You Should Know

• Access-Control-Allow-Origin: Specifies which origins are allowed access.
• Access-Control-Allow-Methods: Defines permitted HTTP methods (GET, POST, etc.).
• Access-Control-Allow-Headers: Specifies which custom headers can be used.
• Access-Control-Allow-Credentials: Allows cookies or authorization headers to be included.

---

The Wildcard Policy

A wildcard * is appropriate when an API response is intended to be accessible to any code on any site, such as Google Fonts.

Note: The value of * is special because it does not allow requests to supply credentials. This means it won't allow HTTP authentication, SSL certificates, or cookies to be sent in the cross-domain request.

---

Summary

• SOP is the "Default Deny" policy that keeps your browser secure.
• CORS is the "Explicit Allow" protocol that lets modern web apps talk to each other.

Happy coding!