如何为使用“create-react-app"创建的 React 应用程序设置标头 [英] How to set headers for a React app created using 'create-react-app'

问题描述

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

I created a sample react app using "create-react-app". I need to set the request headers with X-Frame-options and Content-Security-Policy. How do I do this? I just tried to update my index.html with the below code, but I'm not sure whether this it's right or not. Can anyone help with this?

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

推荐答案

简单地修改 index.html 是不够的，至少对于 X-Frame-Options>.根据 OWASP:

Simply modifying index.html as you have is not sufficient, at least for X-Frame-Options. Per OWASP:

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

Common Defense Mistakes

Meta-tags that attempt to apply the X-Frame-Options directive DO NOT WORK. For example, ) will not work. You must apply the X-FRAME-OPTIONS directive as HTTP Response Header...

MDC 有类似警告.

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

I spent some time looking, but didn't find a way to set X-Frame-Options in React itself. There are ways to do it at the server level or in other languages (e.g. for Tomact, or in Java, or with webpack, or configure it with Spring Security), which may or may not be helpful to you.

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

React doesn't seem to support Content-Security-Policy either... at least not as of 2013, and I searched but did not find any more recent change in position.

这篇关于如何为使用“create-react-app"创建的 React 应用程序设置标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！