iframe 这些属性你可能不知道

allow

配置iframe内的页面调用某些特殊api的权限。

比如之前在 iframe 内页面调用 navigator.clipboard.writeText 将文本写入系统的剪贴板，会报错，就需要在 iframe 上配置 allow="clipboard-read; clipboard-write" 属性后才能调用成功。

allow="autoplay" 允许内嵌页面自动播放
allow="camera; microphone" 运行页面访问摄像头，麦克风

所有的特性可参考 https://github.com/w3c/webappsec-permissions-policy/blob/main/features.md

完整的特性策略的书写规则是：feature origin; feature origin

比如

<iframe allow="clipboard-write '*'" src="https://qinshenxue.com" ></iframe>

origin 支持下列配置

• *：表示该特性在该文档下都是允许的，包括所有的嵌套的浏览内容(iframes),而不用管这些内容的源。
• self：表示该特性在该文档下都是允许的，并且仅在同源的情况下嵌套的浏览内容(iframes)才可以使用。
• src：(iframes的allow属性专用)表示该特性在这个iframe下允许使用，只要加载的文档来源的源和iframe的src属性指定的URL是同源的。
• none：表示该特性在顶层以及嵌套的浏览内容下都是被禁用的
• 多个：表示该特性只在一些指定的源下才允许使用，多个源使用空格隔开

allowfullscreen

配置后 iframe 内页面就可以调用 requestFullscreen() 激活浏览器的全屏，使得iframe内的页面能够全屏显示出来。

这个属性已经被重新定义为 allow="fullscreen"。

importance

表示 iframe 的 src 属性指定的资源的加载优先级。允许的值有：

• auto (default) 不指定优先级。浏览器根据自身情况决定资源的加载顺序
• high 资源的加载优先级较高
• low 资源的加载优先级较低

实测多个iframe配置不同的优先级和不配置加载基本一致，可能是浏览器未实现此特性。

referrerpolicy

表示在获取 iframe 资源时如何发送 referrer 首部：

• no-referrer-when-downgrade (default): 向不受 TLS (HTTPS) 保护的 origin 发送请求时，不发送 Referer 首部。
• no-referrer: 不发送 Referer 首部。
• origin
• origin-when-cross-origin
• same-origin: 对于 same origin（同源）请求，发送 referrer 首部，否则不发送。
• strict-origin
• strict-origin-when-cross-origin
• unsafe-url

sandbox

该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。属性值可以为空字符串（这种情况下会启用所有限制），也可以是用空格分隔的一系列指定的字符串。有效的值有：

• allow-scripts
• allow-forms
• allow-downloads-without-user-activation
• 更多参考 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe#attr-allow

<iframe src="https://qinshenxue.com"  sandbox=""></iframe>

配置空字符串会报错

<iframe src="https://qinshenxue.com"  sandbox="allow-scripts"></iframe>

配置 allow-scripts，点击链接会报错

srcdoc

该属性是一段 HTML 代码，这些代码会被渲染到 iframe 中。如果浏览器不支持 srcdoc 属性，则会渲染 src 属性表示的内容。

在 Chrome 下测试。

<iframe src="https://qinshenxue.com" srcdoc="<style>h1{color:red}</style><h1>测试</h1><script>console.log('test')</script>"></iframe>