Cross domain messaging using postMessage

Question

I am having a requirement where I need to open a html page inside an iframe, which, in turn, is placed inside another html page (uri starts with file:// for this page). There needs to be a cross domain messaging between the iframe and the outer html page. It is working perfectly fine when the page inside the iframe is loaded from the local machine (both outer page and page in iframe have file:// uri).

Now, if I try to create an application, host it in my local machine and open it inside the iframe, although the page successfully loads, but the messaging between the outer frame and the page in iframe are failing.

I am getting the following error in Chrome:-

Uncaught SecurityError: Blocked a frame with origin "http://localhost/newapp" 
from accessing a frame with origin "null".  The frame requesting access has a protocol of 
"http", the frame being accessed has a protocol of "file". Protocols must match.

I have already allowed cross-origin requests on the server hosting the application. What other steps can I try to make postMessage communication possible?

gaelgillard gaelgillard · Accepted Answer · 2014-09-02T13:37:23

The error message is clear: you're not using the same protocol. One is using HTTP and the other is using file.

As a security choice of Chrome, you need to serve both under HTTP or file protocol.

Cross domain messaging using postMessage

1 Answers