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设置为无缝,则应该确保内容的完整性,以免通过嵌入恶意网站将任何安全风险添加到您的网站。