要 Hook Worker
构造函数并拦截传入的 JS 代码,可以通过以下方法实现。核心思路是 劫持原生 Worker
,在 Worker 脚本执行前动态修改其内容。
解决方案
1. 重写 Worker
构造函数(主线程中操作)
// 保存原生 Worker
const OriginalWorker = window.Worker;
// 重写 Worker
window.Worker = class HookedWorker extends OriginalWorker {
constructor(scriptURL, options) {
// 如果是 Blob URL(动态生成的代码),需通过 AJAX 获取内容
if (scriptURL instanceof Blob) {
super(scriptURL, options);
return;
}
// 拦截远程 JS 文件内容(需处理跨域限制)
if (typeof scriptURL === 'string' && !scriptURL.startsWith('blob:')) {
fetch(scriptURL)
.then(response => response.text())
.then(code => {
console.log('原始 Worker 代码:', code);
// --- HOOK 逻辑:修改代码 ---
const hookedCode = code + '\nconsole.log("Injected Code!");';
// 重新生成 Blob URL
const blob = new Blob([hookedCode], { type: 'application/javascript' });
const hookedUrl = URL.createObjectURL(blob);
// 调用原生 Worker
super(hookedUrl, options);
});
return; // Note: This returns before super() is called!
}
// 直接处理 Blob URL/内联代码
super(scriptURL, options);
}
};
关键注意事项
跨域限制:
- 如果
scriptURL
是远程 JS 文件(如http://example.com/worker.js
),浏览器会因 CORS 限制禁止读取内容。
- 解决方法:确保目标服务器返回正确的 CORS headers(如
Access-Control-Allow-Origin: *
)。
- 如果
Blob URL:
- Webpack/Rollup等工具可能将 Worker代码打包为
blob:
URL,此时需要通过拦截构建过程或使用插件修改源码。
- Webpack/Rollup等工具可能将 Worker代码打包为
性能影响:
- Hook后的
Worker
会在初始化时增加网络请求延迟(需先下载原始脚本)。
- Hook后的
沙箱逃逸风险:
- Overriding built-ins like
Worker
may break libraries relying on its default behavior.
- Overriding built-ins like
替代方案(无CORS问题)
如果无法绕过跨域限制,可通过代理层动态替换 Worker文件:
// main.js
const worker = new Worker('/proxy-worker?real_url=http://origin.com/worker.js');
// Server-side (e.g., Node.js proxy)
app.get('/proxy-worker', async (req, res) => {
const realUrl = req.query.real_url;
const code = await fetch(realUrl).then(r => r.text());
// Inject hook logic here...
const hookedCode = code + '\nconsole.log("Hooked!");';
res.type('js').send(hookedCode);
});
调试技巧
- Chrome DevTools → Sources → Page → Ctrl+P → Search for
worker.js
.
- Use
debugger;
in the hooked code to pause execution.
根据你的实际需求选择合适方案!如果需要更具体的实现方式,可以进一步描述场景。
内容由零声教学AI助手提供,问题来源于学员提问