PHP と Vue.js を使用して、悪意のある API アクセス攻撃から保護するアプリケーションを開発する方法-PHPチュートリアル-php.cn

PHP と Vue.js を使用して、悪意のある API アクセス攻撃から保護するアプリケーションを開発する方法

WBOY

リリース： 2023-07-05 19:46:01

オリジナル

655 人が閲覧しました

PHP と Vue.js を使用して、悪意のある API アクセス攻撃から防御するアプリケーションを開発する方法

悪意のある API アクセス攻撃は、インターネットアプリケーションが現在直面している深刻なセキュリティ脅威です。アプリケーションを悪意のある攻撃から保護するには、これらの攻撃を防御するための効果的な対策を講じる必要があります。

この記事では、PHP と Vue.js を使用して、悪意のある API アクセス攻撃を防御できるアプリケーションを開発する方法を紹介します。 API リクエストを処理してユーザーを認証するバックエンド言語として PHP を使用し、ユーザーインターフェイスを構築してユーザーインタラクションを処理するフロントエンドフレームワークとして Vue.js を使用します。

1. 防御戦略

コーディングを開始する前に、アプリケーションを保護するための効果的な防御戦略をいくつか定義する必要があります。以下にいくつかの一般的な防御戦略を示します。

API アクセス頻度を制限する: API アクセス頻度を制限することで、悪意のある攻撃の影響を軽減できます。たとえば、同じ IP アドレスが一定の回数だけ API にアクセスできる時間枠を設定できます。制限数を超えた場合、IPアドレスへのアクセスを一時的に禁止させていただく場合がございます。
API キーを使用する: 正規のユーザーのみが API にアクセスできるようにするために、認証に API キーを使用できます。すべての API リクエストで、ユーザーはアクセスを成功させるために有効な API キーを提供する必要があります。
リクエストのソースを確認する: 各 API リクエストのソースを確認して、正当なソースのみが API にアクセスできることを確認する必要があります。これは、リクエストヘッダー内のリファラーをチェックするか、IP アドレスによって確認できます。
データ暗号化: 送信中にデータが改ざんされるのを防ぐために、機密データを暗号化する必要があります。 HTTPS を使用すると、データを安全に送信できます。

2. バックエンド開発

API キーの作成

まず、データベースにテーブルを作成して、 API キーキー関連の情報。たとえば、次のフィールドを持つ api_keys という名前のテーブルを作成できます: 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
);

ログイン後にコピー

API キーの生成

ユーザーが正常に登録またはログインした後、ユーザーごとに一意の API キーを生成できます。 PHP の uniqid 関数を使用してランダムな API キーを生成し、それを 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]);

ログイン後にコピー

インターフェース検証

各 API リクエストでは、ユーザーの ID と API キーの有効性を検証する必要があります。 API キーの存在を確認するには、リクエストヘッダーの Authorization フィールドを解析し、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');
}

ログイン後にコピー

アクセス頻度の制限

IPアドレスごとのAPIアクセス頻度を制限するには、各リクエストのタイムスタンプ情報を保存しながらIPを確認することができます。特定の時間枠内でのアドレス要求の数。

$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. フロントエンド開発

ログインインターフェイス

フロントエンドインターフェイスでは、Vue.js を使用してユーザーを構築できます。ログインインターフェイス。ユーザーはユーザー名とパスワードを入力し、ログインボタンをクリックして認証のための API リクエストを送信する必要があります。

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

ログイン後にコピー

API リクエスト

ユーザーがログインボタンをクリックした後、Vue.js の axios ライブラリを使用して認証のための API リクエストを送信できます。

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

ログイン後にコピー

4. 概要

PHP と Vue.js で開発されたアプリケーションを使用して悪意のある API アクセス攻撃を防御することで、アプリケーションを悪意のある攻撃から効果的に保護できます。 API アクセスの頻度を制限し、認証に API キーを使用し、リクエストの送信元を確認し、データを暗号化することで、アプリケーションのセキュリティを向上できます。

もちろん、これはセキュリティ防御の実装方法の 1 つにすぎず、実際のニーズに応じて、確認コードの使用や Web ファイアウォールの追加など、さらに多くのセキュリティ対策を実装することもできます。サイバーセキュリティに重点を置き、アプリケーションが悪意のある攻撃に確実に耐えられるように、防御を迅速に更新および改善することが重要です。

以上がPHP と Vue.js を使用して、悪意のある API アクセス攻撃から保護するアプリケーションを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。