PHP et Vue.js développent des applications qui se défendent contre les attaques de falsification de requêtes intersites (CSRF)

PHP et Vue.js développent des applications qui se défendent contre les attaques Cross-Site Request Forgery (CSRF)

Avec le développement des applications Internet, les attaques Cross-Site Request Forgery (CSRF) sont devenues une menace de sécurité courante. Il utilise l'identité de connexion de l'utilisateur pour effectuer de fausses demandes afin d'effectuer des opérations malveillantes, telles que la modification des mots de passe des utilisateurs, la publication de spam, etc. Pour protéger la sécurité des utilisateurs et l'intégrité des données, nous devons mettre en œuvre des mécanismes de défense CSRF efficaces dans nos applications.

Dans cet article, nous présenterons comment utiliser PHP et Vue.js pour développer une application capable de se défendre contre les attaques CSRF. Nous l'expliquerons dans les étapes suivantes : environnement d'installation et de configuration, développement back-end, développement front-end, tests et déploiement.

1. Environnement d'installation et de configuration

Tout d'abord, nous devons installer l'environnement de développement pour PHP et Vue.js. Vous pouvez choisir d'utiliser XAMPP, WAMP ou de créer votre propre environnement.

2. Développement back-end

1. Créer une base de données

Tout d'abord, nous devons créer une base de données et créer une table nommée "utilisateurs". Le tableau doit contenir les champs "user_id", "username" et "password". Vous pouvez également ajouter d'autres champs selon vos besoins.

2. Créer un fichier PHP

Ensuite, nous créons un fichier PHP pour gérer les demandes d'enregistrement et de connexion des utilisateurs. Voici l'exemple de code :

<?php
session_start();

function generateCSRFToken() {
  $token = bin2hex(random_bytes(32));
  $_SESSION['csrf_token'] = $token;
  return $token;
}

function login() {
  // 处理用户登录逻辑
}

function register() {
  // 处理用户注册逻辑
}

// 处理用户注册请求
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['register'])) {
  $username = $_POST['username'];
  $password = $_POST['password'];
  
  // 检查CSRF token
  if (!hash_equals($_SESSION['csrf_token'], $_POST['csrf_token'])) {
    echo "CSRF token验证失败！";
    return;
  }
  
  // 注册用户
  register($username, $password);
}

// 处理用户登录请求
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['login'])) {
  $username = $_POST['username'];
  $password = $_POST['password'];
  
  // 检查CSRF token
  if (!hash_equals($_SESSION['csrf_token'], $_POST['csrf_token'])) {
    echo "CSRF token验证失败！";
    return;
  }
  
  // 登录用户
  login($username, $password);
}
?>

Dans le code ci-dessus, nous définissons des fonctions qui génèrent des jetons CSRF, gèrent l'enregistrement des utilisateurs et la connexion des utilisateurs. Nous effectuons également une vérification des jetons CSRF sur les requêtes POST pour empêcher les attaques CSRF.

3. Développement front-end

1. Créer une application Vue.js

Nous devons utiliser Vue.js pour créer l'interface front-end pour l'enregistrement et la connexion des utilisateurs. Voici l'exemple de code :

<template>
  <div>
    <h1>欢迎使用我们的应用程序</h1>
    <form @submit.prevent="register">
      <input type="text" v-model="username" placeholder="用户名" required>
      <input type="password" v-model="password" placeholder="密码" required>
      <input type="hidden" name="csrf_token" :value="csrfToken">
      <button type="submit">注册</button>
    </form>
    <form @submit.prevent="login">
      <input type="text" v-model="username" placeholder="用户名" required>
      <input type="password" v-model="password" placeholder="密码" required>
      <input type="hidden" name="csrf_token" :value="csrfToken">
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      csrfToken: ''
    }
  },
  mounted() {
    // 获取CSRF token
    this.csrfToken = document.querySelector('meta[name="csrf-token"]').content;
  },
  methods: {
    register() {
      // 发送注册请求
      axios.post('/register.php', {
        username: this.username,
        password: this.password,
        csrf_token: this.csrfToken
      })
      .then(response => {
        // 处理注册成功的逻辑
      })
      .catch(error => {
        // 处理注册失败的逻辑
      });
    },
    login() {
      // 发送登录请求
      axios.post('/login.php', {
        username: this.username,
        password: this.password,
        csrf_token: this.csrfToken
      })
      .then(response => {
        // 处理登录成功的逻辑
      })
      .catch(error => {
        // 处理登录失败的逻辑
      });
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons Vue.js pour créer un composant avec des formulaires d'inscription et de connexion des utilisateurs. Lors de l'envoi de demandes d'inscription et de connexion, ajoutez le jeton CSRF à la demande.

4. Tests et déploiement

Après avoir terminé le développement, nous devons tester l'application. Tout d’abord, nous devons simuler un scénario d’attaque CSRF pour confirmer si notre mécanisme de défense fonctionne. Ensuite, nous devons tester les fonctions d’enregistrement et de connexion des utilisateurs pour nous assurer que tout fonctionne correctement.

Une fois les tests terminés, nous pouvons déployer l'application en production. Veuillez vous assurer que vous disposez des configurations de sécurité appropriées dans votre environnement de production, telles que la désactivation du rapport d'erreurs, l'interdiction de l'accès direct aux fichiers PHP, etc.

Résumé

Cet article explique comment utiliser PHP et Vue.js pour développer une application capable de se défendre contre les attaques CSRF. Nous fournissons un exemple de code pour le backend et le frontend et expliquons le but de chaque étape.

En mettant en œuvre des mécanismes de défense CSRF efficaces, nous pouvons protéger la sécurité de nos utilisateurs et l'intégrité de nos données. Cependant, n’oubliez pas que la sécurité est un processus continu et que nous devons régulièrement revoir et améliorer nos défenses.

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!