PHP und Vue.js entwickeln Anwendungen, die sich gegen Cross-Site-Request-Forgery-Angriffe (CSRF) schützen

PHP und Vue.js entwickeln Anwendungen, die vor Cross-Site Request Forgery (CSRF)-Angriffen schützen.

Mit der Entwicklung von Internetanwendungen sind Cross-Site Request Forgery (CSRF)-Angriffe zu einer häufigen Sicherheitsbedrohung geworden. Es verwendet die angemeldete Identität des Benutzers, um gefälschte Anfragen zur Durchführung böswilliger Vorgänge zu stellen, wie z. B. das Ändern von Benutzerkennwörtern, das Veröffentlichen von Spam usw. Um die Benutzersicherheit und Datenintegrität zu schützen, müssen wir in unseren Anwendungen wirksame CSRF-Abwehrmechanismen implementieren.

In diesem Artikel stellen wir vor, wie Sie mit PHP und Vue.js eine Anwendung entwickeln, die sich gegen CSRF-Angriffe verteidigen kann. Wir erklären es in den folgenden Schritten: Installations- und Konfigurationsumgebung, Back-End-Entwicklung, Front-End-Entwicklung, Test und Bereitstellung.

1. Installations- und Konfigurationsumgebung

Zuerst müssen wir die Entwicklungsumgebung für PHP und Vue.js installieren. Sie können wählen, ob Sie XAMPP oder WAMP verwenden oder Ihre eigene Umgebung erstellen möchten.

2. Backend-Entwicklung

1. Datenbank erstellen

Zuerst müssen wir eine Datenbank und eine Tabelle mit dem Namen „Benutzer“ erstellen. Die Tabelle sollte die Felder „user_id“, „username“ und „password“ enthalten. Sie können bei Bedarf auch weitere Felder hinzufügen.

2. PHP-Datei erstellen

Als nächstes erstellen wir eine PHP-Datei, um Benutzerregistrierungs- und Anmeldeanfragen zu verarbeiten. Das Folgende ist der Beispielcode:

<?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);
}
?>

Im obigen Code definieren wir Funktionen, die CSRF-Token generieren, die Benutzerregistrierung und Benutzeranmeldung verwalten. Wir führen auch eine CSRF-Token-Verifizierung für POST-Anfragen durch, um CSRF-Angriffe zu verhindern.

3. Front-End-Entwicklung

1. Vue.js-Anwendung erstellen

Wir müssen Vue.js verwenden, um die Front-End-Schnittstelle für die Benutzerregistrierung und -anmeldung zu erstellen. Das Folgende ist der Beispielcode:

<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>

Im obigen Code verwenden wir Vue.js, um eine Komponente mit Benutzerregistrierungs- und Anmeldeformularen zu erstellen. Fügen Sie beim Senden von Registrierungs- und Anmeldeanfragen das CSRF-Token zur Anfrage hinzu.

4. Testen und Bereitstellung

Nach Abschluss der Entwicklung müssen wir die Anwendung testen. Zunächst müssen wir ein CSRF-Angriffsszenario simulieren, um zu bestätigen, ob unser Abwehrmechanismus funktioniert. Als nächstes müssen wir die Benutzerregistrierungs- und Anmeldefunktionen testen, um sicherzustellen, dass alles ordnungsgemäß funktioniert.

Wenn wir mit dem Testen fertig sind, können wir die Anwendung in der Produktion bereitstellen. Bitte stellen Sie sicher, dass Sie in Ihrer Produktionsumgebung über entsprechende Sicherheitskonfigurationen verfügen, z. B. das Deaktivieren der Fehlerberichterstattung, das Verbieten des direkten Zugriffs auf PHP-Dateien usw.

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit PHP und Vue.js eine Anwendung entwickeln, die sich gegen CSRF-Angriffe verteidigen kann. Wir stellen Beispielcode für Backend und Frontend bereit und erklären den Zweck jedes Schritts.

Durch die Implementierung wirksamer CSRF-Abwehrmechanismen können wir die Sicherheit unserer Benutzer und die Integrität unserer Daten schützen. Bedenken Sie jedoch bitte, dass Sicherheit ein fortlaufender Prozess ist und wir unsere Abwehrmaßnahmen regelmäßig überprüfen und verbessern sollten.

Das obige ist der detaillierte Inhalt vonPHP und Vue.js entwickeln Anwendungen, die sich gegen Cross-Site-Request-Forgery-Angriffe (CSRF) schützen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!