W3C HTML5标准阅读笔记 - iframe元素

标准原文:https://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element

HTML5中,iframe标签用于在当前页面中内嵌别的网页。按照标准的叙述,iframe会提供一个“内嵌浏览环境(nested browsing context)”。iframe中的“i”一般解释为“inline”,也即内联元素 -- iframe标签默认和其外部的文本内容一起位于同一行中显示。

不过,与早期web开发中的frame和frameset元素相比,个人认为iframe中的“i”还有一层“independent”的意思 -- iframe在页面中是可以独立使用的,其灵活性比frame/frameset要好很多。

除了通用属性,iframe元素还拥有一些别的特有属性,用以定义内嵌网页的各种行为。

src、srcdoc

src和srcdoc用于定义内嵌网页的来源。src属性为该内嵌网页的地址,其值为非空URL;而srcdoc则表示内嵌网页的具体内容,其值为合法的HTML文档片段。当src与srcdoc同时出现时,优先采用srcdoc的值;而当src与srcdoc均缺失,或均无法解析时,浏览器将在iframe标签所在区域显示空白 -- iframe初始化时会创建一个about:blank空白文档,随后才根据src/srcdoc来创建相应的文档对象。

当srcdoc存在,且srcdoc属性发生改变时,浏览器将重新解析处理iframe标签;同样,当srcdoc不存在而src存在,且src属性发生改变时,浏览器亦将重新解析处理iframe标签。

name

name属性用于定义当前iframe内嵌浏览环境的名称,若name属性缺失,则该内嵌浏览环境的名称为空字符串。

sandbox

sandbox属性用于定义内嵌浏览环境的安全策略,也即对内嵌的HTML内容与行为进行限制,从而保证页面浏览的安全性。

当sandbox属性不存在时,iframe不定义任何安全策略,也即iframe中的内嵌网页拥有所有的权限。当sandbox属性存在,但没有属性值,或属性值为空字符串时,则iframe定义最高的安全策略,也即iframe中的内嵌网页没有任何权限。当sandbox属性存在,且有属性值时,其属性值应为以空格分隔的一系列关键词的列表。这些关键词有:

  • allow-same-origin。当iframe元素不具有该权限时,iframe元素的内嵌网页将被赋予一个全新的域(domain)。比如,当外部网页的域为example.com而内嵌网页也来自example.com服务器时,内嵌网页的域并不是example.com,而是一个专属于自己的全新的域;而当外部网页的域为example.com而内嵌网页来自于example2.com时,内嵌网页的域依旧是一个专属于自己的域,与example.com和example2.com无关。

    当iframe元素具有allow-same-origin权限时,iframe元素的内嵌网页的域将被设定为与其来源相同。依旧以上面的例子为例,当外部网页的域为example.com而内嵌网页也来自example.com服务器时,内嵌网页的域为example.com,也即与外部网页同源;而当外部网页的域为example.com而内嵌网页来自于example2.com时,内嵌网页的域为example2.com。

  • allow-top-navigation。当iframe元素具有此权限时,内嵌网页将有能力对外部网页中的元素进行链接。

  • allow-form。允许内嵌网页中的表单可以提交。

  • allow-pointer-lock。允许内嵌网页对鼠标进行捕获 -- 当内嵌网页中出现3D游戏或者建模等功能时,此权限会比较有用。

  • allow-scripts。允许内嵌网页中的脚本执行。值得注意的是,当内嵌网页与外部网页来源一致时,同时设定allow-same-origin和allow-scripts将会是一件比较危险的事情,因为这等价于对iframe不设置任何安全策略 -- 由于同源且可执行脚本,内嵌网页中的脚本将有权对iframe标签中的sandbox属性做任何修改。

  • allow-popups。允许内嵌网页可以弹出窗口(alert)。

对于sandbox属性,标准不建议用脚本来动态的改变它的值,这会使最终生效的安全策略变得复杂而又难以解释。同时,仅从工程设计的角度来说,动态的改变安全策略这一做法本身就是不安全的。

width、height

width与height属性用于设定iframe区域的宽和高。默认情况下,浏览器会给iframe区域的四周添加一个内凹的边框效果,不过web开发人员可以通过定义CSS来改变这一默认样式。