保護您的 CDN：為什麼要以及如何使用 SRI
Terence Eden
閱讀時間 4 分鐘
在您的網站上使用第三方 JavaScript 庫或外部 CSS 變得前所未有地容易。您只需要在 HTML 的 <head> 部分包含 <script src="https://example.com/whatever.js">，就大功告成了，對嗎？找到一些看起來很酷的 CSS？透過 <link rel="stylesheet" href="..."> 將其融入您的網站。
有什麼可能出錯？結果證明，很多事情都可能出錯。在這篇文章中，我將解釋新增第三方資源的潛在安全隱患，以及如何保護您的網站及其使用者。
依賴 CDN 的問題
內容分發網路 (CDN) 是一組伺服器，通常分佈在世界各地，有助於加速您網站上的內容。您無需將流行庫包含在自己的伺服器上，而是可以告訴訪問者從離他們最近的 CDN 伺服器載入它。這可以加快您的頁面載入速度。
然而，也有其弊端。當您從網站外部載入服務時，您就將對您的網站的完全控制權交給了別人！您可能認為您只是在匯入一些令人印象深刻的 JavaScript，在使用者點選您網站上的連結時顯示閃光效果——但該庫可能被惡意攻擊者接管。如果發生這種情況，您網站的訪問者可能會被劫持。如果 CSS 被接管，您的訪問者可能會遇到各種可怕的影像。
您如何避免此類悲劇？
什麼是 SRI 以及它如何解決這個問題
這就是“子資源完整性”（SubResource Integrity）的發明原因。這個名字有點拗口，所以我們簡稱它為 SRI。SRI 允許您說：“我想要匯入程式碼的特定版本，即使其中一個位元組發生變化，也不要執行它。”
當您使用 SRI 時，您就是在保護您的網站和使用者免受程式碼洩露的侵害。即使心懷惡意的人攻擊託管第三方程式碼的伺服器，他們也**無法**接管您的網站。是不是很酷？
如何使用 SRI
讓我們看看 SRI 是如何工作的。假設您想在您的網站上包含 jQuery。這是您可以使用 SRI 程式碼
<script
src="https://code.jquery.com/jquery-3.7.0.slim.min.js"
crossorigin="anonymous"></script>
對於 CSS，情況也差不多
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/picnic"
crossorigin="anonymous" />
您會注意到，與普通的 <script> 或 <link> 元素相比，新增了兩個屬性。它們是 crossorigin 和 integrity。
crossorigin 屬性比較容易解釋。此屬性告訴瀏覽器匿名地從伺服器請求資源。不會向伺服器傳送使用者名稱、密碼或其他標識資訊。
integrity 屬性稍微複雜一些。它包含一個數學表示——稱為“雜湊”——您請求的程式碼。第一部分 sha384 表明使用的演算法是 SHA384。這告訴瀏覽器使用該演算法分析正在請求的程式碼。這將生成一長串字元。如果遠端網站上的程式碼發生更改，SHA384 函式將生成一個雜湊，該雜湊**不**匹配 integrity 值的第二部分。
簡而言之，如果遠端伺服器上的程式碼發生更改，您的瀏覽器將拒絕執行它。
如何獲取 SRI 雜湊
大多數庫會告訴您 SRI 雜湊是什麼，您只需複製貼上即可。如果網站沒有提供雜湊，您可以自己計算。最簡單的方法是使用 SRI 雜湊生成器。貼上程式碼的 URL，它會快速輸出您可以使用雜湊。
使用 SRI 的侷限性
當然，使用 SRI 也有一些缺點。因為 SHA384 雜湊要求原始檔案保持不變，所以您必須指定您想要的檔案版本。您無法同時使用 SRI 並始終獲取最新版本的庫。您必須做出選擇——是保持網站安全，還是始終擁有最新功能。
如果遠端網站被洩露，惡意檔案替換了您正在使用的庫，會發生什麼？瀏覽器將拒絕執行它。如果關鍵的 JavaScript 庫不可用，您的網站還會正常執行嗎？如果不行，您的使用者將面臨一個損壞的網站。這可能比一個危害使用者安全的惡意網站要好。但您應該使用 漸進增強 來確保您的網站即使在 JavaScript 和 CSS 丟失的情況下也能正常工作。
值得慶幸的是，SRI 自 2016 年以來已在所有現代網頁瀏覽器中可用。舊版瀏覽器將忽略 crossorigin 和 integrity 屬性，如果您使用的庫被洩露，這可能會讓舊版瀏覽器的使用者面臨風險。
總結
SRI 是您防禦第三方 JavaScript 和 CSS 被洩露的最佳手段。它易於使用，但如果確實出現問題，您需要確保您的網站在沒有外部資源的情況下也能正常執行。
有用資源
- MDN 上的子資源完整性
- MDN 上的跨域資源共享 (CORS)
- MDN 上的數字簽名
- 維基百科上的雜湊工作原理