红宝书第四十九讲：XSS/CSRF攻击防御策略解析

红宝书第四十九讲：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 === '<' ? '&lt;' : '&gt;');
}// 示例：用户输入转为纯文本显示
const userInput = '<script>恶意代码</script>';
document.body.innerHTML = escapeHTML(userInput); // 显示为文本，不执行!

2. 输出编码：动态内容插入页面时，使用.textContent而非.innerHTML ²。

// 安全做法
document.getElementById('content').textContent = userInput;

---

二、CSRF防御：阻断伪造请求

攻击场景：你登录了银行网站，黑客诱导你点击恶意链接，自动发起转账请求。

防御策略（基于资料3和资料6）：

1. SameSite Cookie属性 ²
   设置Cookie的SameSite=Strict，限制只有当前站点能携带Cookie：

// 服务端设置Cookie（类比Cookie安全配置）
Set-Cookie: sessionID=abc123; SameSite=Strict; HttpOnly;

2. 验证请求来源（CORS） ³
   服务端检查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 的奇妙旅程

脚注

---

1. 《JavaScript高级程序设计（第5版）》的编码API示例可用于转义危险字符 ↩︎

2. 《JavaScript高级程序设计（第5版）》中的Cookies安全设置建议使用HttpOnly和SameSite属性 ↩︎ ↩︎

3. 《JavaScript高级程序设计（第5版）》中的CORS策略用于控制跨域请求的合法性 ↩︎