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

Question

我使用 "create-react-app" 创建了一个示例 react 应用程序。 我需要使用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"> 

- knbibin

---

更新 index.html 应该没问题。 - user2473779

你能详细说明一下你所指的是什么吗？你是指在向API端点发送HTTP请求时，请求头中的HTTP头吗？ - Jackyef

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

Answer 1

如果您要添加"X-Frame-Options": "SAMEORIGIN"，那么您需要覆盖一些由create-react-app提供的webpack配置。

但是在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配置！！！在craco.config.js中：

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

（我在Burpsuite中进行了扫描测试，Frameable Response问题已经解决。）

参考文献：如何通过webpack在CRA(create-react-app)和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 添加 CORS 头部信息

*如果版本有误，请纠正。

- hoohoo-b

---

react-app-rewired 的示例可用，我确认过了。 - Monsignor

谢谢！这真的很有帮助！现在如果有人能告诉我为什么头部在本地工作但在部署到Heroku时不起作用（使用react-app-rewired），我会更感激:D - Pranav Pillai

使用 Craco 6.1 版本时，我必须设置 devServer 导出项：module.exports = { devServer: (cfg) => { cfg.headers = { 'X-Frame-Options': 'Deny' }; return cfg }, ... - z0r

Answer 2

简单修改index.html是不够的，至少对于X-Frame-Options来说是这样。根据OWASP的说法：

常见防御错误

尝试应用X-Frame-Options指令的元标记无效。例如<meta http-equiv="X-Frame-Options" content="...">是无效的。您必须将X-FRAME-OPTIONS指令作为HTTP响应标头应用...

MDC也有类似的警告。

我花了一些时间进行了搜索，但没有找到在React本身中设置X-Frame-Options的方法。有一些方法可以在服务器级别或其他语言（例如Tomact，或Java，或使用webpack，或使用Spring Security进行配置）中实现，这可能对您有所帮助。

React似乎也不支持Content-Security-Policy...至少截至2013年，我搜索了一下，但没有找到任何更改立场的最新信息。

- SOLO

---

说了这么多，如果我错过了什么，有人能指出在React中实现这个的方法，那我会非常感激。 - SOLO

是的，如果有人知道如何在ReactJS中实现它，请回复。 - Amol Chaudhari

我使用craco为webpack的devServer注入了一些标题，这是npm start与CRA一起使用的。第一次就成功了。 头文件： { 'Cross-Origin-Opener-Policy': 'same-origin', 'Cross-Origin-Embedder-Policy': 'require-corp', } 不过，craco需要一些承诺。如果你被你试图解决的问题逼疯了，它会有所帮助。 - OsamaBinLogin

Answer 3

如果你特别针对开发服务器进行讨论，你可以使用“手动配置代理”进程来配置基础的 Express 实例。

在那里你可以设置头信息：

// src/setupProxy.js

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

- dwjohnston

Answer 4

对于react-scripts start，请更新您的src/setupProxy.js文件：

module.exports = function (app) {
  app.use(function (req, res, next) {
    res.setHeader("X-Frame-Options", "DENY");
    next();
  });
};

如果你在使用Heroku并且使用构建包更新，请更新static.json:

{
  "root": "build/",
  "https_only": true,
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  },
  "headers": {
    "/**": {
      "X-Frame-Options": "DENY"
    }
  }
}

如果你通过Apache来托管你的应用（生产环境）：

RequestHeader setIfEmpty X-Frame-Options "DENY"

对于旧版（v2.4.7之前）并使用set的情况：

<Location /app>
    RequestHeader set X-Frame-Options  "DENY"
</Location>

- gavenkoa

Answer 5

x-frame-options和content-security-policy是响应头而不是请求头。因此，你需要将它们放在服务器上，而不是在React应用程序（客户端）中。

- pantech