红宝书第四十九讲：XSS/CSRF攻击防御策略解析
资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲
XSS（跨站脚本）：黑客把恶意代码塞进网页，当你打开页面时，代码自动运行偷信息。
CSRF（跨站请求伪造）：黑客在你不知情时，冒用你的身份发送危险请求（比如转账）。
一、XSS防御：防止代码注入
攻击场景：用户输入 <script>alert('XSS')</script>，未过滤直接显示在页面。
防御策略 1：
- 输入过滤：将用户输入的尖括号转义为无害字符。
// 使用Encoding API转义HTML（资料1的编码逻辑）
function escapeHTML(text) {
return text.replace(/[<>]/g, m => m === '<' ? '<' : '>');
}
// 示例：用户输入转为纯文本显示
const userInput = '<script>恶意代码</script>';
document.body.innerHTML = escapeHTML(userInput); // 显示为文本，不执行!
- 输出编码：动态内容插入页面时，使用
.textContent而非.innerHTML2。
// 安全做法
document.getElementById('content').textContent = userInput;
二、CSRF防御：阻断伪造请求
攻击场景：你登录了银行网站，黑客诱导你点击恶意链接，自动发起转账请求。
防御策略（基于资料3和资料6）：
- SameSite Cookie属性 2
设置Cookie的SameSite=Strict，限制只有当前站点能携带Cookie：
// 服务端设置Cookie（类比Cookie安全配置）
Set-Cookie: sessionID=abc123; SameSite=Strict; HttpOnly;
- 验证请求来源（CORS） 3
服务端检查Origin或Referer头部，阻断跨域非法请求：
// 服务端代码（Node.js示例）——允许特定域名访问
if (request.headers.origin !== 'https://trusted-site.com') {
return response.status(403).send('拒绝跨域请求');
}
总结对比
| 攻击类型 | 核心漏洞 | 防御方案 | 相关参考资料 |
|---|---|---|---|
| XSS | 未过滤的用户输入 | 输入转义、避免innerHTML | 资料5、资料6 |
| CSRF | Cookie被冒用 | SameSite属性、验证请求来源 | 资料3、资料6 |
目录：总目录
上篇文章：红宝书第四十八讲：实时通信双雄：Socket.IO & Meteor 的奇妙旅程
下篇文章：红宝书第五十讲：内容安全策略（CSP）详解：小白的守护者
脚注
《JavaScript高级程序设计（第5版）》的编码API示例可用于转义危险字符 ↩︎
《JavaScript高级程序设计（第5版）》中的Cookies安全设置建议使用HttpOnly和SameSite属性 ↩︎ ↩︎
《JavaScript高级程序设计（第5版）》中的CORS策略用于控制跨域请求的合法性 ↩︎