一、准备开发环境
1.1 必备工具
不需要任何复杂开发框架，仅需两个工具：
1. 最新版谷歌Chrome浏览器（下载地址：https://www.google.cn/chrome/）
2. 任意纯文本编辑器（推荐VS Code，下载地址：https://code.visualstudio.com/）
1.2 创建项目文件夹
在桌面或任意位置新建一个文件夹，命名为`malicious-script-blocker`，后续所有文件都放在这个文件夹内。
二、编写核心配置文件manifest.json
manifest.json是Chrome扩展的身份证，所有功能都依赖它声明。创建文件并复制以下完整代码：
```json
{
"manifest_version": 3,
"name": "恶意脚本拦截器",
"version": "1.0",
"description": "精准拦截XSS注入、钓鱼诱导类恶意脚本",
"permissions": ["activeTab", "storage"],
"host_permissions": ["
"],
"content_scripts": [
{
"matches": [""],
"js": ["content.js"],
"run_at": "document_start"
}
],
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
}
}
```
代码关键配置说明：
- `manifest_version: 3`：强制使用Chrome最新的V3规范，V2已停止更新
- `run_at: "document_start"`：在DOM解析前就注入拦截脚本，从源头阻断
- `host_permissions: [""]`：支持拦截所有网页（可后续缩小范围）
- `action`：可选配置，用于做一个简单的开关界面
三、编写核心拦截脚本content.js
content.js是直接注入网页运行的脚本，负责实时检测并拦截恶意代码。创建文件并复制以下完整代码：
```javascript
// 恶意脚本特征库（可自行添加）
const maliciousPatterns = [
// XSS类
/eval\s\(/gi,
/document\.cookie\s[=+]/gi,
/inner\sHTML\s[=+]/gi,
/outer\sHTML\s[=+]/gi,
/javascript\s:/gi,
/on\w+\s=/gi,
// 钓鱼诱导类（常见跳转、弹窗语句）
/window\.location\s[=+]/gi,
/location\.href\s[=+]/gi,
/open\s\(\s['"]http/i,
/alert\s\(\s['"]银行卡/i,
/alert\s\(\s['"]登录/i
];
// 1. 拦截动态插入的脚本标签
const originalCreateElement = document.createElement;
document.createElement = function(tagName) {
const element = originalCreateElement.call(document, tagName);
if (tagName.toLowerCase() === 'script') {
// 监听src属性变化
const srcObserver = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
checkAndBlock(element, element.src);
}
});
});
srcObserver.observe(element, { attributes: true });
// 监听textContent/innerHTML变化
const textObserver = new MutationObserver(mutations => {
mutations.forEach(mutation => {
const content = element.textContent || element.innerHTML;
if (content) checkAndBlock(element, content);
});
});
textObserver.observe(element, { childList: true, subtree: true });
}
return element;
};
// 2. 拦截内联事件处理
const originalSetAttribute = Element.prototype.setAttribute;
Element.prototype.setAttribute = function(name, value) {
if (name.toLowerCase().startsWith('on') && checkPattern(value)) {
console.log('[恶意脚本拦截器] 已拦截内联事件:', name, '=', value);
return;
}
return originalSetAttribute.call(this, name, value);
};
// 3. 拦截eval等危险函数
const originalEval = window.eval;
window.eval = function(code) {
if (checkPattern(code)) {
console.log('[恶意脚本拦截器] 已拦截eval执行:', code.slice(0, 100));
return null;
}
return originalEval.call(window, code);
};
// 4. 拦截document.write/writeln
const originalWrite = document.write;
const originalWriteln = document.writeln;
document.write = function(content) {
if (checkPattern(content)) {
console.log('[恶意脚本拦截器] 已拦截document.write:', content.slice(0, 100));
return;
}
return originalWrite.call(document, content);
};
document.writeln = function(content) {
if (checkPattern(content)) {
console.log('[恶意脚本拦截器] 已拦截document.writeln:', content.slice(0, 100));
return;
}
return originalWriteln.call(document, content);
};
// 公共检测与阻断函数
function checkPattern(content) {
if (!content) return false;
return maliciousPatterns.some(pattern => pattern.test(content));
}
function checkAndBlock(element, content) {
if (checkPattern(content)) {
console.log('[恶意脚本拦截器] 已拦截恶意脚本:', content.slice(0, 100));
element.remove();
element.disabled = true;
}
}
console.log('[恶意脚本拦截器] 已启动');
```
代码核心逻辑说明：
- 重写原生DOM和JS API：从底层拦截所有可能的脚本执行入口
- 特征库可扩展：你可以根据遇到的恶意脚本，自行在`maliciousPatterns`数组中添加正则表达式
- 拦截后有日志：打开Chrome开发者工具（F12）的Console面板，可看到所有拦截记录
四、编写简单的开关界面（可选）
4.1 创建popup.html
这是点击扩展图标弹出的界面，用于开启/关闭拦截。创建文件并复制以下完整代码：
```html
```
4.2 创建popup.js
这是开关界面的逻辑脚本。创建文件并复制以下完整代码：
```javascript
const toggle = document.getElementById('toggle');
// 初始化开关状态
chrome.storage.local.get('isEnabled', (result) => {
toggle.checked = result.isEnabled !== false;
});
// 监听开关变化
toggle.addEventListener('change', () => {
chrome.storage.local.set({ isEnabled: toggle.checked });
// 刷新当前标签页让状态生效
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.tabs.reload(tabs[0].id);
});
});
```
4.3 更新content.js添加开关逻辑
在content.js的最开头添加以下代码：
```javascript
// 读取开关状态，默认开启
chrome.storage.local.get('isEnabled', (result) => {
if (result.isEnabled === false) {
console.log('[恶意脚本拦截器] 已关闭');
return;
}
// 后面接原来的拦截逻辑
});
```
注意：要把原来的拦截逻辑（从恶意特征库到公共函数结束）全部放在这个回调函数里。
五、准备扩展图标（可选但规范）
找一张128x128像素的PNG图片，命名为`icon.png`，放入项目文件夹。如果没有，也可以跳过，但扩展图标会显示为Chrome默认图标。
六、加载扩展到Chrome浏览器
1. 打开Chrome浏览器，在地址栏输入`chrome://extensions/`并回车
2. 打开右上角的开发者模式开关
3. 点击左上角的加载已解压的扩展程序按钮
4. 选择之前创建的`malicious-script-blocker`文件夹
5. 扩展加载成功后，会在浏览器右上角显示图标（如果有icon.png的话）
七、测试拦截效果
7.1 测试XSS注入
创建一个测试HTML文件`test.html`，放入项目文件夹并复制以下代码：
```html
```
用Chrome打开test.html，按F12打开Console面板，点击按钮，应该能看到拦截日志，且按钮不会弹出alert，页面不会插入动态内容。
7.2 测试钓鱼跳转
修改test.html添加以下代码：
```html
```
刷新页面，点击按钮，应该能看到拦截日志，且不会跳转。
八、后续优化建议
1. 缩小host_permissions范围：如果只需要拦截特定网站，把``换成具体的URL，比如`["https://.taobao.com/", "https://.jd.com/"]`
2. 优化特征库：避免误杀正常代码，比如把`/inner\sHTML\s[=+]/gi`改成只拦截包含`javascript:`或`on\w+`的innerHTML
3. 添加白名单：在storage中存储白名单域名，遇到白名单域名时自动关闭拦截
4. 添加弹窗提醒：拦截时弹出浏览器通知（需要在manifest.json中添加`notifications`权限）
