Engrain by ByteRush

WEB.14.01 Mid-level· 10 minCore — asked often

The same-origin policy: origins, sites and what one page may do to another

What an origin is (scheme, host, port) and how it differs from a site, what the same-origin policy blocks and what it still allows, and how to use postMessage safely with origin checks.

Comes up in: Web fundamentals, Recruiter screen

Learn#

Kiran is logged in to his bank in one tab. In another tab, a page he found on social media runs JavaScript. What stops that page from reading his balance?

The same-origin policy is the browser rule that keeps pages apart. A script can read responses and touch the DOM only for its own origin: the scheme, host and port together. https://bank.example and https://evil.example are different origins, so the evil page can send requests but cannot read the answers.

The policy blocks reading: other origins’ fetch responses (unless CORS allows it, WEB.14.02), their DOM in iframes and windows, and their storage. It allows embedding and sending: images, scripts, styles, iframes and form posts across origins.

A site is broader: the scheme plus the registrable domain, such as example.in for both shop.example.in and blog.example.in. Cookies’ SameSite works on sites (WEB.05.01); the same-origin policy works on origins.

What the evil tab can and cannot doStep 1 of 4

State

  • tab 1: https://bank.example (logged in)
  • tab 2: https://evil.example

Network

    empty

    Console

      empty

      You are logged in to bank.example in one tab. In another tab you open evil.example.

      Read the steps as text
      1. You are logged in to bank.example in one tab. In another tab you open evil.example.
      2. evil.example runs fetch('https://bank.example/api/balance', { credentials: 'include' }). The request is sent, with cookies if SameSite allows.
      3. The response comes back, but the origins differ, and the bank sent no CORS permission. The browser will not let evil.example read it.
      4. Embedding still works: evil.example can show bank.example's images or post a form to it, but it cannot read the results.

      Predict#

      Predict first

      Are https://shop.example.in and https://blog.example.in same-origin? Same-site?

      Interview angle#

      Say it like this — about 30 seconds

      “The same-origin policy lets a page read data only from its own origin, which is scheme, host and port. Other origins can still be embedded and sent requests, such as images, scripts and form posts, but their responses and DOM cannot be read without permission, for example through CORS. A site is broader: scheme plus registrable domain, so subdomains are same-site but cross-origin. For safe cross-origin messaging I use postMessage and always check event.origin.”

      Stays on your device. Nothing is uploaded.
      Follow-up What is the same-origin policy?
      The browser rule that a script may read responses, DOM and storage only from its own origin (scheme, host, port).
      Follow-up What is the difference between same-origin and same-site?
      Same-origin needs the same scheme, host and port. Same-site needs the same scheme and registrable domain, so subdomains count.
      Follow-up What must you check in a message event?
      event.origin, against an exact allowed origin, and the shape of event.data.

      Practice#

      Guided

      Write origin comparison with default ports, and a message handler that only trusts one origin.

      Done when

      • origin always includes the port, using 443 or 80 by default.
      • sameOrigin treats explicit default ports as the same.
      • safeListener ignores messages from any other origin, including look-alikes.
      Your solution
      Ctrl/⌘ + Enter

      Remember#

      Try to answer each card before you open it. Then add them to your reviews.

      What makes up an origin?

      Scheme, host and port.

      What makes up a site?

      Scheme plus registrable domain (eTLD+1).

      Does the same-origin policy stop the request being sent?

      No. It stops the page reading the response.

      What must a postMessage listener check?

      event.origin, exactly, before using event.data.

      Go deeper

      Four layers. Stop at the one your interview needs; each ends with a quick check.

      The core ideaEvery round

      Any difference in scheme, host or port makes another origin: http vs https, www.a.in vs a.in, :3000 vs :8080 .

      Check yourself: Is http://a.in the same origin as https://a.in?

      No, the schemes differ.

      How it works underneathSenior rounds

      Embedding is allowed but reading is not: a cross-origin image can be shown, but drawing it on a canvas taints the canvas, so getImageData throws, unless the image was loaded with CORS.

      Check yourself: Can a page read pixels from a cross-origin image drawn on a canvas?

      No. The canvas becomes tainted unless the image was loaded with CORS.

      Edge cases and trapsWhere people slip

      postMessage is the safe way for windows and iframes on different origins to talk. Compare event.origin with an exact string; includes or startsWith checks let https://bank.example.evil.com through .
      When sending, pass a target origin, never "*" for private data.

      Check yourself: Why is event.origin.includes('bank.example') a bad check?

      bank.example.evil.com passes it.

      In productionStaff-level answers

      Serve user uploads from a separate registrable domain, such as usercontent.example, so an uploaded HTML or SVG file cannot run as your origin. Big sites do this for the same reason.

      Check yourself: Why put user-uploaded files on a separate domain?

      So uploaded HTML or SVG runs on another origin and cannot touch the app's cookies or DOM.

      Finished the five steps? Mark it, and its cards join your reviews.

      Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.

      Interview questions this answers

      • What is the same-origin policy?
      • What is the difference between same-origin and same-site?