Nginx を使用して同一生成元ポリシーを構成し、フロントエンドのセキュリティを保護する方法-Nginx-php.cn

Nginx を使用して同一生成元ポリシーを構成し、フロントエンドのセキュリティを保護する方法

PHPz

リリース： 2023-06-10 13:01:42

オリジナル

2610 人が閲覧しました

フロントエンドアプリケーションの複雑さが増すにつれて、Web アプリケーションのセキュリティ問題はますます重要になっています。同一生成元ポリシーは、クロスサイトスクリプティング攻撃などのセキュリティ問題を回避するための重要なセキュリティ対策です。 Nginx は強力な Web サーバーソフトウェアです。この記事では、Nginx を使用して同一生成元ポリシーを構成し、フロントエンドのセキュリティを保護する方法を紹介します。

1. 同一オリジンポリシー

同一オリジンポリシーは、あるドメイン名のドキュメントまたはスクリプトが別のドメイン名のリソースと対話する方法を制限するために使用される Web 開発におけるセキュリティ原則です。 . .相同性とは、プロトコル、ドメイン名、ポートがすべて同じであることを意味し、これを「完全に一致している」といいます。

同一生成元ポリシーにより、Web サイト間の悪意のある攻撃を防ぐことができます。たとえば、ハッカーが悪意のある JavaScript プログラムを作成して Web ページに埋め込み、ユーザーがこれらの Web ページにアクセスすると、JavaScript プログラムがユーザーのコンピュータから機密情報を盗み出します。

2. Nginx の同一オリジン設定

同一オリジンポリシーを設定する方法の 1 つは、Nginx のリバースプロキシ機能を使用することです。リバースプロキシは、クライアントとサーバー間の接続を代理し、さまざまなソースからの要求を分離するサーバー側にあるプロキシサーバーです。

以下では、Nginx を使用してフロントエンドセキュリティを保護するための同一オリジンポリシーを構成する方法を紹介します。

Nginx の構成
最初に、以下を追加する必要があります。コンテンツを Nginx 構成ファイルに追加します:

location / {

add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

ログイン後にコピー

}

この構成ファイルスニペットからは、次の情報が得られます:

Access -Control-Allow-Origin: 許可されるアクセスを指定します。このリソースの外部ドメイン URI は * に設定できます。

Access-Control-Allow-Credentials: クロスドメインアクセスを許可するリクエストに ID 情報の送信を許可するかどうかを指定します。

Access-Control-Allow-Methods: 許可される HTTP リクエストメソッドを指定します。

Access-Control-Allow-Headers: 許可されるリクエストヘッダーフィールドを指定します。

フロントエンドアプリケーションの構成
次に、次の内容をフロントエンドアプリケーションの JavaScript コードに追加します。

var xhr = new XMLHttpRequest( );
xhr .open('POST', 'http://localhost:8080/api/save', true);
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type ', 'application/json ');
xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
}

ログイン後にコピー

};
xhr.send(JSON.stringify({名前: 'ジョン'、年齢: 26 }));

このコードは、XMLHttpRequest オブジェクトを使用して POST リクエストを開始します。リクエスト URI は http://localhost:8080/api/save で、withCredentials 属性が true に設定されていることを示します。リクエストには ID 情報を含めることができます。

アプリケーションをテストする
最後に、アプリケーションを起動し、フロントエンドアプリケーションのページにアクセスします。ブラウザの開発者ツールでは、リクエストヘッダーに、Nginx 構成の正確さを検証する Access-Control-Allow-Origin や Access-Control-Allow-Credentials などの情報が含まれていることがわかります。

上記の手順により、Nginx を使用して同一生成元ポリシーを構成し、フロントエンドのセキュリティを保護できます。

3. 概要

同一オリジンポリシーは Web 開発における重要なセキュリティ対策であり、Nginx は同一オリジンポリシーの構成に役立ちます。実際のアプリケーションでは、Web アプリケーションのセキュリティを確保するために、同一オリジンポリシーの構成に加えて、SSO シングルサインオン、CSRF 防止、XSS 防止などの他のセキュリティ対策も使用する必要があります。

以上がNginx を使用して同一生成元ポリシーを構成し、フロントエンドのセキュリティを保護する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。