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

Posted 2023-02-19

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

【英文标题】：How to set headers for a React app created using 'create-react-app'

【发布时间】：2018-09-28 12:23:30

【问题描述】：

我使用“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"> 

【问题讨论】：

更新 index.html 应该没问题..

你能详细说明你指的是什么吗？当您向 API 端点发送 HTTP 请求时，您是否指的是 http 标头中的请求标头？

@Jackyef：我想发送带有 x-Frame-Options 的 http 响应标头，指示浏览器在不允许的地方限制框架。

【参考方案1】：

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

【参考方案2】：

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

你可以在那里设置标题：

// src/setupProxy.js

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

【讨论】：

这对我有用，谢谢

【参考方案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

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

【讨论】：

react-app-rewired 的示例有效，我确认。

谢谢！这很有帮助！现在，如果有人能告诉我为什么标头在本地工作但现在部署到 Heroku（使用 react-app-rewired），我会更加感激：D

【参考方案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，我搜索但没有发现任何最近的位置变化。

【讨论】：

话虽如此，如果我错过了什么并且有人可以指出在 React 中执行此操作的方法，我会很高兴。

是的，如果有人对如何在 reactjs 中执行此操作有任何解决方案，请回复