Iframe跨視窗通訊原理詳解

2022-08-05 14:03:08

同源

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

同源策略目的是保護使用者資訊免遭資訊盜竊：加入小王有兩個開啟的頁面：一個是 shop.com，一個是 email.com。小王不希望 shop.com 的指令碼可以讀取 mail 的郵件，這時同源策略就起作用了。

如果兩個 URL 具有相同的協定，域，和埠，則稱它們是同源的。

以下幾個URL是同源的：

以下是不同源的：

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

同源策略規定：

如果我們有對另一個視窗的參照（window.open || iframe），並且該視窗是同源的，那麼我們就具有對該視窗的全部存取許可權。見程式碼：2-1 、2-2
如果不是同源的，我們就不能存取視窗中的內容：變數，檔案，任何東西。唯一例外是location：我們可以修改它，使用它進行重定向。但是我們無法讀取 location 。因此，我們無法看到使用者當前所處的位置，也就不會洩露任何資訊。

iframe

iframe 標籤承載了一個單獨的嵌入的視窗，它有自己的 document 和 window

iframe.contentWindow 來獲取中的 window

iframe.contentDocument 來獲取中的 document ，是 iframe.contentWindow.document 的簡寫。

當我們存取嵌入的視窗中的東西時，瀏覽器會檢查 iframe 是否具有相同的源。如果不是，則會拒絕存取（對 location 進行寫入是一個例外，它是會被允許的）。

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

 <!-- 1.html 內容 -->
 <!-- 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跨視窗通訊原理詳解

目錄

同源

iframe

熱門文章