Le moyen le plus sûr de masquer vos clés API lors de l’utilisation de React

À l’époque, les développeurs devaient écrire toutes sortes de codes personnalisés pour faire communiquer différentes applications entre elles. Mais, ces jours-ci, Interfaces de programmation d’applications (API) le rendent tellement plus facile. Les API vous fournissent tout ce dont vous avez besoin pour interagir avec différentes applications de manière fluide et efficace, le plus souvent lorsqu’une application demande des données à l’autre application.

Bien que les API offrent de nombreux avantages, elles présentent également un risque important pour la sécurité de votre application. C’est pourquoi il est essentiel de connaître leurs vulnérabilités et comment les protéger. Dans cet article, nous plongerons dans le monde merveilleux des clés API, expliquerons pourquoi vous devriez protéger vos clés API et examinerons les meilleures façons de le faire lorsque vous utilisez React.

Que sont les clés API ?

Si vous vous êtes récemment inscrit à une API, vous obtiendrez une clé API. Considérez les clés API comme des mots de passe secrets qui prouvent au fournisseur que c’est vous ou votre application qui tentez d’accéder à l’API. Alors que certaines API sont gratuites, d’autres facturent un coût d’accès, et comme la plupart des clés API n’ont aucune date d’expiration, il est effrayant de ne pas se soucier de la sécurité de vos clés.

Pourquoi les clés API doivent-elles être protégées ?

La protection de vos clés API est cruciale pour garantir la sécurité et l’intégrité de votre application. Voici quelques raisons pour lesquelles vous devriez protéger vos clés API :

• Pour empêcher les demandes d’API non autorisées.
  Si quelqu’un obtient votre clé API, il peut l’utiliser pour faire des demandes non autorisées, ce qui pourrait avoir de graves ramifications, surtout si votre API contient des données sensibles.
• Insécurité financière.
  Certaines API ont un coût financier. Et si quelqu’un accède à votre clé API et dépasse vos demandes de budget, vous risquez de vous retrouver avec une lourde facture qui pourrait vous coûter une tonne et mettre en péril votre stabilité financière.
• Vol, manipulation ou suppression de données.
  Si une personne malveillante obtient l’accès à votre clé API, elle peut voler, manipuler, supprimer ou utiliser vos données à ses fins.

Meilleures pratiques pour masquer les clés API dans une application React

Maintenant que vous comprenez pourquoi les clés API doivent être protégées, examinons quelques méthodes pour masquer les clés API et comment les intégrer dans votre application React.

Variables d’environnement

Variables d’environnement (env) sont utilisés pour stocker des informations sur l’environnement dans lequel un programme s’exécute. Il vous permet de masquer les données sensibles de votre code d’application, telles que les clés API, les jetons, les mots de passe et toutes les autres données que vous souhaitez garder cachées au public.

L’un des plus populaires env packages que vous pouvez utiliser dans votre application React pour masquer les données sensibles est le dotenv emballer. Pour commencer:

1. Accédez au répertoire de votre application React et exécutez la commande ci-dessous.

   npm install dotenv --save
   

2. En dehors de la src dossier dans le répertoire racine de votre projet, créez un nouveau fichier appelé .env.

   

3. Dans ton .env fichier, ajoutez la clé API et sa valeur correspondante au format suivant :

   // for CRA applications
   REACT_APP_API_KEY = A1234567890B0987654321C ------ correct
   
   // for Vite applications
   VITE_SOME_KEY = 12345GATGAT34562CDRSCEEG3T  ------ correct
   

4. Sauver la .env fichier et évitez de le partager publiquement ou de le soumettre au contrôle de version.
5. Vous pouvez maintenant utiliser le env object pour accéder à vos variables d’environnement dans votre application React.

   // for CRA applications
   'X-RapidAPI-Key':process.env.REACT_APP_API_KEY
   // for Vite  applications
   'X-RapidAPI-Key':import.meta.env.VITE_SOME_KEY
   

6. Redémarrez votre application pour que les modifications prennent effet.

Cependant, l’exécution de votre projet sur votre ordinateur local n’est que le début. À un moment donné, vous devrez peut-être télécharger votre code sur GitHub, ce qui pourrait potentiellement exposer votre .env déposer. Alors que faire alors ? Vous pouvez envisager d’utiliser le .gitignore fichier pour le cacher.

Le .gitignore Déposer

Le .gitignore file est un fichier texte qui demande à Git d’ignorer les fichiers qui n’ont pas encore été ajoutés au référentiel lorsqu’il est poussé vers le référentiel. Pour ce faire, ajoutez le .env au .gitignore fichier avant de passer à la mise en scène de vos commits et de pousser votre code vers GitHub.

// .gitignore
# dependencies
/node_modules
/.pnp
.pnp.js

# api keys
.env

Gardez à l’esprit qu’à tout moment vous décidez d’héberger vos projets en utilisant n’importe quelle plate-forme d’hébergement, comme Vercel ou Netlifiervous devez fournir vos variables d’environnement dans les paramètres de votre projet et, peu de temps après, redéployer votre application pour afficher les modifications.

Serveur proxy principal

Bien que les variables d’environnement puissent être un excellent moyen de protéger vos clés API, n’oubliez pas qu’elles peuvent toujours être compromises. Vos clés peuvent toujours être volées si un attaquant inspecte votre code groupé dans le navigateur. Alors, que pouvez-vous faire ? Utilisez un serveur proxy principal.

Un serveur proxy principal agit comme un intermédiaire entre votre application cliente et votre application serveur. Au lieu d’accéder directement à l’API depuis le frontal, le frontal envoie une requête au serveur proxy principal ; le serveur proxy récupère alors la clé API et fait la demande à l’API. Une fois la réponse reçue, il supprime la clé API avant de renvoyer la réponse au frontal. De cette façon, votre clé API n’apparaîtra jamais dans votre code frontal et personne ne pourra voler votre clé API en inspectant votre code. Super! Voyons maintenant comment nous pouvons nous y prendre :

1. Installez les packages nécessaires.
   Pour commencer, vous devez installer certains packages tels que Exprimer, SCRO, Axioset Nodémon. Pour ce faire, accédez au répertoire contenant votre projet React et exécutez la commande suivante :

   npm install express cors axios nodemon
   

2. Créez un fichier de serveur principal.
   Dans le répertoire racine de votre projet, en dehors de votre src dossier, créez un fichier JavaScript qui contiendra toutes vos demandes à l’API.

   

3. Initialisez les dépendances et configurez un point de terminaison.
   Dans votre fichier de serveur principal, initialisez les dépendances installées et configurez un point de terminaison qui fera un GET demande à l’API tierce et renvoie les données de réponse sur le port écouté. Voici un exemple d’extrait de code :

   // defining the server port
   const port = 5000
   
   // initializing installed dependencies
   const express = require('express')
   require('dotenv').config()
   const axios = require('axios')
   const app = express()
   const cors = require('cors')
   app.use(cors())
   
   // listening for port 5000
   app.listen(5000, ()=> console.log(`Server is running on ${port}` ))
   
   // API request
   app.get('/', (req,res)=>{    
       const options = {
           method: 'GET',
           url: 'https://wft-geo-db.p.rapidapi.com/v1/geo/adminDivisions',
           headers: {
               'X-RapidAPI-Key':process.env.REACT_APP_API_KEY,
               'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
           }
      };
      
       axios.request(options).then(function (response) {
           res.json(response.data);
       }).catch(function (error) {
           console.error(error);
       });
   }
   

4. Ajoutez une balise de script dans votre package.json fichier qui exécutera le serveur proxy principal.

   

5. Lancez le serveur principal en exécutant la commande ci-dessous, puis, dans ce cas, accédez à localhost:5000.

   npm run start:backend
   

6. Faites une demande au serveur principal (http://localhost:5000/) depuis le frontal plutôt que directement vers le point de terminaison de l’API. Voici une illustration :

   import axios from "axios";
   import {useState, useEffect} from "react"
   
   function App() {
   
     const [data, setData] = useState(null)
   
     useEffect(()=>{
       const options = {
         method: 'GET',
         url: "http://localhost:5000",
       }
       axios.request(options)
       .then(function (response) {
           setData(response.data.data)
       })
       .catch(function (error) {
           console.error(error);
       })  
     }, [])
   
     console.log(data)
   
     return (
       <main className="App">
       <h1>How to Create a Backend Proxy Server for Your API Keys</h1>
        {data && data.map((result)=>(
         <section key ={result.id}>
           <h4>Name:{result.name}</h4>
           <p>Population:{result.population}</p>
           <p>Region:{result.region}</p>
           <p>Latitude:{result.latitude}</p>
           <p>Longitude:{result.longitude}</p>
         </section>
       ))}
       </main>
     )
   }
   export default App;
   

D’accord, vous l’avez! En suivant ces étapes, vous pourrez masquer vos clés API à l’aide d’un serveur proxy principal dans votre application React.

Service de gestion des clés

Même si les variables d’environnement et le serveur proxy back-end vous permettent de masquer en toute sécurité vos clés API en ligne, vous n’êtes toujours pas complètement en sécurité. Vous pouvez avoir des amis ou des ennemis autour de vous qui peuvent accéder à votre ordinateur et voler votre clé API. C’est pourquoi le cryptage des données est essentiel.

Avec un fournisseur de services de gestion de clés, vous pouvez chiffrer, utiliser et gérer vos clés API. Il existe des tonnes de services de gestion de clés que vous pouvez intégrer à votre application React, mais pour simplifier les choses, je n’en mentionnerai que quelques-uns :

• Gestionnaire de secrets AWS
  Le Gestionnaire de secrets AWS est un service de gestion de secrets fourni par Amazon Web Services. Il vous permet de stocker et de récupérer des secrets tels que des informations d’identification de base de données, des clés d’API et d’autres informations sensibles par programmation via des appels d’API au service AWS Secret Manager. Il existe une tonne de ressources qui peuvent vous aider à démarrer en un rien de temps.
• Gestionnaire de secrets Google Cloud
  Le Gestionnaire de secrets Google Cloud est un service de gestion de clés fourni et entièrement géré par Google Cloud Platform. Il est capable de stocker, de gérer et d’accéder à des données sensibles telles que des clés API, des mots de passe et des certificats. La meilleure partie est qu’il s’intègre de manière transparente aux fonctionnalités de back-end en tant que service de Google, ce qui en fait un excellent choix pour tout développeur à la recherche d’une solution simple.
• Coffre de clés Azure
  Le Coffre de clés Azure est un service basé sur le cloud fourni par Microsoft Azure qui vous permet de stocker et de gérer de manière transparente une variété de secrets, y compris les mots de passe, les clés API, les chaînes de connexion à la base de données et d’autres données sensibles que vous ne souhaitez pas exposer directement dans votre code d’application .

Il existe d’autres services de gestion de clés disponibles, et vous pouvez choisir d’utiliser l’un de ceux mentionnés ci-dessus. Mais si vous voulez aller avec un service qui n’a pas été mentionné, c’est parfaitement bien aussi.

Conseils pour assurer la sécurité de vos clés API

Vous avez tout ce dont vous avez besoin pour sécuriser vos clés API et vos données. Donc, si vous avez des projets existants dans lesquels vous avez accidentellement exposé vos clés API, ne vous inquiétez pas ; J’ai rassemblé quelques conseils pratiques pour vous aider à identifier et à corriger les failles dans la base de code de votre application React :

1. Passez en revue votre base de code existante et identifiez toute clé d’API codée en dur qui doit être masquée.
2. Utiliser des variables d’environnement avec .gitignore pour stocker en toute sécurité vos clés API. Cela aidera à prévenir l’exposition accidentelle de vos clés et facilitera la gestion dans différents environnements.
3. Pour ajouter une couche de sécurité supplémentaire, envisagez d’utiliser un serveur proxy principal pour protéger vos clés API et, pour les besoins de sécurité avancés, un outil de gestion des clés ferait l’affaire.

Conclusion

Génial! Vous pouvez désormais protéger vos clés API dans React comme un pro et être sûr que les données de votre application sont sûres et sécurisées. Que vous utilisiez des variables d’environnement, un serveur proxy back-end ou un outil de gestion de clés, ils garderont vos clés API à l’abri des regards indiscrets.

Lectures complémentaires sur SmashingMag

(dd, yk, le)