Implementation of iframe using PostMessage across domains

Time:2020-1-21

When we want to use a page service provided by domain name b.com under domain name a.com, the intuitive way to realize it is to use iframe. However, there are * * cross domain problems * * in iframe direct interaction. At present, there are two solutions. One is to use nginx proxy forwarding, configure the specified forwarding rules on nginx of domain a, point directly to domain B, and directly kill cross domain; the other is to use PostMessage method. For the second way, look at the usage and possible problems.

What is PostMessage

Refer to MDN’s detailed description of PostMessage here. In short, PostMessage is a method attached under window, which is used for information interaction between two pages under different domain names. The parent-child page sends messages through postmessage(), and then receives messages through listening for message events.

Use of PostMessage

Suppose there is a parent page indexpage.html and a child page iframepage.html

1、 Parent page sends message to child page

//Parent page index.html

//Get iframe element

iFrame = document.getElementById('iframe')

//Send the message after iframe is loaded, otherwise the message will not be received by the sub page

iFrame.onload = function(){

//Send a message immediately after iframe is loaded

iFrame.contentWindow.postMessage({msg: 'MessageFromIndexPage'},'\*');

}

iFrame.contentWindow.postMessage(‘MessageFromIndexPage’,’b.com’)

The first parameter of the method is the message sent, without format requirements; the second parameter is domain name restriction, fill in * when the domain name is not restricted, and the third optional parameter transfer is generally not filled in, which has serious browser compatibility problems.

2、 The child page receives the message sent by the parent page

//Subpage iframepage.html

//Listen for message events

window.addEventListener("message", function(event){

Console. Log ('Here is the message received from the parent page, the message content is in the event. Data attribute ', event)

}, false)

3、 Child page delivers message to parent page

Window. Parent. PostMessage ({Name: 'Zhang San'}, '\ *');

The first parameter of the method is the message sent. At present, there is no format requirement. Before gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / Seamonkey 2.3), the parameter message must be a string; the second parameter is the domain name restriction. Fill in when the domain name is not restricted*‘

4、 Parent page receives messages from child pages

//Listen for message events

window.addEventListener("message", function receiveMessageFromIframePage (event) {

Console. Log ('Here is the message sent from the sub page. The content of the message is in the event. Data property ', event)

}, false);

Security of PostMessage

When using PostMessage interaction, cross domain behavior is allowed by default. Once cross domain behavior is allowed, there will be some security problems. There are two main attack methods for PostMessage. One is to forge the data sender (parent page), which is easy to cause the data receiver (child page) to be attacked by XSS or other security problems; the other is to forge the data receiver, which is similar to JSON hijacking.

1、 Sender of forged data

Attack method: forge a parent page, guide the user to trigger the function, and send messages to the child page. If the child page directly inserts the messages sent by the parent page into the current document flow, it will cause XSS attack, or the child page uses the messages sent by the parent page for other operations, such as writing data, causing security problems.

Prevention method: iframe on the sub page restricts the domain name of the message received

//Subpage iframepage.html

//Listen for message events

window.addEventListener("message", function(event){

origin = event.origin || event.originalEvent.origin

if(origin == 'https://A.com'){

Console. Log ('Here is the message received from the parent page, the message content is in the event. Data attribute ', event)

}

}, false)

2、 Forged data receiver

Attack mode: forge a sub page, introduce a sub page in the parent page, receive the message sent by the parent page in the forged page, and then obtain the sensitive message of the user.

Prevention method: the parent page restricts the domain name of the page sending the message

//Parent page index.html

//Get iframe element

iFrame = document.getElementById('iframe')

//Send the message after iframe is loaded, otherwise the message will not be received by the sub page

iFrame.onload = function(){

//Send a message immediately after iframe is loaded

iFrame.contentWindow.postMessage('MessageFromIndexPage','https://B.com');

}

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.