ホームページ >バックエンド開発 >PHPチュートリアル >PHP と Vue.js を使用して、悪意のある API アクセス攻撃から保護するアプリケーションを開発する方法
PHP と Vue.js を使用して、悪意のある API アクセス攻撃から防御するアプリケーションを開発する方法
悪意のある API アクセス攻撃は、インターネット アプリケーションが現在直面している深刻なセキュリティ脅威です。アプリケーションを悪意のある攻撃から保護するには、これらの攻撃を防御するための効果的な対策を講じる必要があります。
この記事では、PHP と Vue.js を使用して、悪意のある API アクセス攻撃を防御できるアプリケーションを開発する方法を紹介します。 API リクエストを処理してユーザーを認証するバックエンド言語として PHP を使用し、ユーザー インターフェイスを構築してユーザー インタラクションを処理するフロントエンド フレームワークとして Vue.js を使用します。
1. 防御戦略
コーディングを開始する前に、アプリケーションを保護するための効果的な防御戦略をいくつか定義する必要があります。以下にいくつかの一般的な防御戦略を示します。
2. バックエンド開発
まず、データベースにテーブルを作成して、 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 キーを生成できます。 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>
ユーザーがログイン ボタンをクリックした後、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 サイトの他の関連記事を参照してください。