Quel est le véritable endroit/manière de sauvegarder les clés api dans une application react ?

Question

Je travaille sur un projet react en équipe. Nous utilisons quelques services tiers et ces services nécessitent des clés d'api. Actuellement, nous stockons ces clés directement dans le code. Comme je le sais, ce n'est pas bon et dangereux.

J'ai essayé de trouver quelques recommandations à cet égard . Toutes les façons de résoudre ce problème que je vois maintenant sont :

• créer .env et y stocker toutes les clés (mais dans ce cas, je dois partager mes clés avec les autres membres de l'équipe).
• ou déplacer toutes les clés vers le serveur et toujours faire un appel au serveur afin d'obtenir les informations requises (mais dans ce cas, je n'ai aucune idée de la façon de travailler avec les composants externes qui nécessitent des clés, par exemple google maps/places/dessins et ainsi de suite).

Quelle méthode utilisez-vous dans votre équipe et pourquoi ? J'aimerais comprendre quelle est la meilleure solution pour moi. Merci !

Answer 1

Vous ne pouvez pas vraiment cacher une clé d'API utilisée pour une API côté client telle que l'API JavaScript et ses services. La bonne façon de sécuriser votre clé d'API est d'ajouter des restrictions de clé d'API.

Consultez le guide de Google sur Meilleures pratiques en matière de clés API . Vous pouvez également jeter un coup d'œil à cette réponse .

J'espère que cela vous aidera !