PHP と Vue.js は、クロスサイト リクエスト フォージェリ (CSRF) 攻撃を防御するアプリケーションを開発します。

PHP と Vue.js は、クロスサイト リクエスト フォージェリ (CSRF) 攻撃を防御するアプリケーションを開発します

インターネット アプリケーションの開発に伴い、クロスサイト リクエスト フォージェリ (CSRF) 攻撃が発生します。は一般的なセキュリティ上の脅威となっています。ユーザーのログイン ID を使用して、ユーザーのパスワードの変更、スパムの公開などの悪意のある操作を実行するための偽造リクエストを作成します。ユーザーのセキュリティとデータの整合性を保護するには、アプリケーションに効果的な CSRF 防御メカニズムを実装する必要があります。

この記事では、PHP と Vue.js を使用して CSRF 攻撃を防御できるアプリケーションを開発する方法を紹介します。インストールと構成環境、バックエンド開発、フロントエンド開発、テストとデプロイメントのステップで説明します。

1. インストールと設定環境

まず、PHP と Vue.js の開発環境をインストールする必要があります。 XAMPP、WAMP を使用するか、独自の環境を構築するかを選択できます。

2. バックエンド開発

1. データベースの作成

まず、データベースを作成し、「users」という名前のテーブルを作成する必要があります。テーブルには、「user_id」、「username」、および「password」フィールドが含まれている必要があります。必要に応じて他のフィールドを追加することもできます。

2. PHP ファイルの作成

次に、ユーザー登録とログイン要求を処理するための PHP ファイルを作成します。サンプル コードは次のとおりです。

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

上記のコードでは、CSRF トークンを生成し、ユーザー登録を処理し、ユーザー ログインを処理する関数を定義します。また、CSRF 攻撃を防ぐために、POST リクエストに対して CSRF トークン検証も実行します。

3. フロントエンド開発

1. Vue.js アプリケーションの作成

Vue.js を使用して、フロントエンド インターフェイスを作成する必要があります。ユーザー登録とログイン。以下はサンプル コードです:

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

上記のコードでは、Vue.js を使用して、ユーザー登録フォームとログイン フォームを持つコンポーネントを作成します。登録リクエストとログインリクエストを送信するときは、リクエストに CSRF トークンを追加します。

4. テストとデプロイメント

開発が完了したら、アプリケーションをテストする必要があります。まず、CSRF 攻撃シナリオをシミュレートして、防御メカニズムが機能するかどうかを確認する必要があります。次に、ユーザー登録とログイン機能をテストして、すべてが適切に動作していることを確認する必要があります。

テストが完了したら、アプリケーションを運用環境にデプロイできます。エラー報告をオフにしたり、PHP ファイルへの直接アクセスを禁止したりするなど、運用環境で適切なセキュリティ設定が行われていることを確認してください。

概要

この記事では、PHP と Vue.js を使用して、CSRF 攻撃を防御できるアプリケーションを開発する方法を紹介します。バックエンドとフロントエンドの両方のサンプルコードを提供し、各ステップの目的を説明します。

効果的な CSRF 防御メカニズムを実装することで、ユーザーのセキュリティとデータの整合性を保護できます。ただし、セキュリティは継続的なプロセスであり、定期的に防御を見直し、改善する必要があることを忘れないでください。

以上がPHP と Vue.js は、クロスサイト リクエスト フォージェリ (CSRF) 攻撃を防御するアプリケーションを開発します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。