JavaScript中的Web安全：XSS与CSRF攻击及防御

1. 背景与问题描述

Web安全是前端开发中的重要议题，其中XSS（跨站脚本攻击）和CSRF（跨站请求伪造）是两种常见攻击方式。它们的核心问题在于：

• XSS：攻击者向网页注入恶意脚本，在用户浏览器中执行，窃取数据或篡改页面。
• CSRF：攻击者诱导用户访问伪造的页面，利用用户已登录的身份发起非预期请求（如转账、修改密码）。

2. XSS攻击的原理与分类

（1）反射型XSS

• 过程：恶意脚本作为请求参数（如URL中的?search=<script>alert(1)</script>）发送到服务器，服务器直接返回含该脚本的页面，浏览器执行脚本。
• 特点：需要用户主动触发带恶意参数的链接。

（2）存储型XSS

• 过程：恶意脚本被持久化到数据库（如评论框输入脚本），其他用户访问页面时自动执行。
• 危害更大：影响所有访问页面的用户。

（3）DOM型XSS

• 过程：前端JavaScript动态修改DOM时，未对用户输入转义，导致脚本执行（如innerHTML = userInput）。
• 示例：

  // 假设从URL参数获取数据并插入页面  
  const search = new URLSearchParams(location.search).get("q");  
  document.getElementById("result").innerHTML = search; // 若search含脚本则执行  
  

3. XSS的防御策略

（1）输入验证与过滤

• 对用户输入进行严格校验（如长度、格式），拒绝非法内容。
• 使用库（如DOMPurify）过滤敏感字符（如<script>、onerror=）。

（2）输出转义

• 将数据插入页面时，根据上下文转义特殊字符：
  • HTML转义：将<转为<，>转为>。
  • 属性转义：属性值用引号包裹，避免拼接字符串（如<div attr="<%= data %>">）。

（3）内容安全策略（CSP）

• 通过HTTP头Content-Security-Policy限制资源加载来源：

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

  • 禁止内联脚本（如onclick），仅允许指定域名的脚本。

4. CSRF攻击的原理

（1）攻击条件

• 用户已登录目标网站（如银行站点）。
• 用户访问恶意网站，该页面自动发送请求至目标网站（利用Cookie自动携带身份凭证）。

（2）示例

<!-- 恶意网站中的表单 -->  
<form action="https://bank.com/transfer" method="POST">  
  <input type="hidden" name="to" value="hacker">  
  <input type="hidden" name="amount" value="1000">  
</form>  
<script>document.forms[0].submit();</script>  

若用户已登录bank.com，请求会自动携带Cookie完成转账。

5. CSRF的防御策略

（1）同源检测

• 通过HTTP头Origin或Referer验证请求来源是否合法。

（2）CSRF Token

• 服务端生成随机Token存入Session，前端在请求时携带（如表单隐藏字段或请求头）：

  <form action="/transfer" method="POST">  
    <input type="hidden" name="csrf_token" value="随机Token">  
  </form>  
  

  • 服务端校验Token是否匹配。

（3）SameSite Cookie属性

• 设置Cookie的SameSite属性，限制跨站请求携带Cookie：
  • Strict：完全禁止跨站携带。
  • Lax：允许部分安全请求（如GET导航）携带。

6. 实战对比

7. 总结

• XSS防御需结合转义、过滤、CSP等多层措施。
• CSRF防御依赖Token、同源验证与Cookie策略。
• 实际开发中需同时防护两者，避免单一依赖。