红宝书第四十九讲：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;

   flowchart LR
    合法网站请求 --> 携带Cookie --> 服务端认可
    恶意网站请求 --> 无Cookie或Cookie被拦截 --> 请求无效

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 的奇妙旅程

下篇文章：红宝书第五十讲：内容安全策略（CSP）详解：小白的守护者

脚注

---

1. 《JavaScript高级程序设计（第5版）》的编码API示例可用于转义危险字符 ↩
2. 《JavaScript高级程序设计（第5版）》中的Cookies安全设置建议使用HttpOnly和SameSite属性 ↩
3. 《JavaScript高级程序设计（第5版）》中的CORS策略用于控制跨域请求的合法性 ↩