知识库

Appearance

Return to top
On this page

XSS 防护

跨站脚本攻击（Cross-Site Scripting，XSS）是一种常见的安全漏洞，攻击者通过在网页中注入恶意脚本，当其他用户浏览该网页时执行这些脚本，从而窃取用户信息或执行恶意操作。

XSS 攻击类型

反射型 XSS（Reflected XSS）

反射型 XSS 是最常见的类型，攻击者将恶意脚本作为 URL 参数发送给受害者。当受害者点击恶意链接时，脚本被发送到服务器并反射回用户的浏览器执行。

示例：

https://example.com/search?q=<script>alert('XSS')</script>

存储型 XSS（Stored XSS）

存储型 XSS 将恶意脚本永久存储在目标服务器上，如数据库、消息论坛或评论中。每当用户访问包含恶意脚本的页面时，脚本就会被执行。

示例： 在评论系统中插入恶意脚本，所有查看该评论的用户都会受到影响。

DOM 型 XSS（DOM-based XSS）

DOM 型 XSS 通过修改页面的 DOM 结构来实现攻击，恶意脚本不会发送到服务器，而是直接在浏览器中执行。

XSS 攻击的危害

  • 窃取用户 Cookie、Session Token 或其他敏感信息
  • 重定向用户到恶意网站
  • 修改网页内容或样式
  • 执行恶意操作（如转账、更改设置）
  • 在用户设备上安装恶意软件

XSS 防护措施

输入验证和过滤

对所有用户输入进行严格的验证和过滤：

javascript
// 使用白名单验证输入
function isValidInput(input) {
  const allowedPattern = /^[a-zA-Z0-9\s]+$/;
  return allowedPattern.test(input);
}

输出编码

在将用户输入输出到页面之前进行适当的编码：

javascript
// HTML 编码
function encodeHtml(str) {
  return str.replace(/[&<>"']/g, function(match) {
    switch (match) {
      case '&': return '&amp;';
      case '<': return '&lt;';
      case '>': return '&gt;';
      case '"': return '&quot;';
      case "'": return '&#x27;';
      default: return match;
    }
  });
}

内容安全策略 (CSP)

通过 CSP 头部限制脚本执行：

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline';

使用安全的 API

避免使用危险的 JavaScript 方法：

javascript
// 危险的做法
element.innerHTML = userInput;

// 安全的做法
element.textContent = userInput;

// 或使用 DOM 方法
const textNode = document.createTextNode(userInput);
element.appendChild(textNode);

HTTP Only Cookies

设置 Cookie 为 HTTP Only，防止通过 JavaScript 访问：

Set-Cookie: sessionId=abc123; HttpOnly; Secure

框架特定的防护

React

React 默认对 JSX 中的表达式进行转义：

jsx
// React 会自动转义 this.props.userInput
<div>{this.props.userInput}</div>

// 如果需要插入 HTML，使用 dangerouslySetInnerHTML
// 但要非常小心
<div dangerouslySetInnerHTML={{__html: rawHtml}} />

Angular

Angular 默认对模板中的表达式进行转义：

typescript
// 使用 DomSanitizer 时要小心
import { DomSanitizer } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

sanitizeHtml(html) {
  return this.sanitizer.bypassSecurityTrustHtml(html);
}

检测 XSS 漏洞

手动测试

  • 在所有输入字段中尝试输入 <script>alert(1)</script>
  • 测试 URL 参数、表单输入、Cookie 值
  • 检查输出是否正确编码

自动化工具

  • OWASP ZAP
  • Burp Suite
  • XSSer
  • BeEF

最佳实践

  1. 永远不要信任用户输入 - 所有用户提供的数据都应被视为潜在的恶意输入
  2. 深度防御 - 结合多种防护措施，不要依赖单一防护手段
  3. 定期更新 - 保持框架、库和依赖项的最新版本
  4. 安全培训 - 对开发团队进行安全编码培训
  5. 安全审计 - 定期进行代码审查和安全测试

总结

XSS 是一种严重的安全威胁，但通过适当的防护措施可以有效防范。关键是要始终验证和清理用户输入，正确编码输出，并实施多层防护策略。