PHP dan Vue.js membangunkan aplikasi yang mempertahankan daripada serangan pemalsuan permintaan merentas tapak (CSRF).

PHP dan Vue.js membangunkan aplikasi yang mempertahankan daripada serangan Pemalsuan Permintaan Merentas Tapak (CSRF)

Dengan pembangunan aplikasi Internet, serangan Pemalsuan Permintaan Silang Tapak (CSRF) telah menjadi ancaman keselamatan biasa. Ia menggunakan identiti log masuk pengguna untuk membuat permintaan palsu untuk melakukan operasi berniat jahat, seperti menukar kata laluan pengguna, menerbitkan spam, dsb. Untuk melindungi keselamatan pengguna dan integriti data, kami perlu melaksanakan mekanisme pertahanan CSRF yang berkesan dalam aplikasi kami.

Dalam artikel ini, kami akan memperkenalkan cara menggunakan PHP dan Vue.js untuk membangunkan aplikasi yang boleh bertahan daripada serangan CSRF. Kami akan menerangkannya dalam langkah berikut: persekitaran pemasangan dan konfigurasi, pembangunan bahagian belakang, pembangunan bahagian hadapan, ujian dan penggunaan.

1. Persekitaran pemasangan dan konfigurasi

Pertama, kita perlu memasang persekitaran pembangunan untuk PHP dan Vue.js. Anda boleh memilih untuk menggunakan XAMPP, WAMP atau membina persekitaran anda sendiri.

2. Pembangunan back-end

1. Buat pangkalan data

Pertama, kita perlu mencipta pangkalan data dan mencipta jadual bernama "pengguna". Jadual harus mengandungi medan "user_id", "username" dan "password". Anda juga boleh menambah medan lain mengikut keperluan.

2. Buat fail PHP

Seterusnya, kami mencipta fail PHP untuk mengendalikan pendaftaran pengguna dan permintaan log masuk. Berikut ialah contoh kod:

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

Dalam kod di atas, kami mentakrifkan fungsi yang menjana token CSRF, mengendalikan pendaftaran pengguna dan log masuk pengguna. Kami juga melakukan pengesahan token CSRF pada permintaan POST untuk menghalang serangan CSRF.

3. Pembangunan bahagian hadapan

1. Cipta aplikasi Vue.js

Kita perlu menggunakan Vue.js untuk mencipta antara muka bahagian hadapan untuk pendaftaran dan log masuk pengguna. Berikut ialah contoh kod:

<template>
  <div>
    <h1 id="欢迎使用我们的应用程序">欢迎使用我们的应用程序</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>

Dalam kod di atas, kami menggunakan Vue.js untuk mencipta komponen dengan borang pendaftaran dan log masuk pengguna. Apabila menghantar permintaan pendaftaran dan log masuk, tambahkan token CSRF pada permintaan.

4. Pengujian dan Penerapan

Selepas melengkapkan pembangunan, kami perlu menguji aplikasi. Pertama, kita perlu mensimulasikan senario serangan CSRF untuk mengesahkan sama ada mekanisme pertahanan kita berfungsi. Seterusnya, kita perlu menguji fungsi pendaftaran dan log masuk pengguna untuk memastikan semuanya berfungsi dengan baik.

Apabila kami selesai menguji, kami boleh menggunakan aplikasi ke pengeluaran. Sila pastikan anda mempunyai konfigurasi keselamatan yang sesuai dalam persekitaran pengeluaran anda, seperti mematikan pelaporan ralat, melarang akses terus kepada fail PHP, dsb.

Ringkasan

Artikel ini memperkenalkan cara menggunakan PHP dan Vue.js untuk membangunkan aplikasi yang boleh bertahan daripada serangan CSRF. Kami menyediakan kod sampel untuk bahagian belakang dan bahagian hadapan serta menerangkan tujuan setiap langkah.

Dengan melaksanakan mekanisme pertahanan CSRF yang berkesan, kami boleh melindungi keselamatan pengguna kami dan integriti data kami. Walau bagaimanapun, sila ingat bahawa keselamatan adalah proses yang berterusan dan kita harus sentiasa menyemak dan meningkatkan pertahanan kita.

Atas ialah kandungan terperinci PHP dan Vue.js membangunkan aplikasi yang mempertahankan daripada serangan pemalsuan permintaan merentas tapak (CSRF).. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!