前言

在平時的開發中，或多或少會用到iframe，大部分時候我們只需要簡單的使用iframe標簽，設置個寬高即可，很少回去深究iframe的別的特性。比如這種用法：

<iframe src='https://blog.5udou.cn'>

但直到產品經理要求說，iframe嵌入的頁面可不可以讓主頁面的url地址發生變化呀？好吧，一下子懵圈了，我得去查查資料，于是索性就深究深究iframe的一些特性，免得再次尷尬。

下面所有代碼都可以在這里找到：https://github.com/linxiaowu66/iframe-demo

iframe的特性

iframe的特性都是依賴參數配置實現的，現整理如下有用的屬性：

iframe的allow屬性詳解

allow屬性的使用需要參考特性策略這一小節。特性策略可以允許你控制頁面或者iframe可以使用哪些特性。頁面控制的話設置在HTTP頭部的Feature-Policy的這個字段，iframe的話就是我們要說的這個allow字段。

特性策略的書寫規則是：<feature name> <allowlist of origin(s)>

完整的特性名稱參考： Policy Controlled Features或者Feature-Policy

而allowlist則有如下規則：

1. *：表示該特性在該文檔下都是允許的，包括所有的嵌套的瀏覽內容(iframes),而不用管這些內容的源。

2. self：表示該特性在該文檔下都是允許的，并且僅在同源的情況下嵌套的瀏覽內容(iframes)才可以使用。

3. src：(iframes的allow屬性專用)表示該特性在這個iframe下允許使用，只要加載的文檔來源的源和iframe的src屬性指定的URL是同源的。

4. none：表示該特性在頂層以及嵌套的瀏覽內容下都是被禁用的

5. <origin(s)>：表示該特性只在一些指定的源下才允許使用，多個源使用空格隔開

今天我們主要講一下iframe下的allow屬性，比如你不允許iframe的頁面全屏、不允許調用攝像頭之類的行為，可以這么配置：

<iframe allow="camera 'none'; fullscreen 'none'">

比如只允許同源的才可以使用全屏這個特性：

<iframe src="https://example.com..." allow="fullscreen 'src'"></iframe>

比如只允許指定源才可以使用定位功能：

<iframe src="https://google-developers.appspot.com/demos/..." allow="geolocation https://google-developers.appspot.com"></iframe>

iframe的referrerpolicy屬性詳解

這個屬性牽扯到了HTTP的referer策略，我們知道referer的策略是這樣的：

• No Referrer：任何情況下都不發送 Referrer 信息；

• No Referrer When Downgrade：僅當發生協議降級（如 HTTPS 頁面引入 HTTP 資源，從 HTTPS 頁面跳到 HTTP 等）時不發送 Referrer 信息。這個規則是現在大部分瀏覽器默認所采用的；

• Origin Only：發送只包含 host 部分的 Referrer。啟用這個規則，無論是否發生協議降級，無論是本站鏈接還是站外鏈接，都會發送 Referrer 信息，但是只包含協議 + host 部分（不包含具體的路徑及參數等信息）；

• Origin When Cross-origin：僅在發生跨域訪問時發送只包含 host 的 Referrer，同域下還是完整的。它與 Origin Only 的區別是多判斷了是否 Cross-origin。需要注意的是協議、域名和端口都一致，才會被瀏覽器認為是同域；

• Unsafe URL：無論是否發生協議降級，無論是本站鏈接還是站外鏈接，統統都發送 Referrer 信息。正如其名，這是最寬松而最不安全的策略；

比如我們這樣配置：

<iframe allow="fullscreen 'none'" referrerpolicy="no-referrer" src='http://127.0.0.1:3000/iframe.html'></iframe>

我們通過抓包可以看到對應的請求是這樣的：

iframe的sandbox屬性詳解

iframe的沙箱模式可以提供一些額外的配置，當你把一個iframe置為沙箱的時候，意味著沙箱內的內容的行為全憑你控制了。

比如你在iframe下這樣配置：

<iframe sandbox="" src='http://127.0.0.1:3000/iframe1.html'></iframe>

但是iframe1.html中卻有對應的js腳本，那么在控制臺下可以看到這樣的報錯：

Blocked script execution in 'http://127.0.0.1:3000/iframe1.html' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

所以當你的iframe有腳本的時候，基本上都會配置allow-scripts這個屬性。

再比如你的頁面會有form標簽提交數據的時候，如果沒有allow-forms，則會報這種錯誤：

Blocked form submission to '' because the form's frame is sandboxed and the 'allow-forms' permission is not set.

接下來解釋一下各個配置的含義：

關于沙箱模式的注意點

• 當被嵌入的文檔與主頁面同源時，強烈建議不要同時使用allow-scripts和allow-same-origin，否則的話將允許嵌入的文檔通過代碼刪除sandbox屬性。雖然你可以這么做，但是這樣的話其安全性還不如不用sandbox。

• 如果攻擊者可以將潛在的惡意內容往用戶的已沙箱化的iframe中顯示，那么沙箱操作的安全性將不再可靠。推薦把這種內容放置到獨立的專用域中，減小可能的損失。

• 沙箱屬性(sandbox)在Internet Explorer 9及更早的版本上不被支持

經過上面的解釋，想必知道剛開始的那個問題的答案了吧？

Tips

1. window.frames

frames屬性是一個類似數組的對象；因為frames實際上是window對象的別名，frames屬性又是可以遍歷的，所以它是一個類似數組的對象: window.frames.length === window.length;

frames屬性的每一項是框架內的窗口，即框架內的window對象；frames屬性的每一項并不是iframe的dom節點!!!若需要獲取iframe的dom節點可以通過以下方法: frames[0].frameElement

如果有一個iframe是處于沙箱模式，并且沒有設置allow-same-origin，那么雖然你可以訪問到window.frames的長度為2，但是當你獲取window.frames[1].location的時候會有這樣的錯誤：

DOMException: Blocked a frame with origin "http://127.0.0.1:3000" from accessing a cross-origin frame

配置了allow-same-origin的時候：

沒有配置allow-same-origin的時候：

1. window.top: 頂層窗口，即最上層的窗口

2. window.parent: 父窗口，如果一個窗口沒有父窗口，則它的parent屬性為自身的引用；

3. window.self: 當前窗口，即自身的引用