Imagine you’re at Yaba Tech library in Lagos. You borrow a locker to keep your books safe. The rule says:

  • Only your locker key can open your locker.
  • You cannot use your key to open someone else’s locker.

This rule keeps people’s belongings separate and secure.

On the web, browsers use a similar rule called the Same-Origin Policy (SOP). It’s one of the most important security features in the internet world.

🔑 What is the Same-Origin Policy (SOP)?

  • The Same-Origin Policy is a security rule in browsers.
  • It says: A web page can only access data from the same origin (domain, protocol, and port) that it was loaded from.

👉 In simple terms:

  • A page from https://mysite.com cannot freely access data from https://othersite.com.

🏗 What is an “Origin”?

An origin is defined by 3 parts:

  1. Protocol → http:// or https://
  2. Domain (host) → e.g., example.com
  3. Port → e.g., :80, :443

So:

  • https://example.com:443 → one origin
  • http://example.com:80 → different origin (because protocol differs)
  • https://sub.example.com:443 → different origin (because domain differs)

⚡ Why Do We Need SOP?

Think of SOP as a security wall. Without it:

  • If you’re logged into your bank at bank.com, a malicious page at evil.com could steal your bank balance directly.
  • SOP prevents evil.com from reaching into bank.com’s locker.

đź”’ What SOP Restricts

By default, one origin cannot:

  • Read cookies or localStorage from another origin.
  • Make AJAX requests and read responses from another origin.
  • Access the DOM of a page from another origin (e.g., an <iframe>).

🛠️ When Cross-Origin Communication is Needed

But sometimes, you actually need to share data across origins. Example:

  • Your site shop.com wants to use an API from payments.com.
  • Or your web app loads fonts, videos, or images from a CDN (cdn.com).

That’s where Cross-Origin Communication comes in.

🔑 Techniques for Cross-Origin Communication

1. CORS (Cross-Origin Resource Sharing)

  • The server at api.example.com can set special headers like:

    Access-Control-Allow-Origin: https://mysite.com
  • This tells the browser: “It’s okay, let mysite.com access me.”
  • Without CORS, browsers block the request.

2. JSONP (Old Way)

  • Before CORS, developers used JSONP: loading cross-domain data by injecting a <script> tag.

  • Example:

    <script src="https://api.example.com/data?callback=myFunction"></script>
  • This was clever but insecure, and today it’s mostly replaced by CORS.

3. PostMessage (for iframes & windows)

  • If your site uses an <iframe> or a popup from another origin, you can communicate safely with:

    otherWindow.postMessage("Hello", "https://trusted.com");

  • And the receiving window listens with:

    window.addEventListener("message", event => {
  console.log("Got message:", event.data);
});

  • This way, you can exchange messages between different origins securely.

4. Proxy Servers

  • Your site can send requests to its own server, and the server forwards them to the external API.

  • Example:

    • Browser → mysite.com/api → Server → othersite.com
  • This way, the browser only talks to the same origin, and the server handles cross-origin logic.

⚠️ Security Considerations

  • CORS must be configured carefully — never allow Access-Control-Allow-Origin: * for sensitive data.
  • PostMessage should always check event.origin to ensure the message comes from a trusted site.
  • JSONP is dangerous and rarely recommended today.
  • SOP itself is not a weakness — it’s a protection. The challenge is: developers must use the right tools when cross-origin communication is actually needed.

âś… Summary in Simple Words

  • Same-Origin Policy (SOP): A rule that stops one site from messing with another’s data.
  • An origin = protocol + domain + port.
  • By default, SOP blocks cross-origin access for safety.
  • When cross-origin communication is needed, developers use CORS, PostMessage, or Proxy servers.
  • Security is all about balance: protect users but allow safe sharing when required.

📝 Review – Fill in the Gaps

  1. SOP stands for Same ______ Policy.
  2. An origin is defined by protocol, domain, and ______.
  3. By default, a page from one origin cannot read another site’s ______ or localStorage.
  4. SOP prevents malicious sites from stealing your data, like your ______ balance.
  5. To allow safe cross-origin requests, servers use ______ headers.
  6. The modern standard for cross-origin communication is ______ (not JSONP).
  7. JSONP worked by adding a <script> tag but is considered ______ today.
  8. To send messages between windows or iframes, developers use the ______ API.
  9. A server can act as a ______ to forward requests to another origin.
  10. Developers must carefully check the origin in postMessage to avoid ______ attacks.
<
Previous Post
🎉 CSS Made Simple: A Beginner’s Guide to Styling the Web With Project
>
Blog Archive
Archive of all previous blog posts