前端验证子资源完整性 (SRI)

Subresource Integrity 是一项安全功能,可让浏览器验证其抓取的文件的哈希值,以确认安全,有效防止中间人攻击。

我们来试验一下,写如下两个 script 标签。运行后浏览器会弹窗,一切正常。

<script src="./hello.js"></script>  
alert('Congratulations! Hash Verified.')  

我们试着给资源随便加上一个错误的 SRI,如下。运行后,浏览器不会弹窗,并且控制台会报错:Failed to find a valid digest in the 'integrity' attribute for resource 'hello.js' with computed SHA-256 integrity 'yP+icQv0rkwUuvAEjjDRQTM6m8w4aQ936YZEuRrUFzI='. The resource has been blocked.

<script  
  src="./hello.js"
  integrity="sha384-lljDDPT2N8y39RmxV0B+qemhTBD8tZL1htDJn14mXP7EvAPiiv8rjNhg3ZFc5XaL"
></script>

我们可以用 openssl 生成某个文件的 Hash,非常方便。注意 integrity 属性必须在 Base64 之前加上 Hash 类型,比如 sha384-xxxx... 这样,否则浏览器只是在控制台报错提示 integrity 的值不合法,但不会验证文件哈希值且该文件依然能正常加载。

cat hello.js | openssl dgst -sha384 -binary | openssl enc -base64 -A

// RenGlKfD/k9qWjsAD6vt7nfBC7GNwch1UuXoxjg61CWXoZIo4xcAhwLRHuFKhQvC%