Feature policy violation问题解决

问题

在项目中碰到加载js报Feature policy violation错误,没在网上搜到解决办法,看了一天文档终于解决了,此文用于记录大致解决思路。

背景

A域名在iframe中嵌入了B域名的网页,网页引用了C域名的js,导致报Feature policy violation错误。

Feature Policy

特征策略允许web开发者选择性地开启、关闭和修改浏览器的特征或API。比如可以控制手机中三方视频自动播放的行为,允许iframe使用全屏API等。

使用方式

  • Feature-Policy http头:在请求的html文件的response header里加入Feature-Policy用于控制
  • iframe中的allow属性

调试

// First, get the Feature Policy object
featurePolicy = $('iframe', parent.document).featurePolicy

// Then query feature for specific
allowlist = featurePolicy.getAllowlistForFeature("accelerometer")

for (const origin of allowlist) {
  console.log(origin)
}

解决办法

由于我们是使用Iframe,所以使用allow属性即可。

<iframe src="https://example.com..." allow="accelerometer 'src' https://xxx.xxx.com"></iframe>

上面的示例表示在src即https://example.comhttps://xxx.xxx.com网址中允许使用accelerometer属性。

参考文档

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容