问题
在项目中碰到加载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.com和https://xxx.xxx.com网址中允许使用accelerometer属性。