Utilisation de clés API dans une application de réaction
J'ai une application React qui utilise deux services tiers. L'application a été lancée à l'aide de react-create-app.
Ces deux services nécessitent une clé API.
Une clé est fournie via une balise script, comme ceci:
<script type="text/javascript" src="https://myapi?key=MY_KEY">
</script>
L'autre clé API est utilisée dans une demande. Je stocke la clé réelle dans une constante et l'utilise pour former la demande. Comme ça:
const MY_OTHER_KEY = 'MY_OTHER_KEY'
let url = `http://myotherapi?key=${MY_OTHER_KEY}&q=${query}`
Google Meilleures pratiques sur la gestion des clés d'API indique:
Ne pas incorporer les clés d'API directement dans le code
Cela m'amène à ma première question:
1. Comment utiliser les variables dans index.html?
Dans mon index.html fichier, j'ai deux balises qui ressemblent à ceci:
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
Évidemment, %PUBLIC_URL%is une variable. Comment puis-je ajouter une variable %MY_KEY% pour éviter d’intégrer la clé API directement dans mon code?
Pour obtenir quelque chose comme ça:
<script type="text/javascript" src="https://myapi?key=%MY_KEY%">
</script>
En rapport avec cette question, est-il prudent d’avoir la clé API stockée dans une constante, comme je le fais pour MY_OTHER_KEY?
Google dit aussi:
Ne stockez pas les clés d'API dans des fichiers de l'arborescence source de votre application.
Cela m'amène à ma deuxième question:
2. La clé API ne se retrouve-t-elle toujours pas dans le bundle?
Dites que je fais ce que Google dit et je
... stockez-les dans des variables d'environnement ou dans des fichiers en dehors de l'arborescence source de votre application
Dites que je stocke une clé dans un fichier externe. Je suppose que ce fichier sera lu à un moment donné et que son contenu sera soit copié dans la liasse, soit référencé d’une autre manière. En fin de compte, la clé ne sera-t-elle toujours pas visible dans le paquet, sauf peut-être plus difficile à trouver? Comment cela aide-t-il exactement?
3. Existe-t-il un moyen canonique d'utiliser les clés API dans une application de réaction? Ou est-ce au développeur individuel?
Je m'explique, je cherche la façon de réagir pour résoudre ce problème, le cas échéant.
Merci de votre aide!
1. Comment utiliser les variables dans index.html?
Réponse 1: Veuillez cliquer sur Ajout de variables d'environnement personnalisées pour savoir comment ajouter des variables d'environnement du type que vous avez affiché. par exemple.
2. La clé API ne se retrouve-t-elle toujours pas dans le bundle?
Réponse 2: Même lorsque vous avez votre clé (MY_KEY) en tant que variable d’environnement dans la balise de script, celle-ci sera rendue sur la page et sera visible. Généralement, ce sont des clés de navigateur qui sont destinées à être utilisées côté client. Celles-ci peuvent être restreintes en fournissant un en-tête Http Referer dans votre demande. Plus sur l'efficacité de la sécurisation de ces clés ici . Cependant, les clés API (comme MY_OTHER_KEY) ne sont pas censés être utilisés côté client et ne doivent pas être rendus dans la balise de script ni stockés dans le JS côté client.
3. Existe-t-il un moyen canonique d'utiliser les clés API dans une application de réaction? Ou est-ce au développeur individuel?
Réponse 3: La manière canonique d'utiliser une clé d'API tierce consiste pour votre application côté client à envoyer une demande à votre API backend. Votre API dorsale formate ensuite la demande conformément à l'API tierce, ajoute la clé et appelle l'appel de l'API tierce. Une fois la réponse reçue, elle peut soit la décompresser et la traduire en objets de domaine que votre application frontale comprendrait, soit renvoyer la réponse brute à l'application frontale. De cette manière, la clé d'API reste dans le backend et n'est jamais envoyée au côté client.