Javascript中integrity属性安全验证

1、报错 关于integrity属性

报错如下：

Failed to find a valid digest in the ‘integrity’ attribute for
resource ‘https://apollo2.aimsen.com/app.js’ with
computed SHA-384 integrity
‘zWlxgCEUyQjYCtykeexDkvIk5d2N5QjXRMajgY44tMBMob/jO+8IHWMRrZu6g1dp’.
The resource has been blocked.

原因：

// 部署到线上后，一般会分发到cdn，需要引入远程文件;
如：<script src="https://cdn.xxx.xx/js/index.js"></script>

只是引入远程文件存在一个问题，如果对应的文件被篡改了，那么可能会对用户造成影响。虽然cdn一般都是可靠的，但是不排除受到黑客的攻击。
在这种情况下，可以通过script标签的属性 integrity 来进行安全验证。

1
2
3
4
5
6

2、integrity安全验证

integrity属性设置引入js文件的hash值，浏览器在下载js文件时候，
会对js文件进行hash计算，如果一致则正常加载，否则拒绝加载运行。
1
2

<script
    integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
    src="https://cdn.xxx.xx/js/index.js">
</script>
1
2
3
4

如何获得hash值

可以通过网站生成hash值。

链接: srihash

直接将代码拷贝至代码引用到的地方即可。

可能会遇到

是表示integrity不对， cdn文件的hash值和 integrity 的不匹配。
需用上述获取hash值模块即可。

参考文章： https://www.jb51.net/article/227358.htm