huxuejian/hn-hlw-pc

Fork 0

huxuejian 4984ed3b1d first commit

2026-07-27 11:32:24 +08:00

6.6 KiB

Raw Permalink Blame History

安全响应头配置指南

本文档说明如何在生产环境中配置安全响应头，防止点击劫持等安全攻击。

已实施的安全措施

1. 开发环境（Vite）

已在 vite.config.js 中配置以下响应头：

X-Frame-Options: SAMEORIGIN - 只允许同源页面嵌入
X-Content-Type-Options: nosniff - 防止 MIME 类型嗅探
X-XSS-Protection: 1; mode=block - 启用 XSS 过滤
Content-Security-Policy: frame-ancestors 'self' - CSP 防止点击劫持

2. HTML Meta 标签

在 index.html 中添加了 CSP meta 标签作为备用防护。

生产环境配置

Nginx 配置

在 Nginx 配置文件中添加以下响应头：

server {
    listen 80;
    server_name your-domain.com;
    
    # 安全响应头配置
    # 防止点击劫持攻击
    add_header X-Frame-Options "SAMEORIGIN" always;
    # 如果要完全禁止被嵌入，使用：
    # add_header X-Frame-Options "DENY" always;
    
    # 防止 MIME 类型嗅探
    add_header X-Content-Type-Options "nosniff" always;
    
    # XSS 保护
    add_header X-XSS-Protection "1; mode=block" always;
    
    # 内容安全策略（CSP）- 现代替代方案
    add_header Content-Security-Policy "frame-ancestors 'self'" always;
    
    # 强制 HTTPS（可选但推荐）
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
    
    # 引用策略
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
    
    location / {
        root /path/to/your/dist;
        try_files $uri $uri/ /index.html;
    }
}

Apache 配置

在 .htaccess 或 Apache 配置文件中添加：

<IfModule mod_headers.c>
    # 防止点击劫持攻击
    Header always set X-Frame-Options "SAMEORIGIN"
    # 如果要完全禁止被嵌入，使用：
    # Header always set X-Frame-Options "DENY"
    
    # 防止 MIME 类型嗅探
    Header always set X-Content-Type-Options "nosniff"
    
    # XSS 保护
    Header always set X-XSS-Protection "1; mode=block"
    
    # 内容安全策略
    Header always set Content-Security-Policy "frame-ancestors 'self'"
    
    # 强制 HTTPS（可选但推荐）
    Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains"
    
    # 引用策略
    Header always set Referrer-Policy "strict-origin-when-cross-origin"
</IfModule>

Node.js/Express 配置

如果使用 Express 作为服务器：

const express = require('express');
const helmet = require('helmet'); // 推荐使用 helmet 中间件

const app = express();

// 使用 helmet 中间件（推荐）
app.use(helmet({
  frameguard: {
    action: 'sameorigin' // 或 'deny'
  },
  contentSecurityPolicy: {
    directives: {
      frameAncestors: ["'self'"]
    }
  }
}));

// 或手动设置响应头
app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'SAMEORIGIN');
  res.setHeader('X-Content-Type-Options', 'nosniff');
  res.setHeader('X-XSS-Protection', '1; mode=block');
  res.setHeader('Content-Security-Policy', "frame-ancestors 'self'");
  next();
});

app.use(express.static('dist'));

腾讯云静态网站托管配置

如果使用腾讯云静态网站托管，可以在 cloudbaserc.json 中添加：

{
  "envId": "your-env-id",
  "framework": {
    "name": "vue",
    "plugins": {
      "client": {
        "path": "./package/dist",
        "headers": [
          {
            "key": "X-Frame-Options",
            "value": "SAMEORIGIN"
          },
          {
            "key": "X-Content-Type-Options",
            "value": "nosniff"
          },
          {
            "key": "X-XSS-Protection",
            "value": "1; mode=block"
          },
          {
            "key": "Content-Security-Policy",
            "value": "frame-ancestors 'self'"
          }
        ]
      }
    }
  }
}

X-Frame-Options 选项说明

SAMEORIGIN

含义：只允许同源（相同域名）的页面嵌入当前页面
使用场景：当你需要在自己网站的其他页面中嵌入当前页面时
安全性：中等，可防止外部网站的点击劫持攻击

DENY

含义：完全禁止任何页面嵌入当前页面
使用场景：当你确定页面不需要被任何 iframe 嵌入时
安全性：最高，提供最强的点击劫持防护

ALLOW-FROM uri（已废弃）

含义：允许特定 URI 的页面嵌入
状态：已被主流浏览器废弃，不推荐使用
替代方案：使用 CSP 的 frame-ancestors 指令

CSP frame-ancestors 指令

CSP 的 frame-ancestors 是 X-Frame-Options 的现代替代方案，提供更灵活的控制：

Content-Security-Policy: frame-ancestors 'none'  # 等同于 X-Frame-Options: DENY
Content-Security-Policy: frame-ancestors 'self'  # 等同于 X-Frame-Options: SAMEORIGIN
Content-Security-Policy: frame-ancestors 'self' https://trusted.com  # 允许特定域名

验证配置

方法1：浏览器开发者工具

打开网站
按 F12 打开开发者工具
切换到 Network（网络）标签
刷新页面
点击主文档请求
查看 Response Headers（响应头）
确认 X-Frame-Options 和 Content-Security-Policy 存在

方法2：命令行测试

curl -I https://your-domain.com

方法3：在线工具

测试点击劫持防护

创建一个测试 HTML 文件：

<!DOCTYPE html>
<html>
<head>
    <title>点击劫持测试</title>
</head>
<body>
    <h1>尝试嵌入目标网站</h1>
    <iframe src="https://your-domain.com" width="800" height="600"></iframe>
</body>
</html>

如果配置正确，iframe 将无法加载目标页面，浏览器控制台会显示类似错误：

Refused to display 'https://your-domain.com' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

注意事项

选择合适的策略：根据业务需求选择 SAMEORIGIN 或 DENY
同时使用多层防护：建议同时配置 X-Frame-Options 和 CSP frame-ancestors
HTTPS：始终使用 HTTPS 以确保安全头不会被中间人攻击篡改
测试兼容性：部署后测试所有功能是否正常工作
定期审计：定期检查安全配置是否有效

6.6 KiB Raw Permalink Blame History Unescape Escape