Web 安全最佳实践

<!-- 危险：直接插入用户输入 -->
<div id="user-content"></div>
<script>
  document.getElementById('user-content').innerHTML = userInput;
</script>

<!-- 安全：对用户输入进行转义 -->
<div id="user-content"></div>
<script>
  document.getElementById('user-content').textContent = userInput;
</script>

// 使用 DOMPurify 清理 HTML
import DOMPurify from 'dompurify';
const clean = DOMPurify.sanitize(dirtyInput);

// 前端：CSRF Token
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

fetch('/api/update', {
  method: 'POST',
  headers: {
    'X-CSRF-Token': csrfToken,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
});

// 后端：验证 Token（示例）
app.use((req, res, next) => {
  const token = req.headers['x-csrf-token'];
  if (token !== req.session.csrfToken) {
    return res.status(403).send('Invalid CSRF token');
  }
  next();
});

-- 危险
SELECT * FROM users WHERE name = '" + userInput + "';

-- 安全：使用参数化查询
SELECT * FROM users WHERE name = ?;

// 安全：使用参数化查询
const query = 'SELECT * FROM users WHERE name = ?';
db.query(query, [userInput]);

# Nginx HTTPS 配置
server {
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    # 启用 HSTS
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
}

# HTTP 到 HTTPS 重定向
server {
    listen 80;
    server_name example.com;
    return 301 https://$server_name$request_uri;
}

# 安装 Certbot
sudo apt-get install certbot python3-certbot-nginx

# 获取证书
sudo certbot --nginx -d example.com -d www.example.com

# 自动续期
sudo certbot renew --dry-run

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' 'unsafe-inline' https://trusted.cdn.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
">

// 通过 HTTP 头设置
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'

// 安全 Headers 配置
app.use((req, res, next) => {
  // X-Frame-Options: 防止点击劫持
  res.setHeader('X-Frame-Options', 'DENY');

  // X-Content-Type-Options: 防止 MIME 类型嗅探
  res.setHeader('X-Content-Type-Options', 'nosniff');

  // X-XSS-Protection: XSS 过滤
  res.setHeader('X-XSS-Protection', '1; mode=block');

  // Strict-Transport-Security: 强制 HTTPS
  res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains');

  // Content-Security-Policy: 资源加载策略
  res.setHeader('Content-Security-Policy', "default-src 'self'");

  next();
});

import bcrypt from 'bcryptjs';

// 哈希密码
const salt = await bcrypt.genSalt(10);
const hashedPassword = await bcrypt.hash(plainPassword, salt);

// 验证密码
const isValid = await bcrypt.compare(plainPassword, hashedPassword);

// 安全的 Cookie 设置
app.use(session({
  secret: 'your-secret-key',
  cookie: {
    httpOnly: true,          // 防止 XSS 访问
    secure: true,            // 仅通过 HTTPS 传输
    sameSite: 'strict',      // CSRF 防护
    maxAge: 24 * 60 * 60 * 1000  // 1 天过期
  }
}));

import { z } from 'zod';

// 定义验证模式
const userSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8).regex(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/),
  age: z.number().min(18).max(120)
});

// 验证输入
try {
  const validatedUser = userSchema.parse(userInput);
} catch (error) {
  console.error('验证失败:', error.errors);
}

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