script標簽引入檔案
在html中，script標簽可以通過src屬性引入一個js檔案，引入的js檔案可以是本地的，也可以是遠程的，
1. 引入本地檔案
開發環境一般多引入本地js檔案，
<script src="./js/index.js"></script>
2. 引入遠程檔案
部署到線上后，一般會分發到cdn，需要引入遠程檔案，形如：
<script src="https://cdn.xxx.xx/js/index.js"></script>
只是引入遠程檔案存在一個問題，如果對應的檔案被篡改了，那么可能會對用戶造成影響，雖然cdn一般都是可靠的，但是不排除受到黑客的攻擊，
在這種情況下，可以通過script標簽的屬性 integrity 來進行安全驗證，
integrity安全驗證
integrity屬性設定引入js檔案的hash值，瀏覽器在下載js檔案時候，會對js檔案進行hash計算，如果一致則正常加載，否則拒絕加載運行，
形如：
<script
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
src="https://cdn.xxx.xx/js/index.js"></script>
還是來個示例看看，
1. 引入vue的cdn資源
例如我們要引入vue的cdn資源：
https://unpkg.com/vue@3.0.5/dist/vue.global.js
可以通過 https://www.srihash.org/ 生成hash值，
最后將 integrity 的值添加到script標簽即可，
<script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"
integrity="sha384-0k9//QJdpmfSdp5IK3oJjOYPfz42f2FE0goMLtK9Vq7aKllvc4Lnz7lHPHiFhvDP"
crossorigin="anonymous">
</script>
2. 驗證是否正常
因為引入的是cdn資源，無法直接修改，但是修改 integrity 的值，如果修改了 integrity 的值，最終瀏覽器會報如下錯誤：
Failed to find a valid digest in the 'integrity' attribute for resource 'https://unpkg.com/vue@3.0.5/dist/vue.global.js' with computed SHA-256 integrity 'Wr5PnkpmZ3oQFRZLfDrI6fsePSMak5h8rW2rqq+mdWg='. The resource has been blocked.
意思就是cdn檔案的hash值和 integrity 的不匹配，
參考資料
Subresource Integrity：https://developer.mozilla.org/zh-CN/docs/Web/Security/Subresource_Integrity
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/347064.html
標籤：其他