當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

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

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

作者：Huup_We

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

前言

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

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

最小特權(quán)

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

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

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

先去除，再校驗

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

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

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

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

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

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

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

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

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

除了插件之外，這些限制都可以通過向 sandbox 屬性的值添加一個標志來解除。沙箱化的文件是不能運行插件的，因為插件源碼未被沙箱化，除此之外其他的都一樣：

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

由此，我們可以準確地知道為什么我們在上面的 Twitter 例子中使用了一組特定的沙箱標志：

「allow-scripts」 是必須的，因為當頁面加載到框架時，需要執(zhí)行 JavaScript 來處理用戶交互。
「allow-popups」 是必須的，因為按鈕需要在新窗口彈出表單。
「allow-forms」 是必須的，因為表單內(nèi)容需要提交。
「allow-same-origin」 是必須的，否則 twitter.com 的 cookies 將無法訪問，用戶無法登錄發(fā)布表單。

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

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

分離權(quán)限

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

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

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

安全的沙箱：eval() 方法

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

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

Evalbox's Frame

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

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

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

eval() in a sandboxed frame.

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

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

接著，我們在按鈕上掛載一個單擊事件。當用戶點擊時，我們會抓取 textarea 的內(nèi)容，并將其傳遞到 iframe 中執(zhí)行:

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

是不是很簡單？我們寫了一個簡單的評估 API，同時確保被評估的代碼不會訪問敏感信息，比如 cookie 或 DOM 存儲。同樣，被評估的代碼也不能加載插件，彈出新窗口，或者其他一些糟糕的惡意行為。

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

Evalbox Demo
index.html
frame.html

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

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

你該如何使用沙箱

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

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

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

進一步了解

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

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

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

生活随笔