如何为使用“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

您必须覆盖 create-react-app 和 add 附带的一些 webpack 配置"X-Frame-Options": "SAMEORIGIN"。

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

• 反应应用程序重新连线（CRA v1）
• 定制-cra 或 rescript (CRA v2)
• 克拉科（CRA v3）

要了解您使用的是哪个 CRA 版本，您可以粗略地跟踪react-scripts您的package.json.

克拉科

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

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

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

参考：如何在CRA（create-react-app）和craco中通过webpack设置别名路径？

反应应用程序重新连线

我想你可以试试这个，但我还没有测试过。在 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
        }
    }
}

参考：创建 React App 添加 CORS 标头

*我可能粗略地得到了错误的版本，如果是的话请纠正。

Answer 2

简单地进行修改index.html是不够的，至少对于X-Frame-Options. 每个OWASP：

常见的防御错误

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

MDC 也有类似的警告。

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

React 似乎也不支持Content-Security-Policy……至少在 2013 年不支持，我进行了搜索，但没有发现最近的位置变化。

Answer 3

如果您专门针对开发服务器进行讨论，则可以使用“手动配置代理”过程来配置底层 Express 实例。

您可以在那里设置标题：

// src/setupProxy.js

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