XSS防护

XSS攻击的基本原理

XSS（Cross-Site Scripting）攻击是一种常见的Web安全漏洞，攻击者通过在网页中注入恶意脚本，当其他用户访问该页面时，这些脚本会在用户的浏览器中执行。XSS攻击主要分为三种类型：

1. 存储型XSS：恶意脚本被永久存储在目标服务器上，当用户访问包含这些脚本的页面时触发
2. 反射型XSS：恶意脚本作为请求的一部分发送到服务器，然后立即反射回用户的浏览器
3. DOM型XSS：攻击通过修改页面的DOM环境在客户端直接触发，不经过服务器

// 一个简单的XSS攻击示例
const userInput = '<script>alert("XSS攻击")</script>';
document.getElementById('content').innerHTML = userInput;

Node.js中的XSS防护策略

输入验证和过滤

对所有用户输入进行严格的验证是防止XSS的第一道防线。在Node.js中可以使用validator等库进行输入验证：

const validator = require('validator');

// 验证并清理用户输入
const sanitizedInput = validator.escape(userInput);
const isSafe = validator.isAlphanumeric(userInput);

输出编码

在将用户提供的内容输出到HTML时，必须进行适当的编码：

const he = require('he');

// HTML实体编码
const encodedOutput = he.encode(userInput, {
  useNamedReferences: true
});

使用安全模板引擎

选择自动进行XSS防护的模板引擎，如EJS、Pug等：

// EJS模板示例
<%- userContent %>  <!-- 自动进行HTML转义 -->

设置HTTP安全头

通过设置HTTP响应头增强XSS防护：

// Express中设置安全头
app.use(helmet.xssFilter());  // X-XSS-Protection头
app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "'unsafe-inline'"],
    styleSrc: ["'self'", "'unsafe-inline'"]
  }
}));

CSP内容安全策略

内容安全策略(CSP)是防御XSS攻击的强大工具，可以限制浏览器只加载和执行来自可信源的资源：

// Express中设置CSP
const csp = require('helmet-csp');

app.use(csp({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "trusted.cdn.com"],
    styleSrc: ["'self'", "'unsafe-inline'"],
    imgSrc: ["'self'", "data:"],
    fontSrc: ["'self'", "fonts.gstatic.com"]
  }
}));

使用DOMPurify净化HTML

当需要允许某些HTML标签但又要防止XSS时，可以使用DOMPurify：

const createDOMPurify = require('dompurify');
const { JSDOM } = require('jsdom');

const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);

const clean = DOMPurify.sanitize(dirty, {
  ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
  ALLOWED_ATTR: ['href', 'title']
});

Cookie安全设置

确保cookie设置了HttpOnly和Secure标志，防止通过JavaScript访问：

// Express中设置安全cookie
app.use(session({
  secret: 'your-secret-key',
  cookie: {
    httpOnly: true,
    secure: true,
    sameSite: 'strict'
  }
}));

现代前端框架的XSS防护

React、Vue等现代框架提供了一定程度的XSS防护，但仍需注意：

// React示例 - 默认会转义所有插入的内容
function UserComponent({ userInput }) {
  // 安全方式
  return <div>{userInput}</div>;
  
  // 危险方式 - 可能引入XSS
  // return <div dangerouslySetInnerHTML={{ __html: userInput }} />;
}

富文本编辑器的特殊处理

处理富文本内容时需要特别小心，建议使用专业库：

const sanitizeHtml = require('sanitize-html');

const clean = sanitizeHtml(dirty, {
  allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']),
  allowedAttributes: {
    a: ['href', 'name', 'target'],
    img: ['src', 'alt']
  }
});

定期安全审计和测试

建立定期的安全审计机制，包括：

1. 使用自动化工具扫描XSS漏洞
2. 进行手动渗透测试
3. 代码审查时特别注意安全相关代码
4. 保持依赖库更新

# 使用npm audit检查安全漏洞
npm audit

错误处理和日志记录

完善的错误处理和日志记录可以帮助发现潜在的攻击尝试：

// Express错误处理中间件
app.use((err, req, res, next) => {
  if (err instanceof XSSAttemptError) {
    securityLogger.warn(`XSS attempt detected from ${req.ip}`);
    return res.status(400).send('Invalid input detected');
  }
  next(err);
});