What is the Same-Origin Policy?
Learn what the Same-Origin Policy is, how origins are defined, and how CORS relaxes it — with examples and interview questions.
Expected Interview Answer
The Same-Origin Policy (SOP) is a browser security rule that restricts scripts on one origin (scheme, host, and port) from reading data from a different origin, preventing a malicious page from silently reading your data on another site.
An origin is defined by the combination of protocol, domain, and port; if any one differs, the browser treats it as a different origin and blocks JavaScript from one origin from reading responses, cookies, or the DOM of another. SOP still allows some cross-origin actions, like sending requests or embedding images and scripts, but it blocks the calling page from reading the response content unless the target explicitly opts in. That opt-in mechanism is CORS (Cross-Origin Resource Sharing), where a server adds headers like Access-Control-Allow-Origin to permit specific origins to read its responses. Without SOP, a malicious site could load your bank's page in the background and read your account data using your logged-in session, since cookies are sent automatically.
- Prevents malicious sites from reading data from other origins
- Protects logged-in session data from cross-site scripts
- Forms the security baseline that CORS is built on top of
- Applies uniformly across cookies, DOM access, and fetch/XHR responses
AI Mentor Explanation
The Same-Origin Policy is like a rule that a scorer from Team A's dressing room cannot walk into Team B's dressing room and read their private notes, even though both are in the same stadium. They can watch the public match from the stands, but reading the private sheet requires Team B explicitly handing it over. That default-blocked, explicit-permission-required boundary between rooms is exactly what SOP enforces between website origins.
Step-by-Step Explanation
Step 1
Browser compares origins
For each cross-origin request, the browser checks if scheme, host, and port match the requesting page.
Step 2
Same origin: full access
If they match, scripts can freely read DOM, cookies, and response data.
Step 3
Different origin: response blocked
The request may be sent, but JavaScript is blocked from reading the response unless CORS headers permit it.
Step 4
Server opts in via CORS
The target server adds Access-Control-Allow-Origin headers to explicitly permit specific origins to read responses.
What Interviewer Expects
- Correct definition of "origin" (scheme + host + port)
- Understanding that requests can be sent but responses are blocked from reading
- Knowledge that CORS is the explicit opt-in mechanism on top of SOP
- Awareness of why SOP protects cookie-based sessions from theft
Common Mistakes
- Thinking SOP blocks all cross-origin requests outright (it blocks reading the response, not always the request)
- Confusing SOP with CORS — CORS is the relaxation mechanism, not the restriction itself
- Forgetting that port differences alone make two URLs different origins
- Believing SOP protects against server-side attacks like SQL injection (it is a browser-side protection)
Best Answer (HR Friendly)
“The Same-Origin Policy is a browser rule that stops a website from reading data from a different website behind the scenes, even if both are open in your browser. It is a key security feature that keeps things like your logged-in bank session private from other tabs or malicious pages. Sites that genuinely want to share data across origins use a mechanism called CORS to explicitly allow it.”
Code Example
// Page served from https://app.example.com
fetch("https://api.other-domain.com/data")
.then((res) => res.json())
.catch((err) => console.error("Blocked by CORS:", err))
// api.other-domain.com must respond with a header like:
// Access-Control-Allow-Origin: https://app.example.com
// for the browser to let the calling script read the response.Follow-up Questions
- How does CORS relate to and relax the Same-Origin Policy?
- What counts as a "different origin" — give examples with scheme, host, and port?
- Why does SOP matter for cookie-based authentication?
- What is a preflight OPTIONS request and when is it triggered?
MCQ Practice
1. What three components define a web origin?
An origin is the combination of protocol (scheme), domain (host), and port.
2. What does the Same-Origin Policy primarily prevent?
SOP blocks scripts from reading cross-origin response data, not necessarily from sending the request or loading embeddable resources.
3. How does a server explicitly allow another origin to read its responses?
CORS headers are the server-side opt-in mechanism that relaxes the Same-Origin Policy for specified origins.
Flash Cards
What defines an "origin" in the Same-Origin Policy? — The combination of scheme (protocol), host (domain), and port.
What does SOP block by default? — Scripts on one origin from reading response data or DOM from a different origin.
What relaxes SOP for specific cross-origin cases? — CORS — the server explicitly allows named origins via response headers.
Why is SOP important for cookies? — It stops malicious pages from reading another site's logged-in session data.