how to hide secret keys in react js application (frontend side)-CodePudding

I am trying to hide a secret key in react js frontend application, I know it's not a good idea, but I don't have the choice, in fact I want my frontend application (react js) to be the only thing that send requets to my backend application and I thought it's a good idea to have a secret key to send it in the backend side this way I'm sure that it a legitim request and allow it.

I tried .env it's does'nt worded

CodePudding user response：

CORS restricting access for only specific domain on the backend. E.g in Nodejs express:

var cors = require('cors')
var app = express()

app.use(cors({
  origin: ['http://example.com', 'http://example2.com'],
}))

For more security, we can implement asymmetric encryption feature like RSA encryption.

CodePudding user response：

To use .env with React you have to prefix your key with REACT_APP_

create .env file at root of the project
create a key in .env for example : REACT_APP_API_KEY=abc123
access it with process.env.REACT_APP_API_KEY

If you created your React app with create-react-app, no need to install dotenv.