Maison  >  Article  >  développement back-end  >  Comment utiliser PHP et Vue.js pour développer des applications qui protègent contre les attaques malveillantes d'accès aux API

Comment utiliser PHP et Vue.js pour développer des applications qui protègent contre les attaques malveillantes d'accès aux API

WBOY
WBOYoriginal
2023-07-05 19:42:10616parcourir

Comment utiliser PHP et Vue.js pour développer des applications qui se défendent contre les attaques malveillantes d'accès aux API

Les attaques malveillantes d'accès aux API constituent une menace sérieuse pour la sécurité des applications Internet. Afin de protéger nos applications contre les attaques malveillantes, nous devons prendre des mesures efficaces pour nous défendre contre ces attaques.

Cet article expliquera comment utiliser PHP et Vue.js pour développer une application capable de se défendre contre les attaques malveillantes d'accès aux API. Nous utiliserons PHP comme langage back-end pour gérer les requêtes API et authentifier les utilisateurs, et Vue.js comme framework front-end pour créer l'interface utilisateur et gérer les interactions des utilisateurs.

1. Stratégies de défense

Avant de commencer le codage, nous devons d'abord définir quelques stratégies de défense efficaces pour protéger nos applications. Voici plusieurs stratégies de défense courantes :

  1. Limiter la fréquence d'accès aux API : nous pouvons réduire l'impact des attaques malveillantes en limitant la fréquence d'accès aux API. Par exemple, nous pouvons définir une fenêtre horaire au cours de laquelle la même adresse IP ne peut accéder à l'API qu'un certain nombre de fois. Si la limite de nombre est dépassée, nous pouvons temporairement interdire l'accès à l'adresse IP.
  2. Utiliser la clé API : pour garantir que seuls les utilisateurs légitimes peuvent accéder à l'API, nous pouvons utiliser la clé API pour l'authentification. Dans chaque requête API, les utilisateurs doivent fournir une clé API valide pour un accès réussi.
  3. Vérifier la source de la demande : nous devons vérifier la source de chaque demande d'API pour nous assurer que seules les sources légitimes peuvent accéder à l'API. Cela peut être vérifié en vérifiant le Referer dans l’en-tête de la requête ou par l’adresse IP.
  4. Cryptage des données : afin d'éviter que les données ne soient falsifiées pendant la transmission, nous devons crypter les données sensibles. HTTPS peut être utilisé pour garantir une transmission sécurisée des données.

2. Développement back-end

  1. Créer une clé API

Tout d'abord, nous devons créer une table dans la base de données pour stocker les informations relatives à la clé API. Par exemple, nous pouvons créer une table nommée api_keys avec les champs suivants : id, user_id, api_key,created_at.

CREATE TABLE api_keys (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT,
    api_key VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
  1. Générer une clé API

Une fois que l'utilisateur s'est inscrit ou connecté avec succès, nous pouvons générer une clé API unique pour chaque utilisateur. Nous pouvons utiliser la fonction uniqid de PHP pour générer une clé API aléatoire et l'insérer dans la table api_keys.

$apiKey = uniqid();
$query = "INSERT INTO api_keys (user_id, api_key) VALUES (:user_id, :api_key)";
$stmt = $pdo->prepare($query);
$stmt->execute(['user_id' => $user_id, 'api_key' => $apiKey]);
  1. Vérification de l'interface

Dans chaque demande API, nous devons vérifier l'identité de l'utilisateur et la validité de la clé API. Nous pouvons vérifier l'existence de la clé API en analysant le champ Autorisation dans l'en-tête de la requête et en interrogeant la table api_keys.

$authorizationHeader = $_SERVER['HTTP_AUTHORIZATION'];
list(, $apiKey) = explode(' ', $authorizationHeader);
$query = "SELECT * FROM api_keys WHERE api_key = :api_key";
$stmt = $pdo->prepare($query);
$stmt->execute(['api_key' => $apiKey]);
$result = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$result) {
    // API密钥无效,拒绝访问
    http_response_code(401);
    die('Invalid API key');
}
  1. Fréquence d'accès limitée

Afin de limiter la fréquence d'accès à l'API de chaque adresse IP, nous pouvons vérifier le nombre de requêtes pour cette adresse IP dans une certaine fenêtre de temps tout en stockant les informations d'horodatage de chaque requête.

$ip = $_SERVER['REMOTE_ADDR'];
$currentTime = time();
$windowStartTime = $currentTime - 60; // 1分钟的时间窗口
$query = "SELECT COUNT(*) FROM requests WHERE ip = :ip AND created_at > :window_start_time";
$stmt = $pdo->prepare($query);
$stmt->execute(['ip' => $ip, 'window_start_time' => $windowStartTime]);
$requestCount = $stmt->fetchColumn();

if ($requestCount > 10) {
    // 超过请求次数限制,暂时禁止访问
    http_response_code(429);
    die('Too many requests');
}

$query = "INSERT INTO requests (ip) VALUES (:ip)";
$stmt = $pdo->prepare($query);
$stmt->execute(['ip' => $ip]);

3. Développement front-end

  1. Interface de connexion

Dans l'interface front-end, nous pouvons utiliser Vue.js pour créer l'interface de connexion utilisateur. L'utilisateur doit saisir son nom d'utilisateur et son mot de passe et cliquer sur le bouton de connexion pour envoyer une demande API d'authentification.

<template>
  <div>
    <input v-model="username" placeholder="Username" type="text">
    <input v-model="password" placeholder="Password" type="password">
    <button @click="login">Login</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 发送API请求进行身份验证
    }
  }
}
</script>
  1. Demande API

Une fois que l'utilisateur a cliqué sur le bouton de connexion, nous pouvons utiliser la bibliothèque axios de Vue.js pour envoyer une demande API d'authentification.

login() {
  axios.post('/api/login', {
    username: this.username,
    password: this.password
  }).then(response => {
    // 身份验证成功,保存API密钥到本地存储
    localStorage.setItem('api_key', response.data.api_key);
  }).catch(error => {
    // 处理登录失败的情况
    console.error(error);
  });
}

IV. Résumé

En utilisant des applications développées avec PHP et Vue.js pour nous défendre contre les attaques malveillantes d'accès aux API, nous pouvons protéger efficacement nos applications contre les attaques malveillantes. Nous pouvons améliorer la sécurité des applications en limitant la fréquence d'accès aux API, en utilisant des clés API pour l'authentification, en vérifiant l'origine des demandes et en cryptant les données.

Bien sûr, ce n'est qu'une des façons de mettre en œuvre une défense de sécurité. Nous pouvons également mettre en œuvre davantage de mesures de sécurité en fonction des besoins réels, comme l'utilisation de codes de vérification, l'ajout de pare-feu Web, etc. Il est important que nous restions concentrés sur la cybersécurité et que nous mettions à jour et améliorions rapidement nos défenses pour garantir que nos applications résistent aux attaques malveillantes.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn