フロントエンドのクロスドメインソリューションの概要

ホモロジー戦略とは

同一生成元ポリシー/ SOP（同一生成元ポリシー）は、 1995年にNetscape社によって導入された規約です。これは、ブラウザーのコアおよび最も基本的なセキュリティ機能です。同じ生成元ポリシーがない場合、ブラウザーはXSSに対して脆弱です。、CSFRおよびその他の攻撃。いわゆる相同性とは、「プロトコル+ドメイン名+ポート」が同じであることを意味します。2つの異なるドメイン名が同じIPアドレスを指していても、それらは相同ではありません。

同一生成元ポリシーは、次の動作を制限します。

IndexDB、LocalStorage、Cookieを読み取ることができません
JsオブジェクトとDOMは使用できません
AJAXリクエストを送信できません

同じソースのニーズ：（<img><link><script>3種類のタグは制限されません）

同一生成元ポリシーの定義に基づいて、6つの一般的なクロスドメインシナリオを要約できます。

上記の状況では、適用するテクノロジーに応じて、9つのクロスドメインソリューションを要約できます。

クロスドメインを実現する一般的な方法

jsonpによるクロスドメイン

<script>クロスドメイン制限のないタグを使用して、Webページは他のソースから動的に生成されたJSONデータを取得できます。JSONPリクエストは、相手側のサーバーでサポートされている必要があります。利点は、古いブラウザと互換性があることですが、getのみをサポートし、非常に安全ではないため、通常は使用されません。この原則に基づいて、scriptクロスドメイン通信を実現するためのパラメーターを含むURLを動的に作成して要求できます。

jsonpの短所：1つの要求しか達成できません。

var script = document.createElement("script");
script.type = "text/javascript";

//传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
script.src =
  "http://www.baidu.com:8080/login?user=admin&callback=handleCallback";
document.head.appendChild(script);

//回调执行函数
function handleCallback(res) {
  console.log("res =", res);
}

CORSクロスドメイン

クロスドメインリクエストは実際に送信されましたが、安全でないため、ブラウザによってインターセプトされました。端的に言うと、サーバーから何かを取得したいが、他のユーザーによって承認されていません。では、何が安全ですか？サーバーが許可する場合は安全です。これがCORS実装の原則です。追加のHTTPヘッダーを使用して、特定のオリジンで実行されているWebアプリケーションが異なるオリジンサーバーから指定されたリソースへのアクセスを許可することをブラウザーに通知します。

現在、すべての主要なブラウザーがCORSをサポートしています。IEブラウザーのバージョンを10よりも低くすることはできません。IE8および9は、XDomainRequestを介して実装する必要があります。

簡単なリクエスト

要求された場合以下のすべての条件を満たす、その後、リクエストは「単純なリクエスト」と見なすことができます。

許可されている方法の1つ：

Fetch仕様では、CORSに対して安全な一連のヘッダーフィールドが定義されています

このコレクション以外のヘッダーフィールドの人工的な設定はありません。コレクションは次のとおりです。

Accept
Accept-Language
Content-Language
Content-Type （追加の制限に注意を払う必要があります）
DPR
Downlink
Save-Data
Viewport-Width
Width

Content-Typ の値は、次の3つのいずれかに制限されます。

text/plain
multipart/form-data
application/x-www-form-urlencoded

プリフライトリクエスト

別の単純な要求、「リクエストが必要プリフライト」の要件なければならない最初のとOPTIONS事前スクリーニング方法は、サーバへの要求を開始し、サーバーが実際の要求を知ることができます。