MERN应用使用X-Frame-Options或Helmet防点击劫持失效求助

核心问题定位 #

你当前的Helmet配置仅作用于Node后端服务（localhost:8888），但iframe加载的是React前端服务（localhost:3000）的页面——前端页面的响应头由React开发服务器（如create-react-app的dev server）控制，并未应用X-Frame-Options，所以浏览器允许将其嵌入iframe。

分步解决 #

1. 为React开发环境配置X-Frame-Options #

如果使用create-react-app，默认开发服务器不支持直接修改响应头，需通过自定义配置实现：

• 安装依赖：npm install customize-cra react-app-rewired --save-dev
• 在项目根目录创建config-overrides.js，添加以下代码：

const { override, devServer } = require('customize-cra');

module.exports = override(
  devServer(configFunction) {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      // 添加X-Frame-Options禁止iframe嵌入
      config.headers = {
        ...config.headers,
        'X-Frame-Options': 'DENY',
      };
      return config;
    };
  }
);

• 修改package.json中的启动脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

重启React开发服务器后，前端页面会带上X-Frame-Options: DENY响应头，禁止被任何iframe加载。

如果是Vite搭建的React项目，直接在vite.config.js中配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    headers: {
      'X-Frame-Options': 'DENY',
    },
  },
});

2. 生产环境确保Helmet生效 #

生产环境中，通常会将React打包后的静态文件交由Node后端托管，此时你的原有Helmet配置会自动作用于所有静态页面请求。需要确认静态文件托管代码正确，比如：

const express = require('express');
const helmet = require('helmet');
const path = require('path');

const app = express();
app.use(helmet());
// 托管React静态文件
app.use(express.static(path.join(__dirname, 'client/build')));

// 其他API路由
app.get('/isLoggedIn', (req, res) => {
  // 接口逻辑
});

app.listen(8888);

此时所有前端页面的响应都会带上Helmet默认的安全头，包括X-Frame-Options。

3. 启用更严格的Content-Security-Policy（CSP） #

X-Frame-Options是旧标准，推荐搭配现代的CSP frame-ancestors指令，进一步强化防护。修改Helmet配置：

app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      frameAncestors: ["'none'"], // 禁止任何网站嵌入当前页面
    },
  },
}));

CSP的优先级高于X-Frame-Options，能提供更全面的防护。

4. 额外补充防护 #

• CSRF防护：虽然点击劫持主要是页面嵌入，但API接口需防范CSRF攻击。可以使用Helmet的csrf中间件，或为Cookie设置SameSite=Strict属性，避免跨站请求伪造。
• 测试验证：修改配置后，重新在诱饵网站的iframe中加载登录页面，浏览器应直接阻止加载（通常会在控制台报错），同时检查前端页面的响应头是否包含X-Frame-Options: DENY和Content-Security-Policy: frame-ancestors 'none'。

内容的提问来源于stack exchange，提问作者koushik