Iframe跨窗口通信原理詳解

更新時(shí)間：2022年08月05日 09:11:17 作者：marh

這篇文章主要為大家介紹了Iframe跨窗口通信原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

同源

同源策略會(huì)限制窗口(window) 和 frame 之間的通信，因此首先要知道同源策略。

同源策略目的是保護(hù)用戶信息免遭信息盜竊：加入小王有兩個(gè)打開(kāi)的頁(yè)面：一個(gè)是 shop.com，一個(gè)是 email.com。小王不希望 shop.com 的腳本可以讀取 mail 的郵件，這時(shí)同源策略就起作用了。

如果兩個(gè) URL 具有相同的協(xié)議，域，和端口，則稱它們是同源的。

以下幾個(gè)URL是同源的：

site.com
site.com/
site.com/a/index.htm…

以下是不同源的：

https://site.com
http://bbs.site.com
site.com:8080
http://site.org

同源策略規(guī)定：

如果我們有對(duì)另一個(gè)窗口的引用（window.open || iframe），并且該窗口是同源的，那么我們就具有對(duì)該窗口的全部訪問(wèn)權(quán)限。見(jiàn)代碼：2-1 、2-2
如果不是同源的，我們就不能訪問(wèn)窗口中的內(nèi)容：變量，文檔，任何東西。唯一例外是location：我們可以修改它，使用它進(jìn)行重定向。但是我們無(wú)法讀取 location 。因此，我們無(wú)法看到用戶當(dāng)前所處的位置，也就不會(huì)泄露任何信息。

iframe

iframe 標(biāo)簽承載了一個(gè)單獨(dú)的嵌入的窗口，它有自己的 document 和 window

iframe.contentWindow 來(lái)獲取中的 window

iframe.contentDocument 來(lái)獲取中的 document ，是 iframe.contentWindow.document 的簡(jiǎn)寫(xiě)。

當(dāng)我們?cè)L問(wèn)嵌入的窗口中的東西時(shí)，瀏覽器會(huì)檢查 iframe 是否具有相同的源。如果不是，則會(huì)拒絕訪問(wèn)（對(duì) location 進(jìn)行寫(xiě)入是一個(gè)例外，它是會(huì)被允許的）。

代碼 2-1 : （在同源情況下）

 <!-- 1.html 內(nèi)容 -->
 <!-- http://127.0.0.1:8000/1.html -->
 <body>
     我是 1.html, 下面嵌套 2.html
     <iframe src="http://127.0.0.1:8000/2.html" ></iframe>
     <script>
         function hello () { console.log('this is 1.html') }
         var iframe = document.getElementsByTagName('iframe')[0];
         console.log('contentWindow ??', iframe.contentWindow); // 能訪問(wèn)
         console.log('contentDocument ??', iframe.contentDocument); // 能訪問(wèn)
         // 注意訪問(wèn)方式, 需要在 onload 后才能取到值
         console.log( iframe.contentWindow.hello() ) // Uncaught TypeError: iframe.contentWindow.hello is not a function
         iframe.onload = function(){
             console.log( iframe.contentWindow.hello() ) // this is 2.html
             //  輸出 Location 對(duì)象， 依然要在 iframe.onload 中訪問(wèn)
             console.log('contentWindow.location ??', iframe.contentWindow.location)
             //  iframe.contentWindow.location.host : 127.0.0.1:8000
             //  xxx.hash:     ""
             //  xxx.host:     "127.0.0.1:8000"
             //  xxx.hostname: "127.0.0.1"
             //  xxx.href:     "http://127.0.0.1:8000/2.html"
             //  xxx.origin:   "http://127.0.0.1:8000"
             //  xxx.pathname: "/2.html"
             //  xxx.port:     "8000"    
             //  xxx.protocol: "http:"
             //  ...
             // 有相同的源 我們可以進(jìn)行任何操作
             iframe.contentDocument.body.innerHTML('<p>hi, i am ur father !</p>');
             iframe.contentDocument.getElementsByTagName('p');
         })
         iframe.contentWindow.location = 'http://www.360doc.com'; // 可以直接修改 iframe 地址, 不受同源策略的限制。 有的網(wǎng)站不支持被iframe引用, 所以會(huì)報(bào)錯(cuò)。 注意區(qū)分錯(cuò)誤信息。
     </script>
 </body>
 <!-- 2.html 內(nèi)容 -->
 <!-- http://127.0.0.1:8000/2.html -->
 <body>
     我是 2.html
     <script>
         function hello () { console.log('this is 2.html') }
     </script>
 </body>

iframe.onload vs iframe.contentWindow.onload

iframe.onload 事件（在 <iframe> 標(biāo)簽上）與 iframe.contentWindow.onload（在嵌入的 window 對(duì)象上）基本相同。當(dāng)嵌入的窗口的所有資源都完全加載完畢時(shí)觸發(fā)。

……但是，我們無(wú)法使用 iframe.contentWindow.onload 訪問(wèn)不同源的 iframe。因此，請(qǐng)使用 iframe.onload。

window：document.domain

但是，如果窗口的二級(jí)域相同，例如 bbs.site.com，nav.site.com 和 site.com（它們共同的二級(jí)域是 site.com），我們可以使瀏覽器忽略該差異，使得它們可以被作為“同源”的來(lái)對(duì)待，以便進(jìn)行跨窗口通信。

為了做到這一點(diǎn)，每個(gè)這樣的窗口都應(yīng)該執(zhí)行下面這行代碼：

 document.domain = 'site.com';

這樣就可以了。現(xiàn)在它們可以無(wú)限制地進(jìn)行交互了。但是再?gòu)?qiáng)調(diào)一遍，這僅適用于具有相同二級(jí)域的頁(yè)面。

已棄用，但仍有效

document.domain 屬性正在被從規(guī)范中刪除?？绱翱谕ㄐ牛ㄏ旅鎸⒑芸旖忉尩剑┦墙ㄗh的替代方案。

也就是說(shuō)，到目前為止，所有瀏覽器都支持它。并且未來(lái)也將繼續(xù)支持它，而不會(huì)導(dǎo)致使用了 document.domain 的舊代碼出現(xiàn)問(wèn)題。

代碼 2-1 : （在不同源情況下）注意端口

 <!-- 1.html 內(nèi)容 -->
 <!-- http://127.0.0.1:8000/1.html -->
 <body>
     我是 1.html, 下面嵌套 2.html
     <!-- 端口不同, 不同源 -->
     <iframe src="http://127.0.0.1:8001/2.html" ></iframe>
     <script>
         function hello () { console.log('this is 1.html') }
         var iframe = document.getElementsByTagName('iframe')[0];
         console.log('contentWindow ??', iframe.contentWindow); // 可以獲取對(duì)內(nèi)部 window 的引用
         console.log('contentDocument ??', iframe.contentDocument); // 空的 document 對(duì)象
         iframe.onload = function(){
             console.log( iframe.contentWindow.hello() ) // Uncaught DOMException: Blocked a frame with origin "http://127.0.0.1:8000" from accessing a cross-origin frame.
             // 無(wú)法讀取 iframe 中頁(yè)面的 URL
             console.log( iframe.contentWindow.location )
             // Location {then: undefined, Symbol(Symbol.toStringTag): undefined, Symbol(Symbol.hasInstance): undefined, Symbol(Symbol.isConcatSpreadable): undefined, replace: ?}
             console.log(iframe.contentWindow.location.href) // Uncaught DOMException: Blocked a frame with origin "http://127.0.0.1:8000" from accessing a cross-origin frame. 
         })
         iframe.contentWindow.location = 'http://www.360doc.com'; // 可以直接修改 iframe 地址, 不受同源策略的限制，不受同源策略的限制，不受同源策略的限制。 
     </script>
 </body>
 <!-- 2.html 內(nèi)容 -->
 <!-- http://127.0.0.1:8001/2.html -->
 <body>
     我是 2.html
     <script>
         function hello () { console.log('this is 2.html') }
     </script>
 </body>

iframe：錯(cuò)誤文檔陷阱

當(dāng)一個(gè) iframe 來(lái)自同一個(gè)源時(shí)，我們可能會(huì)訪問(wèn)其 document，但是這里有一個(gè)陷阱。它與跨源無(wú)關(guān)，但你一定要知道。在創(chuàng)建 iframe 后，iframe 會(huì)立即就擁有了一個(gè)文檔。但是該文檔不同于加載到其中的文檔！

因此，如果我們要立即對(duì)文檔進(jìn)行操作，就可能出問(wèn)題，因?yàn)槟鞘?strong>錯(cuò)誤的文檔。

正確的文檔在 iframe.onload 觸發(fā)時(shí)肯定就位了。但是，只有在整個(gè) iframe 和它所有資源都加載完成時(shí)，iframe.onload 才會(huì)觸發(fā)。

看一下下面這段代碼：

 let oldDoc = iframe.contentDocument;
 iframe.onload = function() {
     let newDoc = iframe.contentDocument;
     // 加載的文檔與初始的文檔不同！
     alert(oldDoc == newDoc); // false
 };

window.frames

獲取 <iframe> 的 window 對(duì)象的另一個(gè)方式是從命名集合 window.frames 中獲取：

通過(guò)索引獲?。?code>window.frames[0] —— 文檔中的第一個(gè) iframe 的 window 對(duì)象。
通過(guò)名稱獲?。?code>window.frames.iframeName —— 獲取 name="iframeName" 的 iframe 的 window 對(duì)象。

例如：

 // <iframe src="/" style="height:80px" name="win" id="iframe"></iframe>
 alert(iframe.contentWindow == frames[0]); // true
 alert(iframe.contentWindow == frames.win); // true

一個(gè) iframe 內(nèi)可能嵌套了其他的 iframe。相應(yīng)的 window 對(duì)象會(huì)形成一個(gè)層次結(jié)構(gòu)（hierarchy）。

可以通過(guò)以下方式獲?。?/p>

window.frames —— “子”窗口的集合（用于嵌套的 iframe）。

window.parent —— 對(duì)“父”（外部）窗口的引用。

window.top —— 對(duì)最頂級(jí)父窗口的引用。

例如：

 window.frames[0].parent === window; // true

我們可以使用 top 屬性來(lái)檢查當(dāng)前的文檔是否是在 iframe 內(nèi)打開(kāi)的：

 if (window === window.top) { 
   alert('不是在 iframe 中打開(kāi)的');
 } else {
   alert('在 iframe 中打開(kāi)的');
 }

“sandbox” iframe 特性

sandbox 特性（attribute）允許在 <iframe> 中禁止某些特定行為，以防止其執(zhí)行不被信任的代碼。它通過(guò)將 iframe 視為非同源的，或者應(yīng)用其他限制來(lái)實(shí)現(xiàn) iframe 的“沙盒化”。

對(duì)于 <iframe sandbox src="...">，有一個(gè)應(yīng)用于其上的默認(rèn)的限制集。但是，我們可以通過(guò)提供一個(gè)以空格分隔的限制列表作為特性的值，來(lái)放寬這些限制，該列表中的各項(xiàng)為不應(yīng)該應(yīng)用于這個(gè) iframe 的限制，例如：<iframe sandbox="allow-forms allow-popups">。

換句話說(shuō)，一個(gè)空的 "sandbox" 特性會(huì)施加最嚴(yán)格的限制，但是我們用一個(gè)以空格分隔的列表，列出要移除的限制。

以下是限制的列表：

allow-same-origin

默認(rèn)情況下，"sandbox" 會(huì)為 iframe 強(qiáng)制實(shí)施“不同來(lái)源”的策略。換句話說(shuō)，它使瀏覽器將 iframe 視為來(lái)自另一個(gè)源，即使其 src 指向的是同一個(gè)網(wǎng)站也是如此。具有所有隱含的腳本限制。此選項(xiàng)會(huì)移除這些限制。

allow-top-navigation

允許 iframe 更改 parent.location。

allow-forms

允許在 iframe 中提交表單。

allow-scripts

允許在 iframe 中運(yùn)行腳本。

allow-popups

允許在 iframe 中使用 window.open 打開(kāi)彈窗。

查看官方手冊(cè) 獲取更多內(nèi)容。

iframe 通信：postMessage onmessage

postMessage 接口允許窗口之間相互通信，無(wú)論它們來(lái)自什么源。

因此，這是解決“同源”策略的方式之一。它允許來(lái)自于 marh.com 的窗口與來(lái)自于 qq.com 的窗口進(jìn)行通信，并交換信息，但前提是它們雙方必須均同意并調(diào)用相應(yīng)的 JavaScript 函數(shù)。這可以保護(hù)用戶的安全。

這個(gè)接口有兩個(gè)部分。

1 postMessage

想要發(fā)送消息的窗口需要調(diào)用接收窗口的 postMessage 方法。換句話說(shuō)，如果我們想把消息發(fā)送給 win，我們應(yīng)該調(diào)用 win.postMessage(data, targetOrigin)。

參數(shù)

data

要發(fā)送的數(shù)據(jù)?？梢允侨魏螌?duì)象，數(shù)據(jù)會(huì)被通過(guò)使用“結(jié)構(gòu)化序列化算法（structured serialization algorithm）”進(jìn)行克隆。IE 瀏覽器只支持字符串，因此我們需要對(duì)復(fù)雜的對(duì)象調(diào)用 JSON.stringify 方法進(jìn)行處理，以支持該瀏覽器。

targetOrigin

指定目標(biāo)窗口的源，以便只有來(lái)自給定的源的窗口才能獲得該消息。

 // <iframe src="http://127.0.0.1:8080/2.html" name="example" />  
 let win = window.frames.example;    
 win.postMessage("message", "http://127.0.0.1:8080");

2 onmessage

為了接收消息，目標(biāo)窗口應(yīng)該在 message 事件上有一個(gè)處理程序。當(dāng) postMessage 被調(diào)用時(shí)觸發(fā)該事件（并且 targetOrigin 檢查成功）。

event 對(duì)象具有特殊屬性：

data 從 postMessage 傳遞來(lái)的數(shù)據(jù)。

origin 發(fā)送方的源，例如 http://javascript.info。

source 對(duì)發(fā)送方窗口的引用。如果我們想，我們可以立即 source.postMessage(...) 回去。

要為 message 事件分配處理程序，我們應(yīng)該使用 addEventListener，簡(jiǎn)短的語(yǔ)法 window.onmessage 不起作用。

 window.addEventListener("message", function(event) {
   console.log(event)
   if (event.origin != 'http://http://127.0.0.1:8080') {
     // 來(lái)自未知的源的內(nèi)容，我們忽略它
     return;
   }
   if (window == event.source) {
     // chrome 下, 頁(yè)面初次加載后會(huì)觸發(fā)一次 message 事件, event.source 是 window 對(duì)象
     // 此時(shí) event.source.postMessage 會(huì)形成死循環(huán)
     // 因此，要跳過(guò)第一次的初始化觸發(fā)的情況
     return
   }
   console.log( "received: " + event.data );
   // 可以使用 event.source.postMessage(...) 向回發(fā)送消息
   event.source.postMessage('i am 2.html')
 }, source);

跨窗口的 cookie

 <!-- 1.html 內(nèi)容 -->
 <!-- http://127.0.0.1:8000/1.html -->
 <body>
     我是 1.html, 下面嵌套 2.html
     <!-- 端口不同, 不同源 -->
     <iframe src="http://127.0.0.1:8001/2.html" ></iframe>
     <script>
         if (!document) {
             document.cookie = 'name=1';
             document.cookie = 'old=10';    
         }
         console.log('1.html', document.cookie)
     </script>
 </body>
 <!-- 2.html 內(nèi)容 -->
 <!-- http://127.0.0.1:8000/2.html -->
 <body>
     我是 2.html
     <script>
         document.cookie = 'name=2';
         document.cookie = 'year=2020';
         console.log('2.html', document.cookie)
     </script>
 </body>

第一次渲染輸出：