Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set headers for a React app created using 'create-react-app'

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"> 
like image 506
knbibin Avatar asked Apr 18 '18 09:04

knbibin


People also ask

How do I add a header in React app?

To create a Header, we will use App Bar from Material UI which will provide screen titles, navigation, and actions. Also, we will need a ToolBar inside which will set the properties to child components making them all horizontally aligned. Then we will make some changes to our default Home page i.e. App.

How do I change the title in Create React app?

You may edit the <title> tag in it to change the title from “React App” to anything else. Note that normally you wouldn't edit files in the public folder very often.


1 Answers

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

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 has a similar warning.

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 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.

like image 129
SOLO Avatar answered Sep 27 '22 18:09

SOLO