HTML5 Cross Domain Messaging

Posted By :Arun Singh |26th July 2019

What is Same Origin Policy (SOP)

  • The same origin policy does not allowed JavaScript code loaded from one origin accessing or communicating with documents from another origin.
  • JavaScript codes are considered from the same origin if the are loaded from the sites that have the same protocol(http:, https:, ws:, wss:) 
  • The same origin policy is imposed by browsers.

Same Origin Policy Examples

  • ?The JavaScript code from can access the following documents since they are considerd from same origin
  • But it can't access the following documents since they are considered from different origins (different Protocol) (different Port) (different host)

Why same origin policy in the first place

  • In order to pervert Cross-site-scripting(XSS) security risk.
  • In XSS, attackers inject client-side script into Web pages viewed by the other users.

What is the downside of SOP.

  • Same Origin Policy (SOP) makes it hard to d Who "mash-up"
    Because it disallows XMLHttpRequest object from accessing document from different origins.
    What if I want the JavaScript code loaded from server A to access data from Flickr, Google, Yahoo, etc through Ajax call.
  • SOP based security model of HTML
    Introduced in Netscape Navigator 2.0
    Is becoming a hindrance of writing Rich client application.
  • Work-Arounds( not a desirable solutions, however)
    The client asks the server to access the document on behalf of it not efficient.

?Issues of SOP dealt with in HTML5 

  • Issue1
     A document running in a window A (or iframe A) cannot access a document running in window B (or iframe B).
    HTML5 solves through "Cross-Domain Messaging"
  • Issue2
    A document loaded from origin A cannot access service running in Origin B through traditional XHR.
    A HTML5-enabled browesers support Cross-Origin Resource Sharing (CORS) and CORS-enabled XMLHttpRequest2(XHR2).

?What is & Why Cross-Domain Messaging  

  • Before Cross-Domain Messaging, communications between iframes, windows, tabs are  disallowed by browser.
  • In order to prevent XSS
  • Cross-Domain Messaging enables secures cross-domain messaging across iframes, windows, tabs regardless of origins of the documents they loaded.
  • These iframes, window, tabs can send/receive data to/from other iframe windows and tabs of different origins.

Posting a Message to another iframe (from Host window)

<p> The source origin of this page is</p>
  aframe = document.getElementById('iframe');
  aframe.postMessage("Hello World", //Message to post
		     "" //Target Origin
<p> Target iframe </p>
<iframe id="iframe" src =""></iframe>

Receiving a Message from the iframe (in host window)

  • Add "onmessage" event handler
  • The event handler receives "event", which contains "data", "origin", and "source" properties.
  • You need to check the "origin" to make sure the message if from the trusted origin or origins.
//Handle message received from the iframe
	if(e.origin !== "")
	//filter origin for security reasons 
	//Disregard the message since it is not from a valid origin
	} else{
	// contains message from the sender	
}, false);

Thanks for reading!

About Author

Arun Singh

Arun is a MEAN stack developer. He has a fastest and efficient way of problem solving techniques. He is very good in JavaScript and also have a little bit knowledge of Java and Python.

Request For Proposal

[contact-form-7 404 "Not Found"]

Ready to innovate ? Let's get in touch

Chat With Us