行銷與文件站仍大量採用手寫靜態 HTML:首屏快、稽核路徑清楚,並在搭配正確護欄時能在 CDN 異常時快速定位。在 2026 年,這些護欄指:為每個第三方 <script> 與 <link rel="stylesheet"> 寫入 子資源完整性(SRI) 中繼資料;在需要參與完整性校驗的跨域請求上使用顯式 crossorigin="anonymous";以及讓 Content-Security-Policy 與頁面真實載入內容一致。將指令碼層硬化與 面向靜態行銷 HTML 的 CSS @scope 元件隔離 結合,可避免樣式回退被誤判為供應鏈事件。
本文涵蓋失敗形態、數字預期與釋出順序:vendor 套件優先 SHA-384 摘要;上游靜默修補時每次釋出列車預留 15 分鐘 重算雜湊;在合規凍結前以日均約 $16.9 租用 Mac mini 完整預演回應頭堆疊。
靜態站為何仍需要 SRI
即便沒有伺服器端動態邏輯,被攻陷的 CDN 邊緣也可能改寫結帳頁 JavaScript 並外傳表單資料。SRI 讓瀏覽器拒絕執行與摘要不一致的位元組,把靜默供應鏈事件變成主控台可觀測的硬錯誤。沒有 SRI 的靜態 HTML 等同信任從 CI 到訪客之間路徑上的每一個快取層。
受監管產業常要求可重現證據:把使用的 OpenSSL 命令與輸出雜湊附在變更單上,便於稽核獨立重放。
演算法選擇與摘要計算
對 vendor 指令碼優先 sha384:抗碰撞與摘要長度折中較佳。務必對 CDN 實際下發的位元組求摘要——包含壓縮、註解注入與建置橫幅。差一個位元組即整包失敗,因此把摘要生成併入上傳物件儲存的同一工件步驟。
openssl dgst -sha384 -binary ./dist/vendor.js | openssl base64 -A
將摘要與來源 URL 寫入納入版控的 YAML 清單;CI 若發現 HTML 引用缺少或陳舊清單項應直接失敗。
crossorigin 與 CORS 模式
跨域經典指令碼在同時使用 integrity 時,應加 crossorigin="anonymous",讓瀏覽器走可校驗完整性的 CORS 模式。若回應缺少 Access-Control-Allow-Origin,省略 crossorigin 會在不同引擎上表現不一。文件化哪些 CDN 路徑回傳寬鬆 CORS,並在行銷上傳新套件卻未同步兩屬性時阻擋釋出。
CDN 快取鍵與重新整理順序
輪換 bundle 時依正確順序重新整理:陳舊 HTML 指向已刪路徑會 404;陳舊 JS 配新 HTML 會觸發完整性失敗。許多團隊用內容雜湊檔名——若採用,仍要為書籤落地頁等需穩定檔名的引導指令碼保留 SRI。
CSP:雜湊、nonce 與 strict-dynamic
靜態站常以 script-src 'sha256-…' 覆蓋極小引導指令碼,再在可發佈 HTML 後升級到每回應 nonce-。避免長期 'unsafe-inline' 與 nonce 混用失控。若必須支援遺留內聯片段,將其隔離到單獨路徑並加強監控。strict-dynamic 適合鏈式載入,但要向審查畫清信任根。
Safari WebKit 注意點
Safari 網路堆疊會積極合併請求;偵錯行銷嵌入物時需結合跨網站追蹤防護預設策略。WebKit 對完整性失敗的提示時機與 Chromium 不同——QA 應錄影而非憑假設簽字。務必分別驗證 macOS Safari 與 iOS Safari,因 ITP 會影響指令碼碰觸的儲存 API。
| 技術 | 適用 | 維運成本 |
|---|---|---|
| SRI + 穩定 URL | 遺留落地頁 | 每次上游修補需手改雜湊 |
| 雜湊檔名 | 新式靜態流水線 | 需 immutable 快取策略 |
| CSP nonce | 帶 SSR 殼的混合站 | 每回應注入標頭欄位 |
工程負責人決策矩陣
法務要求人類可讀資源路徑時選穩定 URL + SRI;按次計費的 purge API 成本高時選指紋檔名 + 長快取。實驗性內聯引導每小時變動時選 nonce,並確保邊緣絕不重複使用 nonce。
防止漂移的 CI
增加作業:拉取每個第三方 URL、重算摘要並與 HTML 屬性比對,夜間執行以便在營業時間前發現 CDN 遭竄改或建置回歸。
字型、模組與 Worker
透過 @font-face 從 CDN 拉字型時,格式穩定也可加完整性。ES 模組要注意動態 import() 繼承 CSP;獨立 Worker 有獨立策略脈絡,勿假設單一標頭涵蓋所有執行緒。
report-uri 與 report-to
先用 Content-Security-Policy-Report-Only 配合日誌供應商支援的 report-to。上線視窗常見 0.5%–2% 頁面產生報告,注意取樣避免淹沒分析預算。
回滾策略
在 Git 打標籤保留上一版已知良好 HTML 與對應摘要。若供應商靜默重修補,應在 30 分鐘內 重算雜湊前進;若自家流水線回歸,先回滾 HTML 提交再 purge CDN,並在狀態頁說明完整性失敗尖峰時使用者會看到空白套件而非優雅降級。
安全審查話術
說明 SRI 降低爆炸半徑但不能替代 CSP、frame 防護與伺服器端校驗。強調 作用域 CSS 防止行銷樣式滲入敏感元件。提供 兩分鐘 Safari 錄影展示摘要不匹配時的攔截行為。
同時保存通過與失敗的 HAR,便於稽核比對回應頭;常見根因是缺少 Access-Control-Allow-Origin 而非位元組遭竄改。證據建議隨工單保留至少 90 天 以滿足常見 SOC2 抽樣。
透過 MacHTML 租用 Apple Silicon Mac mini 可獲得原生 WebKit 行為、貼近正式站的字型彩現與企業使用者常見的鑰匙圈預設值。按約 $16.9/天,可在預覽主機鏡像正式 Content-Security-Policy,在不出借實體機的情況下蒐集稽核材料。
彈性租期也便於設計用 VNC 驗收、維運用 SSH 發佈指令碼協同;在試驗更嚴 script-src 前快照磁碟,若行銷像素與新完整性衝突可瞬時回滾。
最後,用同一套 CSP 預演 Cookie 同意與 CMP:許多 CMP 會注入內聯引導,常在週五發佈撞上假期凍結;提前在預覽暴露比正式爆雷更可接受。若團隊同時維護多區網域,請把每個區域的回應頭差異寫進矩陣,避免亞太邊緣節點遺漏 script-src 更新或快取舊版策略。