Cross-origin data transfer to iframes using postMessage

postMessage

In the process of front-end development, sometimes it is necessary to call and display other people’s pages. At this time, if the modularization is not high, it is possible to use iframe to import, but sometimes there is a problem of parameter transmission between iframe parent and child pages.

This article mainly uses postMessage to pass parameters, which can reduce the problems caused by cross-domain.

Introducing MDN:

The window.postMessage() method can safely implement cross-origin communication. Typically, scripts for two different pages will only be executed if the pages on which they are executed are located on the same protocol (usually https), port number (443 is the default for https), and host (modulo Document.domain for both pages) set to the same value), the two scripts can communicate with each other. The window.postMessage() method provides a controlled mechanism to circumvent this restriction and is safe when used correctly.

url pass parameter

Before introducing the parameter transmission method of postMessage , let me first say that sub-pages can obtain parameters through url (if it is only fixed key data, this method is also good)

In the parent page:

 <iframe id="ifr" src="./iframe.html?id=123" frameborder="0"></iframe>

In the subpage, the url of window.location can be directly analyzed.

 <script>   let url = window.location.search.slice(1, window.location.search.length).split('=');   console.log(url); </script>

At this point, run the parent page to the browser and display the result:

This will get the key id parameter.

Use postMessage to pass parameters

There are three parameters to the method:

• data: Object passed from other windows.

• origin: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin of the sender window of the message when calling postMessage . This string consists of protocol, “://”, domain name, ” : Port number” is spliced ​​together. For example “https://example.org (implies port `443`)”, “http://example.net (implies port `80`)”, “http://example.com:8080”. Note that this origin is not guaranteed to be the current or future origin of the window, as postMessage may be navigated to a different location after being called.

In the parent interface, find the postMessage method from the contentWindow of the iframe

 <script>     let i = 0;     let ifr = document.getElementById('ifr')     function post() {         ifr.contentWindow.postMessage(`send data i: ${i}`, 'http://127.0.0.1:5500/');         i++;     } </script>

The iframe sub-interface listens for message through addEventListener .

 window.addEventListener('message', (event)=> { //Create a message listener function for the current window console.log(event.data); }, false);

The effect is as follows:

Now the above example is that the parent page passes the value to the child page, and the child page can also pass the value to the parent page. The principle is actually the same.

At the same time, for security reasons, you can use origin to add judgment to the source

 window.addEventListener('message', (event)=> { //Create a message listener function for the current window console.log(event.origin);     console.log(event.data); }, false);

The text and pictures in this article are from InfoQ