Javascript如何使用integrity屬性進(jìn)行安全驗(yàn)證

Javascript如何使用integrity屬性進(jìn)行安全驗(yàn)證，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

一、script標(biāo)簽引入文件

在html中，script標(biāo)簽可以通過src屬性引入一個(gè)js文件，引入的js文件可以是本地的，也可以是遠(yuǎn)程的。

1. 引入本地文件

開發(fā)環(huán)境一般多引入本地js文件。

<script src="./js/index.js"></script>
2. 引入遠(yuǎn)程文件

部署到線上后，一般會(huì)分發(fā)到cdn，需要引入遠(yuǎn)程文件，形如：

<script src="https://cdn.xxx.xx/js/index.js"></script>
只是引入遠(yuǎn)程文件存在一個(gè)問題，如果對(duì)應(yīng)的文件被篡改了，那么可能會(huì)對(duì)用戶造成影響。雖然cdn一般都是可靠的，但是不排除受到黑客的攻擊。

在這種情況下，可以通過script標(biāo)簽的屬性 integrity 來進(jìn)行安全驗(yàn)證。

integrity安全驗(yàn)證
integrity屬性設(shè)置引入js文件的hash值，瀏覽器在下載js文件時(shí)候，會(huì)對(duì)js文件進(jìn)行hash計(jì)算，如果一致則正常加載，否則拒絕加載運(yùn)行。

形如：

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

二、示例

3. 引入vue的cdn資源

例如我們要引入vue的cdn資源：

https://unpkg.com/vue@3.0.5/dist/vue.global.js

可以通過 https://www.srihash.org/ 生成hash值。

integrity生成hash值
integrity生成hash值

最后將 integrity 的值添加到script標(biāo)簽即可。

<script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"
    integrity="sha384-0k9//QJdpmfSdp5IK3oJjOYPfz42f2FE0goMLtK9Vq7aKllvc4Lnz7lHPHiFhvDP"
    crossorigin="anonymous">
</script>

4. 驗(yàn)證是否正常

因?yàn)橐氲氖莄dn資源，無法直接修改，但是修改 integrity 的值，如果修改了 integrity 的值，最終瀏覽器會(huì)報(bào)如下錯(cuò)誤：

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 的不匹配。

關(guān)于Javascript如何使用integrity屬性進(jìn)行安全驗(yàn)證問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。