前端、XSS（跨站脚本攻击，Cross-Site Scripting）
XSS 攻击的三种主要类型
存储型 XSS（持久型）
- 原理：恶意脚本被永久存储在服务器（如数据库、评论内容），用户访问包含恶意脚本的页面时触发
- 示例：攻击者在论坛的评论区提交 ，其他用户查看评论时自动执行。
反射型 XSS（非持久型）
- 原理：恶意脚本作为URL 参数发送给服务器，服务器返回包含该参数的页面时触发。
- 示例：用户点击伪装链接 http://xxx.com/search?q=，页面显示搜索结果时执行脚本
DOM 型 XSS
- 原理：恶意脚本通过前端 DOM 操作直接修改页面内容，不经过服务器处理
- 示例：攻击者利用 location.hash 或 document.write() 动态插入恶意代码。
XSS 攻击的危害
- 窃取用户 Cookie（会话劫持
- 伪造用户操作（如转账、发帖）
- 钓鱼攻击（伪造登录页面）
- 植入恶意软件
防御 XSS 的核心方法
1. 输入验证与过滤
- 原则：对用户输入进行严格校验，过滤或转义危险字符（如 <, >, &, ", '）
// 示例：过滤 HTML 标签
function sanitizeInput(input) {return input.replace(/<[^>]*>/g, "");
}
注意：不要依赖前端验证，必须结合服务端验证。
2.输出编码
- 原则：将用户输入的内容在输出到页面时进行编码，确保浏览器将其视为文本而非可执行代码。
HTML 内容：转义 <, >, & 等字符。function escapeHTML(str) {return str.replace(/[&<>'"]/g, tag => ({'&': '&','<': '<','>': '>','"': '"',"'": '''}[tag]));
}
- HTML 属性：使用 setAttribute 或框架内置的绑定语法。
- JavaScript 内容：避免直接将用户输入拼接进
3.使用安全的前端框架
- 现代框架（如 React、Vue、Angular）默认会进行输出编码，避免 XSS：
// React 自动转义内容
<div>{userInput}</div> 例外：使用 dangerouslySetInnerHTML 或 v-html 时仍需手动过滤。
4. 设置 HTTP 安全头
- Content Security Policy (CSP)：限制脚本来源，禁止内联脚本：
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;
- HttpOnly Cookie：防止 JavaScript 读取敏感 Cookie：
Set-Cookie: sessionId=abc123; HttpOnly; Secure
5. 避免直接操作 DOM
- 使用 textContent 替代 innerHTML：
// 错误：可能执行恶意代码
element.innerHTML = userInput;// 正确：自动转义
element.textContent = userInput;
6. 其他措施
- CORS 配置：限制跨域资源访问。
- XSS 漏洞扫描：使用工具（如 OWASP ZAP、Burp Suite）定期检测。
防御示例：综合方案
- 服务端（Node.js + Express）：
const express = require("express");
const app = express();
const helmet = require("helmet");// 设置 CSP 和 HttpOnly
app.use(helmet());
app.use(helmet.contentSecurityPolicy({directives: {defaultSrc: ["'self'"],scriptSrc: ["'self'", "trusted-cdn.com"]}
}));
- 前端（React）：
function Comment({ text }) {// 自动转义用户输入return <div>{text}</div>;
}
- 数据库层：
存储用户输入前进行过滤。
总结
- 核心原则：永远不要信任用户输入！
- 多层次防御：输入过滤 + 输出编码 + 安全框架 + HTTP 头 + 安全编码习惯。
- 工具化：使用 CSP、现代框架、漏洞扫描工具降低风险。