Service Worker 仅能拦截通过 HTTP(S) 加载的第三方脚本请求（如 script 标签 src、importScripts()、动态创建的 script.src），无法拦截内联脚本、javascript: 协议、onerror 等事件属性或 data:/blob: 协议脚本。
Service Worker 能拦截哪些第三方脚本请求
Service Worker 本身不解析 HTML、不扫描 DOM，只在 fetch 事件中捕获网络请求。它能拦截的，仅限于通过 HTTP(S) 加载的外部脚本资源（request.destination === 'script'），比如：https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js 或 https://tracker.example.com/analytics.js。
常见错误现象：以为 SW 能拦掉 <script>alert(1)</script> 或 <img onerror="fetch('/steal')" alt="拦截第三方脚本污染网页HTML文档结构的底层防护实现" > —— 实际上这些根本不会触发 fetch，SW 完全看不见。
- ✅ 可拦截：
importScripts()、动态document.createElement('script').src = url、module导入、src属性加载的脚本 - ❌ 不可拦截：内联
<script></script>、javascript:协议、onxxx事件属性、XSS 注入后已存在于 HTML 中的脚本 - ⚠️ 注意：
data:或blob:协议脚本也不会进入fetch流程，SW 无感知
CSP 的 script-src 指令如何配合 SW 构成双层防线
SW 是“网络层守门人”，CSP 才是“执行层防火墙”。两者缺一不可：SW 拦住恶意域名的请求，CSP 则确保即使请求绕过 SW（比如内联或被缓存），也无法执行。
典型配置组合：
立即学习“前端免费学习笔记（深入）”；
Content-Security-Policy: script-src 'self' https://cdn.example.com; object-src 'none'; base-uri 'self'; worker-src 'self'
关键点：
-
worker-src 'self'防止攻击者注册恶意 SW 替换你的版本 - 禁用
'unsafe-inline'和'unsafe-eval'，否则 SW 拦住的请求毫无意义 -
base-uri 'self'阻断<base href="http://evil.com">引发的后续所有相对路径脚本加载 - 如果必须支持内联统计代码，用
nonce而非sha256-哈希——后者一旦脚本微调就失效
Shadow DOM 注入第三方 HTML 时脚本和样式为何失效
直接对 shadowRoot.innerHTML = htmlString 会导致脚本不执行、样式不生效、CSP 报错，根本原因不是语法错，而是 Shadow DOM 的边界机制拒绝把字符串当语义化资源处理。
现象举例：
-
<style>button{color:red}</style>被当成纯文本，不进 CSSOM -
<script>console.log('hi')</script>在全局执行，可能污染window或触发 CSP 违规 -
<link rel="stylesheet" href="theme.css">仍加载到document.head，完全脱离 Shadow 隔离
正确做法是用 DOMParser 解析后手动处理：
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
for (const style of doc.querySelectorAll('style')) {
shadowRoot.appendChild(style.cloneNode(true));
}
for (const script of doc.querySelectorAll('script')) {
const s = document.createElement('script');
s.textContent = script.textContent;
shadowRoot.appendChild(s);
}
为什么 DOMPurify 不能替代 CSP 或 SW
DOMPurify.sanitize() 是客户端运行时净化，它只处理你传给它的字符串，且依赖浏览器先解析出 DOM 树再遍历剔除危险节点。这意味着：
- 它无法拦截网络请求，对远程脚本加载无感
- 若净化后的内容被再次拼接到
innerHTML（如富文本编辑器二次渲染），而没重新净化，就会漏防 - 它不阻止
javascript:协议跳转、eval()、setTimeout(string)等动态执行路径 - 对已注入的内联脚本（如 XSS 后写入评论区的
<svg onload="..."></svg>）只在调用时起效，而非实时阻断
真正可靠的防护链是：服务端输出编码 → CSP 硬限制 → SW 网络过滤 → 客户端插入前用 DOMPurify.sanitize() 最后校验。任何一环缺失，都可能被绕过。
