IFRAME的內容,安全和設計屬性
該元素允許您將其他Web頁面直接嵌入到Web頁面中。 但是,當使用iframe時 ,有一些安全和設計問題在HTML 4.01中沒有解決。 HTML5為此元素提供了三個新屬性來幫助解決這些問題:
沙箱屬性
IFRAME元素的sandbox屬性是iframes非常有用的安全特性。 當您將其放置在IFRAME元素中時,您指示用戶代理不允許可能對網站及其用戶造成安全風險的功能。
例如:
告訴瀏覽器禁止可能存在安全風險的所有功能。 具體來說,插件是不允許的。 表單無法提交。 Sscripts不會運行,並且不允許在IFRAME之外的鏈接。 最後,不允許訪問同一域(原始)上的Cookie,本地存儲和其他頁面。
然後,使用沙箱關鍵字值,可以重新啟用某些功能。 這些關鍵字是:
- 允許表單 - 允許表單提交
- allow-same-origin -allow腳本可以訪問來自同一個源域的cookies等內容
- 允許腳本允許腳本在此IFRAME中運行
- allow-top-navigation-allow IFRAME鏈接和腳本到_top目標
在同一個IFRAME上同時設置allow-scripts和allow-same-origin關鍵字並不是一個好主意。 如果這樣做,嵌入式頁面可以完全刪除沙箱屬性,從而取消任何安全優勢。
srcdoc屬性
srcdoc屬性是一個屬性,它使Web設計者可以更好地控制iframe以及更高的安全性。 網頁設計師不用鏈接到不同網址的網頁,而是將要顯示在IFRAME中的HTML放入srcdoc屬性中。
起初,您可能會想:“這與將HTML正確放置在頁面中有什麼不同?”在某些方面,它並不是非常不同。
但是你必須記住IFRAME元素的一個功能,它將不受信任的數據與網站的其他部分分開。
通過將不受信任的源(如表單)創建的HTML放置到IFRAME中,您可以將不受信任的內容“沙箱化”,並將其顯示在頁面上。 博客評論就是一個例子。 大多數博客只有有限數量的HTML標籤評論者可以在他們的評論中使用。 但通過使用srcdoc屬性將這些註釋放入沙盒IFRAME中,註釋可以更加健壯,同時仍然保護整個網站。
安全和Iframes
上述兩個屬性為您的IFRAME元素提供安全性,但它們無法證明所有惡意網站。 如果惡意網站可以說服用戶直接訪問惡意內容(例如通過在瀏覽器中輸入網址),他們仍可能受到攻擊。
如果可能,最好將沙盒IFRAME中的內容設置為text / html-sandboxed MIME類型。
無縫的屬性
無縫屬性是一個布爾屬性,它告訴瀏覽器將IFRAME顯示為父文檔的一部分。 如果你想讓你的IFRAME無縫顯示,只需將該屬性包含在元素中:
但是使IFRAME無縫化不僅僅是外觀,也是頁面與框架交互的方式。 例如:
- 除非IFRAME頁面設置了目標_SELF,否則IFRAME中的鏈接將在父窗口中打開。
- IFRAME中的CSS將被添加到整個文檔的級聯中。
- IFRAME頁面的根元素被認為是IFRAME的子元素。
- IFRAME的寬度和高度的設置方式與設置其他塊級元素的方式相似。
- 當通過屏幕閱讀器等語音呈現工具查看父文檔時,IFRAME將被讀取而不會將其宣告為單獨的文檔。
- 父文檔上的任何腳本都會以相同的方式影響IFRAME文檔。 例如,如果一個腳本列出了頁面上的所有框架,IFRAME中的鏈接也將被列出。
換句話說,無縫屬性不僅僅是從IFRAME中刪除邊框。 如果您打算將IFRAME設置為無縫,則應該確保內容的完整性,以免通過嵌入惡意網站將任何安全風險添加到您的網站。