![]() ![]() Just remember to put the postMessageReceiver.html file on your server and access postMessageDemo.html directly from your file system – i.e. Var ORIGIN = " //send a message into the hosted iFrame.ĭocument.getElementById("form").onsubmit = function(e)), Note that the message does not have to be JSON any string is fair game: //expected origin of iFrame content. On the form submit, we need to reference the iframe’s content window and invoke its global postMessage() method, passing in the JSON-encoded message and the iframe’s origin. There is also a script that handles the sending and receiving of messages. Our parent page includes an iframe that contains the hosted postMessageReceiver.html page, along with a form for sending messages to the iframe: You can use any server you like because the iframe only requires one. In order to avoid using multiple servers or hosting one of the pages on my own site, we’ll cheat a little bit by viewing the parent locally and hosting the iframe page on a development server. We’ll give it a whirl by setting up two-way communication between a web page and an iframe whose content resides on another server. It’s a lot like Ajax but with cross-domain capability. PostMessage() is a global method that safely enables cross-origin communication. Origin null is not allowed by Access-Control-Allow-Origin. However, should it try to fetch a resource from another server, it will fail with the following error message: XMLHttpRequest cannot load. Iframe postmessage free#It has pretty much free reign over its own page content as well as the ability to fetch more content from its own server. To illustrate, let’s say that site one has a JS script in it. The idea is to prevent a malicious script on one page from obtaining access to sensitive data on another through that page’s Document Object Model (DOM). It basically permits scripts running on pages originating from the same site to access each other’s data, but prevents scripts from accessing data that is served from a different domain. The same-origin policy is part of the web application security model. Why Browsers Limit Data Sharing Between Web Pages ![]() Now I’d like to share a relatively new technique that utilizes the JavaScript postMessage() method. In the Fetch Cross-domain Content Using a PHP Proxy article, I presented one way to serve web content from another domain. Perhaps there is no greater bane to a web developer’s existence than the same-origin policy. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |