使用SRI保護你的網站免受第三方CDN惡意攻擊

出於速度和下降服務器負載考慮，有時候咱們會選擇使用 CDN 加載第三方靜態資源。對於一些熱門的第三方庫，在用戶打開你的網頁以前就頗有可能在瀏覽別的網站時被瀏覽器緩存下來，這樣就能夠極大的提高網頁加載速度。

然而使用 CDN 也提升了網站的安全風險：第三方靜態資源放在第三方服務器上，CDN 的擁有者有沒有可能偷偷的篡改這些文件，加入惡意代碼呢？或者 CDN 服務器遭受了黑客攻擊，整個文件被替換掉。雖然可能性不高，但不是零。JavaScript 對於當前瀏覽器頁面有徹底控制權，他們不單單能獲取到頁面上的任何內容，還能抓取用戶輸入的一些諸如密碼之類的機密信息，還能獲取到保存到 Cookie 中的登陸票據等等內容，這就是所謂的 XSS 攻擊。

咱們須要一種機制確保從 CDN 下載的文件未被惡意篡改。某些下載網站就提供下載文件的 MD5 或 SHA1 碼用於檢查所下載文件的完整性，網頁中有沒有相似的機制呢？

什麼是 SRI

子資源完整性 Subresource Integrity 簡稱 SRI 是一種安全機制，它用於讓瀏覽器檢查所下載的來自第三方的資源（例如 CDN）未被惡意篡改。它使用哈希值檢查確保第三方資源的完整性。只要開發者提供了被需下載資源的哈希值，瀏覽器就能夠檢查實際下載的文件是否與預期的哈希值匹配。

使用 SRI

只需給 script 或 style 標籤添加 integrity 屬性便可。例如：

• JavaScript

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>

• CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" integrity="sha384-7tIwW4quYS2+TZCwuAPnUY+dRqg28ylzlIoVXAwpfiTs+CMKsAOSsWYQ96c/ZnV+" crossorigin="anonymous">

integrity 屬性值以 shaXXX- 開頭，表示後面的哈希值使用的哈希算法，目前只容許 sha256、sha384 或 sha512 這三種哈希算法，以 sha384 比較多見。後面跟對應的哈希值便可。

值得注意的是，由於啓用 SRI 須要獲取所下載文件的內容進行計算，因此須要 CDN 服務器啓用跨域資源訪問（CORS）支持，即返回 Access-Control-Allow-Origin: * 頭。客戶端須要使用跨域的形式加載指定文件，即添加 crossorigin="anonymous" 屬性。就我所知，目前國內相對經常使用的免費 CDN bootcdn 已經支持 CORS，百度靜態 CDN 還不支持。

瀏覽器如何處理 SRI

1. 當瀏覽器遇到一個帶有 integrity 的 script 或 style 標籤，在執行其中的 JS 腳本或應用其中的 CSS 樣式以前，瀏覽器會首先計算所下載文件的內容的哈希值是否與 integrity 屬性給定的值相同。
2. 若是計算結果與給定值不匹配，瀏覽器會拒絕執行腳本內容，並報出一個網絡錯誤，相似以下結果：

Failed to find a valid digest in the 'integrity' attribute for resource 'https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css' with computed SHA-256 integrity 'VbcxqgMGQYm3q8qZMd63uETHXXZkqs7ME1bEvAY1xK8='. The resource has been blocked.

如何計算哈希值

這是 SRI 標準文檔提供的例子：

$ echo -n "alert('Hello, world.');" | openssl dgst -sha384 -binary | openssl base64 -A

使用了 OpenSSL 這個 *nix 中一般都包含的工具計算哈希值。其中 alert('Hello, world.'); 是文件內容，你也能夠用 cat Filename.js 直接讀取某個文件。

輸出 H8BRh8j48O9oYatfu5AZzq6A9RINhZO5H16dQZngK7T62em8MUt1FLm52t+eX6xO，在此基礎上添加前綴 sha384- 就能夠了。

網上也有現成的 SRI 哈希值生成器，方便好用：https://srihash.org/

CSP 與 SRI

你可使用 內容安全政策 （CSP）強制要求當前頁面全部腳本加載標籤啓用 SRI。例如

Content-Security-Policy: require-sri-for script;

強制要求全部 script 標籤啓用 SRI，瀏覽器會拒絕加載未啓用 SRI 的 script 標籤。

對應的還有 CSS 版本：

Content-Security-Policy: require-sri-for style;

你也能夠同時啓用二者。

錯誤恢復

使用 CDN 時別忘了當嘗試從 CDN 加載文件失敗後加載本地版本：

<script src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f"
        crossorigin="anonymous"></script>
<script>if (!window.jQuery) document.write('<script src="/jquery-3.2.1.min.js"><\/script>')</script>

完