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;

})());

}

});