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 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 :
2. Développement back-end
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 );
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]);
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'); }
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
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>
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!