Question 252586 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How can I secure an API key from being exposed in the devtools?

I’m working on a React + Node application where users fill out a form on a web page and receive a Discord role. I’ve been advised to store the Discord API key on the Node server rather than in the React application to prevent users from inspecting it using devtools. However, I’m unsure how to securely pass this API key from Node to React without exposing it. If I use a GET request to fetch the key, wouldn’t the key be exposed in the fetch URL, potentially allowing a user to access it via devtools?

I’m concerned about the security implications, as someone who discovers the API key could potentially gain control over my bot, which has admin privileges on my Discord server.

If I use a fetch request to obtain this secret key from a Node server, won’t the user still be able to view the fetch URL in the devtools, potentially allowing them to access and retrieve the key? If so, how can I prevent it from ever happening?

Tags:

2

Answers


  1. 0

    The best way of storing delicate information in React is by using a .env file, I’ve been doing it for years and never had a problem because you can’t access it via DevTools, besides, no one is going to look this deep into the tools to find your discord key…

    Login or Signup to reply.
  2. 0

    TLDR: Don’t even give the key to the client.

    If I use a fetch request to obtain this secret key from a Node server, won’t the user still be able to view the fetch URL in the devtools, potentially allowing them to access and retrieve the key?

    Yes, if you let the client (e.g coding running in the browser) have access to the key, then any developer/hacker can steal it out of the client. Further, if you have a server endpoint that retrieves the key, then any hacker can just use that endpoint to directly get the key – they don’t even have to get it from the browser running your web page.

    If so, how can I prevent it from ever happening?

    If you want the dev key to remain a secret, you can never give it to the client. Instead, the key must remain on the server and be used only from the server. Intead, the server must serve as the gateway for everything that the key is used for. If the client wants some data that requires use of the key, then the client must ask the server for the data, the server can then retrieve the data using the key and return the data back to the client. The key stays on the server.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search