Mior Agency

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

Dans le passé, les développeurs devaient écrire toutes sortes de codes personnalisés pour que différentes applications se parlent. Mais, de nos jours, les interfaces de programmation d’applications (API) facilitent grandement les choses. Les API vous offrent tout ce dont vous avez besoin pour interagir avec différentes applications de manière transparente 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 vos 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 enregistré pour 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 pas de date d’expiration, il est effrayant de ne pas s’inquiéter de la sécurité de vos clés.

Pourquoi est-il nécessaire de protéger les clés API ?

La protection de vos clés API est cruciale pour assurer 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.
  • l’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 devrez peut-être payer 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 accède à votre clé API, elle peut voler, manipuler, supprimer ou utiliser vos données à ses propres 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.

Plus après le saut! Continuez à lire ci-dessous ↓

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 toute autre donnée que vous souhaitez garder cachée au public.

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

  1. Accédez au répertoire de votre application React et exécutez la commande suivante.
    npm install dotenv --save
    
  2. hors de src dossier dans le répertoire racine de votre projet, créez un nouveau fichier appelé .env.

    Une capture d'écran avec un fichier env mis en évidence dans le répertoire racine du projet
    (Grand aperçu)

  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 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 archive. Alors que faire alors ? Vous pouvez envisager d’utiliser le .gitignore fichier pour le cacher.

Il .gitignore Archive

Il .gitignore file est un fichier texte qui indique à Git d’ignorer les fichiers qui n’ont pas encore été ajoutés au référentiel lors de la transmission vers le référentiel. Pour ce faire, ajoutez le .env vers .gitignore avant de passer à la préparation de vos commits et de pousser votre code sur GitHub.

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

# api keys
.env

Veuillez noter que chaque fois que vous décidez d’héberger vos projets à l’aide d’une plate-forme d’hébergement, telle que Vercel ou Netlify, vous devez fournir vos variables d’environnement dans la configuration de votre projet et redéployer votre application peu de temps après pour voir les changements.

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 intégré dans le navigateur. Alors que pouvez-vous faire alors? 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 effectue la requête 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. Excellent! Voyons maintenant comment nous pouvons procéder :

  1. Installez les packages nécessaires.
    Pour commencer, vous devez installer quelques packages comme Express, CORS, Axios et Nodemon. 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 requêtes API.

    Une capture d'écran avec un fichier server.js en surbrillance dans le répertoire racine du projet
    (Grand aperçu)

  3. Initialisez les dépendances et définissez un point de terminaison.
    Dans votre fichier de serveur principal, initialisez les dépendances installées et définissez un point de terminaison qui effectuera une 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 à exécuter par le serveur proxy principal.

    Une capture d'écran avec une balise de script dans un fichier package.json
    (Grand aperçu)

  5. Démarrez le serveur principal en exécutant la commande suivante, 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;
    

Bien, tu l’as maintenant! En suivant ces étapes, vous pourrez masquer vos clés API à l’aide d’un serveur proxy backend dans votre application React.

Service de gestion des clés

Bien que les variables d’environnement et le serveur proxy principal 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 s’introduire dans 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
    AWS Secrets Manager est un service de gestion des secrets fourni par Amazon Web Services. Il vous permet de stocker et de récupérer par programmation des secrets tels que des informations d’identification de base de données, des clés d’API et d’autres informations sensibles via des appels d’API au service AWS Secret Manager. Il existe de nombreuses ressources qui peuvent vous aider à démarrer en un rien de temps.
  • Gestionnaire de secrets Google Cloud
    Google Cloud Secret Manager 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 back-end de Google en tant que service, ce qui en fait un excellent choix pour tout développeur à la recherche d’une solution simple.
  • Magasin de clés Azure
    Azure Key Vault 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 opter pour l’un de ceux mentionnés ci-dessus. Mais si vous souhaitez opter pour un service qui n’a pas été mentionné, c’est parfaitement bien aussi.

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

Il contient tout ce dont vous avez besoin pour protéger 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 utiles pour vous aider à identifier et à corriger les bogues dans la base de code de votre application React :

  1. Passez en revue votre base de code existante et identifiez toutes les clés d’API codées en dur qui doivent être masquées.
  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 permettra une gestion plus facile 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 assuré que les données de votre application sont sûres et sécurisées. Que vous utilisiez des variables d’environnement, un serveur proxy principal ou un outil de gestion de clés, ils garderont vos clés API à l’abri des regards indiscrets.

Lecture supplémentaire sur SmashingMag

édito fracassant
(jj, et k, le)

Laissez un commentaire

Derniers Posts
Une Question ? Un Projet ?
Quel que soit votre projet, MIOR AGENCY vous écoute, analyse vos besoins et propose des pistes de travail en conséquence. Vous avancez avec sérénité et confiance.