Shulou(Shulou.com)06/01 Report--

This article focuses on "how to achieve iframe cross-domain effect", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "how to achieve iframe cross-domain effect"!

At present, it seems that there are two solutions. One is to use nginx proxy forwarding to configure the specified forwarding rules on the nginx of domain A, which points directly to domain B and directly kills the cross-domain; the other is to use the postMessage method. For the second way, take a look at the way it is used and the possible problems.

What is postMessage?

MDN's detailed description of postMessage is referenced here. In short, postMessage is a method mounted under window for the exchange of information between two pages under different domain names. The parent and child pages send messages through postMessage (), and then receive messages by listening for message events.

PostMessage usage

Suppose you have a parent page indexPage.html and a child page iframePage.html

The parent page sends a message to the child page

/ / the parent page index.html// gets the iframe element iFrame = document.getElementById ('iframe') / / iframe before sending the message after loading, otherwise the child page will not receive messageiFrame.onload = function () {/ / iframe send a message iFrame.contentWindow.postMessage ({msg:' MessageFromIndexPage'},'*') immediately after loading;}

IFrame.contentWindow.postMessage ('MessageFromIndexPage','b.com')

The first parameter of the method is the message sent without format requirements; the second parameter is the domain name limit, which is entered when the domain name is not limited, and the third optional parameter transfer is generally left empty. This parameter has a serious browser compatibility problem.

Second, the child page receives the message sent by the parent page

/ / the child page iframePage.html// listens to the message event 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)

Third, the child page sends a message to the parent page

Window.parent.postMessage ({name: 'Zhang San'},'*')

The first parameter of the method is the message sent. Currently, there is no format requirement. Before Gecko 6. 0 (Firefox / Thunderbird 6. 0 / SeaMonkey 2. 3), the parameter message must be a string. The second parameter is the domain name limit. Enter'* 'when the domain name is not restricted.

Fourth, the parent page receives messages from the child page

/ / listen to the message event window.addEventListener ("message", function receiveMessageFromIframePage (event) {console.log ('here is the message sent from the sub-page, the message content is in the event.data attribute', event)}, false)

Security issues of postMessage

Using postMessage interaction, the default is to allow cross-domain behavior. Once cross-domain interaction is allowed, there will be some security problems. There are two main attacks against 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, similar to jsonp hijacking.

I. the sender of forged data

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

Prevention method: the subpage iframe restricts the domain name of the received message information.

/ / the child page iframePage.html// listens to the message event window.addEventListener ("message", function (event) {origin = event.origin | | event.originalEvent.originif (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)

Second, the receiver of forged data

Attack method: forge a child page, introduce a child page in the parent page, receive the message sent by the parent page in the forged page, and get the user's sensitive message at this time.

Precaution: the parent page restricts the domain name to the page that sends the message.

/ / the parent page index.html// gets the iframe element iFrame = document.getElementById ('iframe') / / iframe before sending a message after loading, otherwise the child page will not receive messageiFrame.onload = function () {/ / iframe and immediately send a message iFrame.contentWindow.postMessage (' MessageFromIndexPage',' https://B.com');} here. I believe you have a better understanding of "how to achieve the cross-domain effect of iframe". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.