添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

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>