我使用“ 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">
简单地进行修改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 年不支持，我进行了搜索，但没有发现最近的位置变化。
您必须覆盖 create-react-app 附带的一些 webpack 配置并添加"X-Frame-Options": "SAMEORIGIN".
但是在 CRA 中，您不能直接使用webpack.config.js. 你必须使用一个包来重新连接 CRA 启动/构建你的应用程序的方式。以下是您可以使用的重新布线包：
要知道您使用的是哪个 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
}
}
}
*我可能把版本弄错了，如果是这样，请更正。
如果您专门针对开发服务器，您可以使用“手动配置代理”过程配置底层 express 实例。
您可以在那里设置标题：
// src/setupProxy.js
module.exports = function(app) {
app.use((req, res, next) => {
res.set({
'foo': 'bar'
});
next();
});
};
x-frame-options 和 content-security-policy 是响应头而不是请求头。所以你需要把它放在服务器上而不是在react应用程序（客户端）