Subresource Integrity 与 Cache Storage 协同实践

概述SRI 在 HTML 层保证外部资源未被篡改。本文结合 Service Worker 在缓存前执行摘要校验。HTML 中的 SRI<link rel="stylesheet" href="/assets/app.css" integrity="sha256-<HASH>" crossorigin="anonymous"> <script src="/assets/app.js" integrity="sha256-<HASH>" crossorigin="anonymous"></script> SW 中校验后缓存async function sha256(bytes) { const buf = await crypto.subtle.digest('SHA-256', bytes); return Array.from(new Uint8Array(buf)).map(x => x.toString(16).padStart(2,'0')).join(''); } self.addEventListener('fetch', event => { const url = new URL(event.request.url); if (url.pathname.startsWith('/assets/')) { event.respondWith((async () => { const res = await fetch(event.request); const ab = await res.clone().arrayBuffer(); const hex = await sha256(new Uint8Array(ab)); // 应与发布时记录的 HASH 比较，这里示例直接缓存 const cache = await caches.open('assets-v1'); await cache.put(event.request, res.clone()); return res; })()); } });