如何为使用“create-react-app”创建的 React 应用程序设置标头

Question

我使用“create-react-app”创建了一个示例反应应用程序。我需要使用X-Frame-options 和Content-Security-Policy 设置请求标头。我该怎么做呢？我只是尝试使用以下代码更新我的index.html，但我不确定这是否正确。有人可以帮忙吗？

   <meta http-equiv="Content-Security-Policy" content="frame-ancestors 'none'">
   <meta http-equiv="X-Frame-Options" content="SAMEORIGIN"> 

Answer 1

x-frame-options 和 content-security-policy 是响应头而不是请求头。所以你需要把它放在服务器上而不是反应应用程序（客户端）中

Answer 2

如果您专门针对开发服务器进行讨论，则可以使用 'manually configure proxy' process. 配置底层 express 实例

你可以在那里设置标题：

// src/setupProxy.js

module.exports = function(app) {
  app.use((req, res, next) => {
    res.set({
        'foo': 'bar'
    });
      next();
  }); 
};

Answer 3

你必须覆盖 create-react-app 附带的一些 webpack 配置并添加 "X-Frame-Options": "SAMEORIGIN"。

但在 CRA 中，您不能直接使用 webpack.config.js 执行此操作。您必须使用重新连接 CRA 启动/构建应用程序方式的包。以下是您可以使用的重新布线包：

• react-app-rewired (CRA v1)
• customize-cra 或 rescript (CRA v2)
• craco (CRA v3)

要知道你用的是哪个CRA版本，可以大致按照package.json中的react-scripts版本。

克拉科

我成功完成了这个 craco 配置！！！在 craco.config.js 中：

module.exports = {
    webpack: {
        headers: {
            'X-Frame-Options': 'Deny'
        }
    }
}

（我在 Burpsuite 中通过扫描进行了测试；Frameable Response 问题已经消失。）

参考：How to set alias path via webpack in CRA (create-react-app) and craco?

react-app-rewired

我认为你可以试试这个，但我还没有测试过。在 config-overrides.js 中：

module.exports = {
    devServer: function(configFunction) {
        return function(proxy, allowedHost) {
            const config = configFunction(proxy, allowedHost)
            config.headers = {
                'X-Frame-Options': 'Deny'
            }
            return config
        }
    }
}

参考：Create React App adding CORS header

*可能是我弄错了版本，请指正。

Answer 4

仅仅修改index.html 是不够的，至少对于X-Frame-Options 而言。每OWASP：

常见的防御错误

尝试应用 X-Frame-Options 指令的元标记不起作用。例如，) 将不起作用。您必须将 X-FRAME-OPTIONS 指令应用为 HTTP 响应标头...

MDC 有a similar warning。

我花了一些时间寻找，但没有找到在 React 本身中设置 X-Frame-Options 的方法。有一些方法可以在服务器级别或使用其他语言（例如for Tomact，或in Java，或with webpack，或configure it with Spring Security），这可能对您有帮助，也可能对您没有帮助。

React 似乎也不支持Content-Security-Policy...至少not as of 2013，我搜索但没有发现任何最近的位置变化。