17

I have a API in Express.js that will create blog posts and add them to my database. When I make a request from my React app inside of DevTools it will show my JWT. I am worried that when my site goes live people can see my token and make a request from their site to add unwanted posts. Please tell me what is going on and how I can prevent the security error.

user229044
  • 232,980
  • 40
  • 330
  • 338
Nathaniel Fredericks
  • 197
  • 1
  • 1
  • 10

2 Answers2

26

When you send a request with a token in the header it will look like this in the header pane in Developer Tools:

Token in request header

I assume that's what you are wondering whether is safe or not.

The connection between the React app and the API is unencrypted when you are using ordinary HTTP. That makes a replay attack possible – an ISP or another server between the front-end and the API can read the token and pretend to be you later on with the read token.

The most important solution to that is to use HTTPS, which is encrypted HTTP. Potential attackers are unable to sniff and steal the tokens when you are using HTTPS. When you are dealing with usernames, passwords, etc., you should always use HTTPS.

HTTPS is free to use and not very hard to set up. See here for more details. There is also an interesting discussion here that you might want to read.

Mika Sundland
  • 18,120
  • 16
  • 38
  • 50
  • 5
    Alright, so if I add HTTPS the Authorization header will not show? – Nathaniel Fredericks Nov 21 '17 at 12:31
  • 3
    @NathanielFredericks The header will show in Dev Tools, but the packet will be encrypted and can't be seen by anyone else. – Mika Sundland Nov 21 '17 at 12:35
  • 5
    Alright, but couldn’t people take the endpoint and token then make their own request still? – Nathaniel Fredericks Nov 21 '17 at 12:36
  • 8
    @NathanielFredericks The token isn't secret to the client (e.g. a user with a browser). They can do whatever they want with the token. They could copy/paste the token into Postman and play with the API there. So you have to make sure you don't issue the token to anyone that shouldn't have it. HTTPS prevents people other than the client to use the token, by being unable to sniff it when sending it from the client to the server. – Mika Sundland Nov 21 '17 at 12:41
  • 16
    This completely misses the point of the question, SSL is irrelevant to the actual question asked. – user229044 Feb 02 '18 at 12:52
  • I think Mika was accounting for the question being an [x-y problem](https://xyproblem.info/) – Ross Rogers Jan 26 '22 at 22:30
20

it's possible to see the JWT on the Chrome Dev tools because you are sending it as authorization header when creating a new blog post on your API, and you are making this request directly from the React application.

If the JWT is sensitive it should never be available on the front-end, you must have a server acting like a proxy, it should receive the request from the React application and then forward the request with JWT as the authorization header to your API.

Doing that you would avoid leaking the JWT, but it would still possible for someone to make requests to your proxy, which will be forwarded to your API.

If you want that only your react application be able to perform requests to your proxy, you could create a middleware which verifies the IP address of the incoming request (more details here), if it matches with your React app address then you accept the request, otherwise, you return a non-authorized error.

If you want only specific people to be able to create blog posts, then you should put authentication on the react application.

nicolastrres
  • 431
  • 6
  • 9
  • Do you mean this by proxy? https://daveceddia.com/create-react-app-express-backend/ – Nathaniel Fredericks Nov 21 '17 at 11:20
  • @NathanielFredericks yes that is a way to do it. If you see the part of "How the proxy works" on that article, it shows that your react app will call to http://localhost:3000/api/users, and it will forward the request to http://your-server/api/users. – nicolastrres Nov 21 '17 at 12:56
  • Alright. Does this kind of proxy work with Django too? – Nathaniel Fredericks Nov 21 '17 at 12:58
  • Yes, you could use Django, but usually is recommended the proxy be as thin as possible (with not too much logic), Django seems a big framework for something so simple, I would suggest taking a look to Flask. – nicolastrres Nov 21 '17 at 13:14
  • @nicolastrres But how will you implement it if you are using a cloud service like AWS lambda as your backend. – node_saini Jun 25 '19 at 14:09