使用 CDN 載入資源時請記得加 Integrity

http browser - 2022-06-27

在 script 標籤上加入 integrity integrity 的值是以一個特定的 hash 算法(sha256、sha384或sha512)名稱為前綴，後接一個破折號，並加上 base64 編碼的哈希值。

例如，

<script src="https://example.com/example-framework.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>

Why

越來越多時候，網頁會將共用的資源，如 js 或 css 設為由 CDN 取得，來加快或節省網路流量。但 CDN 畢竟不是本地資源，也有可能被竄改。這時候，如何確保下載的是你原來需要的資源就是一個重要議題。

What

CDN: CDN Content Delivery Network(內容交付網絡)簡稱 CDN。是以一組分佈在許多不同位置上的服務器。而服務器存儲請求數據的副本，並依據離最終用戶最近的服務器來回應請求。
Subresource_Integrity: Subresource Integrity 簡稱 SRI，是瀏覽器驗證獲取資源是否沒有問題的安全設定。通過獲取的資源必須吻合其 hash。

How

當瀏覽器在下列標籤中

<script>
<link>

有 integrity 屬性時，瀏覽器必須先將取得內容進行 hash 並與 integrity 值給出的 hash 進行比較。如果兩者不匹配，瀏覽器必須拒絕執行，並且必須返回一個網絡錯誤，指示該獲取失敗。