iframe特性全解讀

前言

在平時(shí)的開發(fā)中，或多或少會(huì)用到iframe，大部分時(shí)候我們只需要簡(jiǎn)單的使用iframe標(biāo)簽，設(shè)置個(gè)寬高即可，很少回去深究iframe的別的特性。比如這種用法：

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

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

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

iframe的特性

iframe的特性都是依賴參數(shù)配置實(shí)現(xiàn)的，現(xiàn)整理如下有用的屬性：

iframe的allow屬性詳解

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

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

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

而allowlist則有如下規(guī)則：

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

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

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

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

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

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

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

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

<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屬性詳解

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

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

• No Referrer When Downgrade：僅當(dāng)發(fā)生協(xié)議降級(jí)（如 HTTPS 頁(yè)面引入 HTTP 資源，從 HTTPS 頁(yè)面跳到 HTTP 等）時(shí)不發(fā)送 Referrer 信息。這個(gè)規(guī)則是現(xiàn)在大部分瀏覽器默認(rèn)所采用的；

• Origin Only：發(fā)送只包含 host 部分的 Referrer。啟用這個(gè)規(guī)則，無(wú)論是否發(fā)生協(xié)議降級(jí)，無(wú)論是本站鏈接還是站外鏈接，都會(huì)發(fā)送 Referrer 信息，但是只包含協(xié)議 + host 部分（不包含具體的路徑及參數(shù)等信息）；

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

• Unsafe URL：無(wú)論是否發(fā)生協(xié)議降級(jí)，無(wú)論是本站鏈接還是站外鏈接，統(tǒng)統(tǒng)都發(fā)送 Referrer 信息。正如其名，這是最寬松而最不安全的策略；

比如我們這樣配置：

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

我們通過(guò)抓包可以看到對(duì)應(yīng)的請(qǐng)求是這樣的：

iframe的sandbox屬性詳解

iframe的沙箱模式可以提供一些額外的配置，當(dāng)你把一個(gè)iframe置為沙箱的時(shí)候，意味著沙箱內(nèi)的內(nèi)容的行為全憑你控制了。

比如你在iframe下這樣配置：

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

但是iframe1.html中卻有對(duì)應(yīng)的js腳本，那么在控制臺(tái)下可以看到這樣的報(bào)錯(cuò)：

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.

所以當(dāng)你的iframe有腳本的時(shí)候，基本上都會(huì)配置allow-scripts這個(gè)屬性。

再比如你的頁(yè)面會(huì)有form標(biāo)簽提交數(shù)據(jù)的時(shí)候，如果沒(méi)有allow-forms，則會(huì)報(bào)這種錯(cuò)誤：

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

接下來(lái)解釋一下各個(gè)配置的含義：

關(guān)于沙箱模式的注意點(diǎn)

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

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

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

經(jīng)過(guò)上面的解釋，想必知道剛開始的那個(gè)問(wèn)題的答案了吧？

Tips

1. window.frames

frames屬性是一個(gè)類似數(shù)組的對(duì)象；因?yàn)閒rames實(shí)際上是window對(duì)象的別名，frames屬性又是可以遍歷的，所以它是一個(gè)類似數(shù)組的對(duì)象: window.frames.length === window.length;

frames屬性的每一項(xiàng)是框架內(nèi)的窗口，即框架內(nèi)的window對(duì)象；frames屬性的每一項(xiàng)并不是iframe的dom節(jié)點(diǎn)!!!若需要獲取iframe的dom節(jié)點(diǎn)可以通過(guò)以下方法: frames[0].frameElement

如果有一個(gè)iframe是處于沙箱模式，并且沒(méi)有設(shè)置allow-same-origin，那么雖然你可以訪問(wèn)到window.frames的長(zhǎng)度為2，但是當(dāng)你獲取window.frames[1].location的時(shí)候會(huì)有這樣的錯(cuò)誤：

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

配置了allow-same-origin的時(shí)候：

沒(méi)有配置allow-same-origin的時(shí)候：

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

2. window.parent: 父窗口，如果一個(gè)窗口沒(méi)有父窗口，則它的parent屬性為自身的引用；

3. window.self: 當(dāng)前窗口，即自身的引用