前端代码如何进行安全加固（如防XSS、CSRF），以及如何进行代码安全扫描（如使用Snyk、ESLint规则）？请说明常见漏洞类型、防护措施和工具链配置。
答案
1) 【一句话结论】前端安全加固需从输入校验、输出编码、请求验证等环节防护XSS、CSRF等漏洞，结合ESLint（静态扫描）和Snyk（依赖扫描）等工具构建全链路防护体系。
2) 【原理/概念讲解】
XSS（跨站脚本攻击）：攻击者向网页注入恶意脚本，用户访问时脚本在浏览器执行，窃取Cookie、篡改页面或发起进一步攻击。类比：公共水龙头被投毒，用户喝水（访问页面）时中毒。
防护核心：输入端过滤/转义（如正则过滤特殊字符、HTML实体编码）、输出端编码（如<转<）；
CSRF（跨站请求伪造）：攻击者利用用户已登录状态，伪造请求绕过认证执行操作（如转账、发帖）。类比：用户持卡（认证状态）在银行办业务时，被他人用同一张卡（同一Cookie）发起转账。
防护核心：CSRF Token（请求头/参数携带Token，后端验证）、SameSite Cookie（Strict/Lax模式限制跨站请求）、Referer检查（验证请求来源）。
3) 【对比与适用场景】
| 漏洞类型 | 定义 | 核心危害 | 防护措施 | 工具链配置 |
|---|---|---|---|---|
| XSS | 注入恶意脚本，浏览器执行 | 窃取数据、篡改页面 | 输入校验（正则/白名单）、输出编码（HTML实体）、CSP | ESLint配置no-unsafe-html规则，Snyk扫描依赖漏洞 |
| CSRF | 伪造用户请求，绕过认证 | 执行未授权操作 | CSRF Token、SameSite Cookie、Referer检查 | 前端框架自动生成Token，后端验证 |
4) 【示例】
- XSS防护示例（Vue组件）：
<template>
<div>
<p>用户评论：{{ sanitizedComment }}</p>
</div>
</template>
<script>
export default {
data() {
return {
rawComment: '<script>alert(1)</script>'
}
},
computed: {
sanitizedComment() {
return this.rawComment.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
}
}
</script>
- CSRF防护示例（React组件）：
import React, { useState } from 'react';
function SecureForm() {
const [formData, setFormData] = useState({});
const handleSubmit = async (e) => {
e.preventDefault();
const token = 'your-csrf-token'; // 假设从后端获取
const response = await fetch('/api/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': token
},
body: JSON.stringify(formData)
});
};
return (
<form onSubmit={handleSubmit}>
<input type="text" onChange={(e) => setFormData({...formData, [e.target.name]: e.target.value})} />
<button type="submit">提交</button>
</form>
);
}
5) 【面试口播版答案】
“前端安全加固主要针对XSS和CSRF等常见漏洞。XSS是攻击者注入恶意脚本，在用户浏览器执行，防护上要输入校验（如正则过滤用户输入）和输出编码（HTML实体编码），比如用ESLint的no-unsafe-html规则检查，Snyk扫描依赖漏洞。CSRF是伪造用户请求绕过认证，防护用CSRF Token（请求头携带Token）和SameSite Cookie（严格模式），前端框架会自动生成Token，后端验证。代码安全扫描方面，静态扫描用ESLint配置安全规则（如防XSS的规则），动态扫描用Snyk等工具扫描依赖库的已知漏洞，比如运行snyk test检查项目依赖。整体要结合输入输出处理、请求验证和工具链，构建全链路防护。”
6) 【追问清单】
- 问：如何配置ESLint的安全规则？答：在
.eslintrc.json中添加"rules": {"no-unsafe-html": "error"}，或使用eslint-plugin-security插件。 - 问：CSP策略如何配置？答：在HTTP响应头添加
Content-Security-Policy: default-src 'self'; script-src 'self';，限制资源加载来源。 - 问：CSRF Token如何生成和验证？答：前端生成随机Token（如UUID），存入Cookie或请求头，后端接收Token并验证是否匹配。
- 问：Snyk如何集成到CI/CD流程？答：配置Snyk的CI插件，在Jenkins或GitHub Actions中添加
snyk test命令，自动扫描依赖漏洞。 - 问：除了XSS和CSRF，还有哪些前端安全漏洞？答：点击劫持（Clickjacking）、SSRF（服务器端请求伪造）、DOM-based XSS等。
7) 【常见坑/雷区】
- 忽略输出编码，导致XSS漏洞（直接渲染用户输入，未转义特殊字符）；
- CSRF Token未设置SameSite属性，导致Cookie被跨站请求；
- 依赖库未更新，Snyk未扫描到已知漏洞；
- 输入校验只做前端，未做后端校验，攻击者绕过前端；
- CSP策略配置不严谨，导致合法资源被阻止。