Les bases de la limitation de débit : comment cela fonctionne et comment l'utiliser

La limitation de débit est un concept essentiel dans le développement Web. Il garantit la stabilité du serveur, une allocation efficace des ressources et une protection contre les attaques malveillantes. Ainsi, dans cet article, nous approfondirons l’essence de la limitation de débit, son importance, diverses méthodes de mise en œuvre et des exemples pratiques pour démontrer sa fonctionnalité. Allons-y directement ?

Qu’est-ce que la limitation de débit ?

La limitation de débit est une stratégie utilisée pour contrôler la quantité de requêtes entrantes ou le trafic vers un service Web ou vers un serveur. il aide à protéger vos applications contre les abus, garantit une répartition équitable des ressources et maintient la stabilité du service.

Pourquoi utiliser la limitation de débit ?

Voici quelques-unes des raisons pour lesquelles vous devriez utiliser la limitation de débit ??

• Prévenir les abus : empêche les robots ou les utilisateurs malveillants de submerger le serveur de requêtes.
• Gestion des ressources : garantit une utilisation équitable des ressources entre tous les utilisateurs.
• Sécurité : aide à prévenir les attaques par force brute en limitant les tentatives de certains points de terminaison de votre application.
• Contrôle des coûts : permet d'éviter des frais inattendus dus à des appels API excessifs.
• Performance : maintient votre serveur réactif et réduit le risque de temps d'arrêt.

Types de limitation de débit

1. Limitation du débit à fenêtre fixe (ou simple) : Cette méthode limite les demandes dans une fenêtre de temps fixe. Par exemple, « 100 requêtes par minute ». » 
2. Limitation du débit par fenêtre coulissante : une période dynamique qui suit et limite les demandes sur une période récente, comme les dernières minutes ou secondes.
3. Token Bucket Algorithm : Cette méthode utilise un "bucket" rempli de jetons pour gérer les requêtes. Chaque requête entrante consomme un jeton et le compartiment est rempli à intervalles définis. Cette approche permet des rafales de trafic tout en maintenant une limite de débit globale.
4. Algorithme de seau qui fuit : similaire au seau à jetons, mais avec une touche d'originalité. Lorsque le seau est plein, les demandes excédentaires « s'échappent » ou sont rejetées, maintenant ainsi un flux constant.

? Je ne vais même pas mentir car je ne connais pas grand chose aux algorithmes Token Bucket et Leaky Bucket, car je n'en ai pas eu besoin pour mes projets actuels. Cependant, la fenêtre fixe et la fenêtre coulissante sont les types les plus courants que vous rencontrerez. Par exemple, GPT-4 d'OpenAI utilise une limitation de débit de fenêtre fixe avec des limites échelonnées : leur premier niveau autorise 500 requêtes par minute. Cette approche peut entraîner une explosion du trafic, car les utilisateurs peuvent atteindre leur limite juste avant la réinitialisation de la fenêtre.

Comment fonctionne la limitation de débit

Le processus implique généralement :

1. Suivi : surveillance du nombre de demandes qu'un utilisateur (principalement l'ID utilisateur) ou une adresse IP a effectuées dans un délai spécifique.
2. Seuil : Définir une limite (par exemple, 100 requêtes par heure).
3. Réponse : envoi d'un avertissement ou blocage d'autres requêtes lorsque la limite est dépassée (généralement avec un code d'état HTTP 429 Too Many Requests).

Mise en œuvre de la limitation de débit : exemples pratiques

Maintenant que vous avez une compréhension de base de la limitation de débit et de son fonctionnement, mettons la main à la pâte en la mettant en œuvre dans un projet que nous allons créer.

Nous allons créer deux projets démontrant la limitation de débit :

1. Un exemple de requête GET
2. Un exemple de requête POST

Pile technologique

• Frontend : React (en utilisant Vite)
• Backend : Express (framework Node.js)

Exemple de requête GET

Créez un dossier avec le nom de votre choix et ouvrez-le sur le code VS ou quel que soit l'éditeur de code que vous utilisez.

Dans ce dossier que vous avez créé, créez deux autres dossiers appelés frontend et backend.

Après cela, cd dans les dossiers backend et entrez cette commande npm init -y pour initialiser un fichier package.json

Après cela, installez les packages npm suivants dans le dossier backend ??

npm install express cors express-rate-limit

npm install -D nodemon

Que font-ils :

• express : crée votre serveur Web et gère les routes API
• cors : permet au frontend de communiquer avec le backend en toute sécurité
• express-rate-limit : Protège votre API d'un trop grand nombre de requêtes
• nodemon : Redémarre automatiquement le serveur pendant le développement (c'est pourquoi nous utilisons D)

Après cela, créez un fichier index.js (vous pouvez le faire comme vous voulez) car nous l'utiliserons pour configurer le limiteur de débit.

Après avoir fini, copiez et collez ce code que je vais vous expliquer dans un instant

const express = require("express");
const rateLimit = require("express-rate-limit");

const app = express();

// Set up rate limiter: 100 requests per 15 minutes
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // Limit each IP to 5 requests per `window` (here, per 15 minutes)
  message: "Too many requests from this IP, please try again later.",
});

// Apply the rate limiting middleware to all requests
app.use(limiter);

app.get("/api/data", (req, res) => {
  res.send("Welcome to the API!");
});

app.listen(5000, () => {
  console.log("Server running on http://localhost:5000");
});

Voici ce que fait chaque partie :

1. Les deux premières lignes importent nos packages nécessaires
2. app = express() crée notre serveur
3. Le limiteur est configuré avec :
   • windowMs : définit une fenêtre de temps de 15 minutes (15 × 60 × 1000 millisecondes)
   • max : autorise 5 requêtes par adresse IP dans cette fenêtre
   • message : Le message d'erreur que les utilisateurs voient lorsqu'ils dépassent la limite

Puis :

1. app.use(limiter) applique notre limite de tarif à tous les itinéraires
2. Nous créons une route de test simple sur '/api/data' qui envoie un message de bienvenue
3. Enfin, on démarre le serveur sur le port 5000

Lorsque les utilisateurs accèdent à votre API plus de 100 fois en 15 minutes à partir de la même adresse IP, ils reçoivent le message d'erreur au lieu d'accéder à l'API.

Maintenant que vous savez comment cela fonctionne, nous souhaitons activer le redémarrage automatique en ajoutant à package.json ??

 {
  "scripts": {
    "dev": "nodemon index.js"
  }
}

C'est tout pour le backend.

Il est temps de configurer le frontend.

• Ouvrez un nouveau terminal et cd dans le dossier frontend et exécutez ??

npm install express cors express-rate-limit

npm install -D nodemon

• Suivez les instructions suivantes et je vous conseillerai de sélectionner JavaScript si vous ne connaissez pas Typescript
• Vous pouvez faire un petit ménage en vous débarrassant de certains fichiers dont vous n'aurez pas besoin. voici à quoi ressemble le mien

• Une fois que vous avez terminé, ouvrez l'App.jsx et collez ce code que je vais vous expliquer ??

const express = require("express");
const rateLimit = require("express-rate-limit");

const app = express();

// Set up rate limiter: 100 requests per 15 minutes
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // Limit each IP to 5 requests per `window` (here, per 15 minutes)
  message: "Too many requests from this IP, please try again later.",
});

// Apply the rate limiting middleware to all requests
app.use(limiter);

app.get("/api/data", (req, res) => {
  res.send("Welcome to the API!");
});

app.listen(5000, () => {
  console.log("Server running on http://localhost:5000");
});

Voici ce qui se passe :

1. Nous importons useState pour gérer les données et axios pour faire des requêtes API
2. Nous créons deux variables d'état :
   • réponse : stocke les réponses API réussies
   • error : stocke tous les messages d'erreur
3. La fonction fetchData :
   • Est appelé lorsque le bouton est cliqué
   • Essaye de récupérer des données de notre API
   • Mise à jour soit de la réponse, soit de l'état d'erreur
   • Utilise try/catch pour gérer les succès et les erreurs
4. L'interface utilisateur affiche :
   • Un titre
   • Un bouton pour déclencher des requêtes
   • La réponse de l'API (en cas de succès)
   • Messages d'erreur en rouge (si la requête échoue) Lorsque vous cliquez sur le bouton trop de fois en 15 minutes, vous verrez le message d'erreur de limite de débit en raison de nos restrictions backend !

Il s’agit de l’exemple de requête GET. Passons à l'exemple suivant

Exemple de requête POST

Pour cet exemple, vous pouvez décider de commenter le code du premier exemple et coller ce code ??

 {
  "scripts": {
    "dev": "nodemon index.js"
  }
}

Vous pouvez voir que la plupart du code est identique à celui du premier exemple, mais voici juste quelques différences clés ??

• Ajout de bodyParser pour gérer les données du formulaire
• Crée un point de terminaison POST qui traite les soumissions de formulaires

Collez également ce code sur le frontend

  npm create vite@latest .

Ici, nous faisons simplement une requête au serveur via un formulaire. Voyons en quoi cela diffère de l'exemple GET :

1. Utilise un formulaire au lieu d'un seul bouton
2. Gère l'état du formulaire avec formData
3. Gère les modifications d'entrée avec handleInputChange
4. Utilise la requête POST au lieu de GET
5. Affiche le message de réussite en vert

Le formulaire autorise 5 soumissions en 15 minutes - après cela, les utilisateurs voient le message d'erreur de limite de débit.

Conclusion

Très bien les gars, félicitations pour être arrivés à la fin de cet article ?. J'espère que vous avez maintenant une idée du fonctionnement de la limitation de débit et des raisons pour lesquelles vous devriez l'utiliser sur vos projets, surtout si vous travaillez sur des projets plus importants qui impliquent de l'argent. Si vous avez des questions, n'hésitez pas à les poser dans le commentaire. Bon codage ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!