當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

iframe内联元素有白边原因_教你如何使用内联框架元素 IFrames 的沙箱属性提高安全性？

發(fā)布時(shí)間：2025/3/20 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 iframe内联元素有白边原因_教你如何使用内联框架元素 IFrames 的沙箱属性提高安全性？小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

作者：Huup_We

轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/21ydrXuinCtYiJdsynsTrA

前言

想要構(gòu)建一個(gè)體驗(yàn)豐富的網(wǎng)站，嵌入組件和內(nèi)容幾乎是不可避免的，而這些組件和內(nèi)容你是無(wú)法真正控制的。第三方組件可以提高用戶參與度并且在整個(gè)用戶體驗(yàn)中起重要作用，且有時(shí)用戶自定義內(nèi)容甚至比網(wǎng)站本地的內(nèi)容更重要。我們不能放棄使用第三方組件和用戶自定義內(nèi)容，但這兩種方法都增加了網(wǎng)站的風(fēng)險(xiǎn)。你嵌入的每一個(gè)組件 —— 廣告、社交媒體都可能含有惡意的攻擊：

內(nèi)容安全政策 (CSP) 允許白名單中的可信源嵌入腳本和其他內(nèi)容，以減少第三方組件和用戶自定義內(nèi)容帶來(lái)的風(fēng)險(xiǎn)。這是正確且重要的一步，但需要注意的是，大多數(shù) CSP 指令只有兩種情況：要么被允許，要么不被允許。有時(shí)會(huì)遇到這種矛盾的情況：我不確定內(nèi)容的來(lái)源是否可 「信任」 ，但我想在瀏覽器中嵌入它。

最小特權(quán)

本質(zhì)上，我們正在尋找一種只授予其完成工作所需的最小權(quán)限的機(jī)制。如果組件不 「需要」 彈出一個(gè)新窗口，就禁止訪問(wèn) window.open。如果組件不需要 Flash，就關(guān)閉對(duì) Flash 插件的支持。當(dāng)我們遵守最小特權(quán)原則，關(guān)閉與功能不直接相關(guān)的權(quán)限，那就會(huì)很安全了。

iframe 元素是為這種解決方案構(gòu)建良好框架的第一步。在 iframe 中加載不信任的組件時(shí)，它將提供應(yīng)用程序與加載內(nèi)容的分離：嵌入的內(nèi)容不能訪問(wèn)頁(yè)面的 DOM 或本地存儲(chǔ)的數(shù)據(jù)，也不能在頁(yè)面上任意位置繪圖；它的作用范圍僅限于被嵌入的元素。然而，這種分離并不是真正可靠的。被嵌入的頁(yè)面仍然有許多令人討厭或惡意的行為：比如自動(dòng)播放的視頻、多余的插件和彈出窗口，而這些只是冰山一角。

iframe 元素的 「sandbox」 屬性加強(qiáng)了對(duì)框架內(nèi)容的限制。我們可以指示瀏覽器在低權(quán)限環(huán)境中加載特定框架的內(nèi)容，只允許完成所需功能子集。

先去除，再校驗(yàn)

Twitter 的 "Tweet" 按鈕是個(gè)很好的示例，它可以通過(guò)沙箱更安全地嵌入到站點(diǎn)中。Twitter 允許你通過(guò) iframe 嵌入按鈕，用以下代碼：

為了確定我們可以鎖定哪些內(nèi)容，需要仔細(xì)檢查按鈕有哪些功能。被加載的 HTML 從 Twitter 的服務(wù)器上執(zhí)行一系列 JavaScript 代碼，并在點(diǎn)擊時(shí)彈出一個(gè)有推文接口的窗口。同時(shí)，為了綁定推文到正確的賬號(hào)，接口需要訪問(wèn) Twitter 的 cookies，最后再提交包含推文內(nèi)容的表單。

沙箱工作在白名單的基礎(chǔ)上。我們首先刪除所有可能的權(quán)限，然后通過(guò)向沙箱的配置中添加特定的標(biāo)志，最后再重新啟用各個(gè)權(quán)限。對(duì)于 Twitter 組件，我們決定啟用 JavaScript、彈出窗口、表單提交和獲取 twitter.com 的 cookie 的權(quán)限。我們可以通過(guò)添加一個(gè) sandbox 屬性到 iframe ，如下:

如上，我們已經(jīng)為框架提供了它所需要的功能，瀏覽器將拒絕任何沒(méi)有被 sandbox 屬性授予的權(quán)限的訪問(wèn)。

權(quán)限的力度控制

在上面的例子中可以看到一些可能的沙箱標(biāo)志，現(xiàn)在讓我們更詳細(xì)地挖掘?qū)傩缘膬?nèi)部工作機(jī)制。

給定一個(gè)帶有空沙箱屬性的 iframe(

JavaScript 將不會(huì)在框架文檔中執(zhí)行。這不僅包括通過(guò) script 標(biāo)簽加載的 JavaScript，還包括內(nèi)聯(lián)事件處理程序和 javascript: URLs。這還意味著 noscript 標(biāo)簽中的內(nèi)容會(huì)被顯示，就像用戶自己禁用了腳本一樣。
框架文檔被加載到唯一的源，這意味著所有同源檢查都將失敗；唯一的源不匹配其他源，甚至它們自己。在其他影響中，這意味著文檔不能訪問(wèn)其他源的 cookie 或任何其他存儲(chǔ)機(jī)制( DOM 存儲(chǔ)、索引數(shù)據(jù)庫(kù)等)中的數(shù)據(jù)。
框架文檔不能創(chuàng)建新窗口或?qū)υ捒?例如，通過(guò) window.open 或 target="_blank")。
表單不能提交。
插件不會(huì)被加載。
框架文檔只能導(dǎo)航自己，而不能導(dǎo)航其頂級(jí)父文檔。設(shè)置 window.top.location 將拋出一個(gè)異常，點(diǎn)擊帶有 target="_top"的鏈接將不起作用。
自動(dòng)觸發(fā)的功能(自動(dòng)聚焦的表單元素、自動(dòng)播放視頻等)將被阻止。
無(wú)法獲得 Pointer lock。
該框架文檔包含的 iframes 上忽略 seamless 屬性。

文件被加載到一個(gè)完全沙箱化的 iframe 中，帶來(lái)的風(fēng)險(xiǎn)非常小，但這是十分苛刻的。當(dāng)然，這樣做也沒(méi)有太大的價(jià)值：對(duì)于一些靜態(tài)內(nèi)容，可以使用一個(gè)完整的沙箱，但大多數(shù)情況下，可以放寬松一些。

除了插件之外，這些限制都可以通過(guò)向 sandbox 屬性的值添加一個(gè)標(biāo)志來(lái)解除。沙箱化的文件是不能運(yùn)行插件的，因?yàn)椴寮创a未被沙箱化，除此之外其他的都一樣：

「allow-forms」 允許提交表單。
「allow-popups」 允許(window.open(), showModalDialog(), target="_blank" 等)彈出。
「allow-pointer-lock」 允許鼠標(biāo)指針鎖住.
「allow-same-origin」 允許文檔維持源；加載自 https://example.com/ 的頁(yè)面將保留對(duì)該源數(shù)據(jù)的訪問(wèn)權(quán)。
「allow-scripts」 允許 JavaScript 執(zhí)行，也允許特性自動(dòng)觸發(fā)(因?yàn)橥ㄟ^(guò) JavaScript 實(shí)現(xiàn)這些特性是瑣碎的)。
「allow-top-navigation」 允許文檔通過(guò)導(dǎo)航頂級(jí)窗口跳出框架。

由此，我們可以準(zhǔn)確地知道為什么我們?cè)谏厦娴?Twitter 例子中使用了一組特定的沙箱標(biāo)志：

「allow-scripts」 是必須的，因?yàn)楫?dāng)頁(yè)面加載到框架時(shí)，需要執(zhí)行 JavaScript 來(lái)處理用戶交互。
「allow-popups」 是必須的，因?yàn)榘粹o需要在新窗口彈出表單。
「allow-forms」 是必須的，因?yàn)楸韱蝺?nèi)容需要提交。
「allow-same-origin」 是必須的，否則 twitter.com 的 cookies 將無(wú)法訪問(wèn)，用戶無(wú)法登錄發(fā)布表單。

需要注意的重要一點(diǎn)是，應(yīng)用于框架的沙箱標(biāo)記也適用于在沙箱中創(chuàng)建的任何窗口或框架。這意味著我們必須將 「allow-forms」 添加到框架的沙箱中，即使表單只存在于框架彈出的窗口中。

有了 sandbox 屬性后，組件只獲得所需的權(quán)限，插件、頂部導(dǎo)航和 pointer lock 等功能仍然被禁用。我們降低了嵌入組件的風(fēng)險(xiǎn)，且沒(méi)有產(chǎn)生不良影響。

分離權(quán)限

為了在低權(quán)限環(huán)境中運(yùn)行不受信任的代碼，對(duì)第三方內(nèi)容進(jìn)行沙箱化是非常有益的。但對(duì)于你自己的代碼呢？你肯定相信自己，那為什么還擔(dān)心沙箱化呢？

試問(wèn)一下：如果你的代碼不需要插件，為什么給它插件的權(quán)限？最好的情況，你不會(huì)用到這個(gè)權(quán)限；但最壞的情況，對(duì)于攻擊者來(lái)說(shuō)，這給了攻擊者一個(gè)可乘之機(jī)。每個(gè)人的代碼都有 bug，幾乎每個(gè)應(yīng)用程序都容易受到各式各樣的攻擊。代碼沙箱化意味著即使一個(gè)攻擊者成功的破壞你的應(yīng)用，他們也不會(huì)被賦予對(duì)你應(yīng)用程序 「完整」 的訪問(wèn)權(quán)；他們只能夠做應(yīng)用程序可以做的事情。雖然這樣已經(jīng)很糟糕，但還沒(méi)到糟糕透頂?shù)某潭取?/p>

你可以通過(guò)將應(yīng)用程序拆分成邏輯塊，并使用盡可能少的特權(quán)對(duì)每個(gè)塊進(jìn)行沙箱化，以達(dá)到進(jìn)一步減少危險(xiǎn)的目的。這個(gè)方法在源碼中很常見(jiàn)：例如 Chrome，將自己分解為一個(gè)高權(quán)限的瀏覽器進(jìn)程，用于訪問(wèn)本地硬盤和網(wǎng)絡(luò)連接；以及許多低權(quán)限的呈現(xiàn)進(jìn)程，用于負(fù)責(zé)解析不受信任的內(nèi)容。屬于低權(quán)限的渲染器不需要接觸磁盤，瀏覽器會(huì)提供渲染頁(yè)面所需的所有信息。即使黑客找到了破壞渲染器的方法，也不會(huì)有什么進(jìn)展，因?yàn)樗懈邫?quán)限訪問(wèn)都必須通過(guò)瀏覽器的進(jìn)程路由。攻擊者須在系統(tǒng)的不同部分找出漏洞，才可進(jìn)行破壞，這樣做就大大降低了風(fēng)險(xiǎn)。

安全的沙箱：eval() 方法

通過(guò)沙箱和 postMessage API，這個(gè)模型可以成功的應(yīng)用到 web 上。應(yīng)用程序的各個(gè)部分可以放置在沙箱化的 iframe 中，父文檔可以通過(guò)發(fā)布消息和偵聽(tīng)響應(yīng)使各個(gè)部分之間通信。

Evalbox 可以將字符串解析成 JavaScript 代碼。而這就是你一直期待的。當(dāng)然，這是一個(gè)相當(dāng)危險(xiǎn)的應(yīng)用程序，因?yàn)樵试S任意的 JavaScript 執(zhí)行意味著源提供的任何數(shù)據(jù)都是可獲取的。我們通過(guò)確保代碼在沙箱中執(zhí)行來(lái)降低風(fēng)險(xiǎn)，從框架的內(nèi)容開(kāi)始，從內(nèi)到外完成代碼：

Evalbox's Frame

在框架內(nèi)部，我們有一個(gè)最小的文檔，它通過(guò)連接到 window 對(duì)象的 message 事件來(lái)偵聽(tīng)來(lái)自其父對(duì)象的消息。每當(dāng)父進(jìn)程對(duì) iframe 的內(nèi)容執(zhí)行 postMessage 時(shí)，這個(gè)事件就會(huì)觸發(fā)，然后執(zhí)行父進(jìn)程希望我們執(zhí)行的字符串。

在處理程序中，用父窗口獲取事件的 source 屬性。一旦我們完成工作，就用它發(fā)送結(jié)果。然后，將數(shù)據(jù)傳遞給 eval() 來(lái)完成繁重的工作。這個(gè)調(diào)用包括在 try 塊中，因?yàn)樵谏诚浠?iframe 中禁止的操作經(jīng)常會(huì)生成 DOM 異常；我們將捕獲它們并報(bào)告一個(gè)友好的錯(cuò)誤消息。最后，我們將結(jié)果發(fā)布回父窗口。整個(gè)過(guò)程是很簡(jiǎn)單的。

父類也同樣簡(jiǎn)單。我們會(huì)創(chuàng)建一個(gè)小的 UI 層，代碼有一個(gè) textarea，和一個(gè)可執(zhí)行的 button，我們會(huì)通過(guò)一個(gè)只允許執(zhí)行腳本的沙箱 iframe 嵌入到 frame.html：

eval() in a sandboxed frame.

現(xiàn)在來(lái)寫一個(gè)方法執(zhí)行吧。首先，利用 window.addEventListener 偵聽(tīng)來(lái)自iframe 和 alert() 的響應(yīng)。一個(gè)真正的應(yīng)用程序應(yīng)該簡(jiǎn)潔明確：

window.addEventListener('message', function (e) { // iframe 的 sandbox 屬性值不為“allow-same-origin”時(shí)， // 嵌入內(nèi)容的來(lái)源將被視為一個(gè)null而不是有效來(lái)源。 // 這意味著你必須小心那些通過(guò) API 接收的數(shù)據(jù)。 // 這種情況下，你需要檢查源，并驗(yàn)證輸入。 var frame = document.getElementById('sandboxed'); if (e.origin === "null" && e.source === frame.contentWindow) alert('Result: ' + e.data); });

接著，我們?cè)?按鈕上掛載一個(gè)單擊事件。當(dāng)用戶點(diǎn)擊時(shí)，我們會(huì)抓取 textarea 的內(nèi)容，并將其傳遞到 iframe 中執(zhí)行:

function evaluate() { var frame = document.getElementById('sandboxed'); var code = document.getElementById('code').value; // 注意，我們正發(fā)送信息給“*”，而不是特定源。 // iframe 的 sandbox 屬性值不為“allow-same-origin”時(shí)， // 發(fā)送的信息就沒(méi)有目標(biāo)源，這就會(huì)導(dǎo)致一些不尋常的攻擊。 // 所以你必須要校驗(yàn)?zāi)愕妮敵?#xff01; frame.contentWindow.postMessage(code, '*');}document.getElementById('safe').addEventListener('click', evaluate);

是不是很簡(jiǎn)單？我們寫了一個(gè)簡(jiǎn)單的評(píng)估 API，同時(shí)確保被評(píng)估的代碼不會(huì)訪問(wèn)敏感信息，比如 cookie 或 DOM 存儲(chǔ)。同樣，被評(píng)估的代碼也不能加載插件，彈出新窗口，或者其他一些糟糕的惡意行為。

在這里檢查一下你自己的代碼：

Evalbox Demo
index.html
frame.html

你可以把程序解構(gòu)為單一用途的組件，然后對(duì)自己的代碼執(zhí)行評(píng)估操作。就像上面代碼所示，每個(gè)組件都可以封裝在一個(gè)簡(jiǎn)單的消息傳遞 API 中。高權(quán)限父窗口可以充當(dāng)控制器和調(diào)度程序，將消息發(fā)送到每個(gè)模塊中，而模塊只擁有完成工作的最少特權(quán)。我們只要偵聽(tīng)結(jié)果，并確保每個(gè)模塊只獲得所需的信息就可以了。

但是請(qǐng)注意，你需要非常小心的處理來(lái)自與父元素相同源的框架內(nèi)容。如果 https://example.com/ 上的某個(gè)頁(yè)面構(gòu)建了同源的另一個(gè)頁(yè)面(這個(gè)頁(yè)面的 sandbox 只包括 「allow-same-origin」 和 「allow-scripts」)，那么被構(gòu)建頁(yè)面的權(quán)限可以向上達(dá)到父頁(yè)面，并完全刪除沙箱屬性。

你該如何使用沙箱

你可以在各種瀏覽器中使用沙箱，例如 Firefox 17+、IE10+ 和 Chrome。也可以根據(jù) 最新的支持表查看是否可以使用。在 iframes 中使用 sandbox 屬性，允許你授予 「僅」 保證內(nèi)容正常運(yùn)行的特權(quán)。超出了內(nèi)容安全策略所能提供的安全范圍。

此外，沙箱非常強(qiáng)大，可以降低攻擊者巧妙利用你代碼中漏洞的風(fēng)險(xiǎn)。通過(guò)將單個(gè)應(yīng)用程序分離到一組沙箱服務(wù)中，每個(gè)沙箱服務(wù)只負(fù)責(zé)一小塊自己的功能。這樣做攻擊者除了要破壞特定的構(gòu)建內(nèi)容，還要破壞它們的控制器。這樣做很困難，特別是因?yàn)榭刂破鞯淖饔糜蚩梢源蟠鬁p少。如果你請(qǐng)求瀏覽器幫助你完成剩下的工作，那么你可以多做審核 「這種」 代碼的工作。

這并不是說(shuō)沙盒是互聯(lián)網(wǎng)安全問(wèn)題的完整解決方案。它提供了深度防御，但是除非你能夠控制用戶的客戶端，否則不要依賴于瀏覽器支持(如果你真的控制了比如企業(yè)環(huán)境這種的用戶客戶端，那是最理想的)。現(xiàn)在沙盒是被用來(lái)加強(qiáng)防御的另一層保護(hù)，但這不是能完全依賴的防御。盡管如此，我還是建議使用它。

進(jìn)一步了解

你可以在各種瀏覽器中使用沙箱，例如 Firefox 17+、IE10+ 和 Chrome。也可以根據(jù) 最新的支持表查看是否可以使用。在 iframes 中使用 sandbox 屬性，允許你授予 「僅」 保證內(nèi)容正常運(yùn)行的特權(quán)。這幫你大大減少了第三方內(nèi)容風(fēng)險(xiǎn)，甚至超出了內(nèi)容安全策略所能提供的安全范圍。

"HTML5 應(yīng)用中的權(quán)限分離" 是一篇有趣的文章，講述了一個(gè)小框架的設(shè)計(jì)，以及它在三個(gè) HTML5 app 中的應(yīng)用。
當(dāng)沙箱結(jié)合兩個(gè)新的 iframe 屬性時(shí)，可以更加靈活：srcdoc 和 seamless。前者允許您用內(nèi)容填充框架，而不需要 HTTP 請(qǐng)求的開(kāi)銷，后者允許樣式應(yīng)用到框架內(nèi)容中。兩者目前瀏覽器的支持度不高(只有 Chrome 和 WebKit nightlies)。但這將是未來(lái)一個(gè)有趣的組合。例如，你可以通過(guò)以下代碼對(duì)一篇文章進(jìn)行沙盒注釋:

生活随笔