h5 iframe巢狀頁面 iframe特性全解讀

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

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

下面所有**都可以在這裡找到：

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

特性策略的書寫規則是：

完整的特性名稱參考： policy controlled features或者feature-policy

而allowlist則有如下規則：

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

self：表示該特性在該文件下都是允許的，並且僅在同源的情況下巢狀的瀏覽內容(iframes)才可以使用。

src：(iframes的allow屬性專用)表示該特性在這個iframe下允許使用，只要載入的文件**的源和iframe的src屬性指定的url是同源的。

none：表示該特性在頂層以及巢狀的瀏覽內容下都是被禁用的

：表示該特性只在一些指定的源下才允許使用，多個源使用空格隔開

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

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

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

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

比如我們這樣配置：

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

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

比如你在iframe下這樣配置：

但是iframe1.html中卻有對應的js指令碼，那麼在控制台下可以看到這樣的報錯：

所以當你的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.

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

關於沙箱模式的注意點

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

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 "" from accessing a cross-origin frame

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

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

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

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

window.self: 當前視窗，即自身的引用；

iframe