CODEWITHSUNDEEP
reactjsfirebasefunctionapikey
Vincenzo
Vincenzo

Reputation: 423

Hiding api key with firebase function

I'm trying to hide my reCAPTCHA key from appearing in my front end (React). I don't know how useful it can be but how about making a request to a certain endpoint and then make it a componentDidMount when getting the data back. This might sound not secure at all but what's the best solution for these kinds of problems?

ok so I should create a function (that I still don't get right) that looks similar to this

exports.captcha = functions.https.onRequest((req, res) => { 
//should i set the origin to be my domain.com here  
res.set('Access-Control-Allow-Origin', '*'); 
res.set('Access-Control-Allow-Methods', 'GET, PUT, POST, OPTIONS');   res.set('Access-Control-Allow-Headers', '*');  
if (req.method === 'OPTIONS') {
 res.end(); 
}  else {  
 cors(req, res, () => {
  if (req.method !== 'GET') { 
   return; 
 } 
   return res.send('Api key',(err,info)=> {
    if(err){
     return res.send(err.toString())
    }
      return res.send("sent")
    }  
 });  
}});

Upvotes: 0

Views: 1101

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598728

Any time the API key is used inside client-side code, a malicious user can take it and use it. Since that is exactly what you're trying to prevent, the only secure solution is to not use that API key in client-side code. That means you'll need to wrap the functionality in your server-side code, and expose only inputs and outputs that you want. It also means you'll want to secure access to the Cloud Functions endpoint (who can call it and what they can do), as unsecured access is equivalent to allowing them to use the API key directly.

Some API keys, such as those for Firebase's Authentication, Realtime Database, Cloud Firestore, and Cloud Storage products allow you to restrict where or how a user with the keys can use those products. In cases such as those, it's better to see the API keys as configuration data

Upvotes: 1

Related Questions