フロントエンドインタビューに必要なホモロジーとクロスドメインの詳細な説明

序文

ご存知のとおり、ブラウザの相同性戦略とクロスドメイン方式も、フロントエンド面接で頻繁に遭遇する問題です。この記事では、主にフロントエンド面接で遭遇する相同性とクロスドメインの問題についてご紹介します。詳しい紹介を見てみましょう。

同一生成元ポリシーとは何ですか?

同一生成元ポリシーは、ある生成元から読み込まれたドキュメントやスクリプトが別の生成元のリソースとやり取りする方法を制限するために使用されます。これは、悪意のある可能性のあるファイルを隔離するための重要なセキュリティ メカニズムです。

相同性とは何ですか?

2 つのページのプロトコル、ドメイン名、ポートが同じである場合、その 2 つのページは同じオリジンからのものです。たとえば、Web サイト http://www.hyuhan.com/index.html のプロトコルは http、ドメイン名は www.hyuhan.com、ポート番号は 80 (デフォルト ポート) です。その相同性は次のとおりです。

• http://www.hyuhan.com/other.html: 同じソース
• http://hyuhan.com/other.html: 別のソース（別のドメイン名）
• https://www.hyuhan.com/other.html: 異なるソース（異なるプロトコル）
• http://www.hyuhan.com:81/other.html: 別のソース（別のポート）

同一オリジン ポリシーは、ユーザー情報のセキュリティを保護するためのものです。同一オリジン ポリシーによって、次の動作が制限されます。

1. Cookie、LocalStorage、IndexDBは読み取れません
2. DOMは操作できません
3. AJAXリクエストを送信できません

クロスドメインアクセスを実行する方法

ドメイン間でAJAXリクエストを行う方法

同一オリジンポリシーの制限を回避し、クロスドメイン AJAX リクエストを行うには、主に 3 つの方法があります。

JSONP

JSONP は、クライアントとサーバー間のクロスドメイン通信によく使用される方法です。クロスドメイン <script&bt; 要素を使用して、サーバーから JSON データを要求します。要求を受信すると、サーバーはデータをコールバック関数に格納して返します。実装は次のとおりです。

window.onload = 関数() {
    var スクリプト = document.createElement('script');
    script.src = "http://example.com/callback=test";
    document.appendChild(スクリプト);
}
関数テスト(res) {
    コンソールログ(res);
}

src の callback パラメータは、バックエンドが呼び出す必要があるコールバック関数の名前を設定するために使用されます。サーバーから返されるデータは次のとおりです。

テスト（{
    "名前": "シャオミン",
    「年齢」: 24
    })

このようにして、フロントエンドはドメイン間でバックエンドデータを読み取ることができます。ただし、jsopn は get リクエストのみを実行でき、post リクエストを送信することはできません。

ウェブソケット

WebSocket は TCP をベースにした新しいネットワーク プロトコルです。同一オリジン ポリシーを実装せず、サーバーがサポートしている限りクロスドメイン アクセスを実行できます。さらに、WebSocket は Ajax モードでの通信に限定されません。Ajax テクノロジではクライアントがリクエストを開始する必要があり、WebSocket サーバーとクライアントは互いに情報をプッシュできるためです。

CORS

CORS は、Access-Control-Allow-Origin (Cross-Origin Resource Sharing) の略称で、W3C 標準です。 CORS はブラウザとサーバーの両方からのサポートが必要です。現在、ほぼすべてのブラウザがこの機能をサポートしています。 CORS のサーバー側サポートは、主に Access-Control-Allow-Origin を設定することによって実現されます。ブラウザが対応する設定を検出すると、ドメイン間での Ajax アクセスを許可できます。

ドキュメント.ドメイン

クッキーはサーバーからブラウザに書き込まれる情報です。セキュリティ上の理由から、同じオリジンの Web ページのみがクッキーを共有できます。ただし、2 つの Web ページのトップレベル ドメイン名が同じで、ヘッドフォンのドメイン名が異なる場合は、document.domain を設定することで Cookie を共有できます。

たとえば、ある Web ページのドメイン名が http://w1.example.com/a.html で、別の Web ページのドメイン名が http://w2.example.com/b.html の場合、これら 2 つの Web ページは同じ document.domain で設定されている限り、Cookie を共有できます。

ポストメッセージAPI

postMessage() メソッドを使用すると、異なるソースからのスクリプトが制限された方法で非同期に通信できるようになり、ドキュメント間、マルチウィンドウ、およびドメイン間のメッセージ配信を実現できます。 postMessage() 関数を使用してメッセージを渡し、ターゲット ページはウィンドウのメッセージ イベントをリッスンしてメッセージを受信します。 postMessage を使用すると、ドメイン間で LocalStorage、IndexDB、DOM データを読み取ることができます。

ウィンドウ名

ブラウザ ウィンドウには window.name プロパティがあり、同じオリジンであるかどうかに関係なく、同じウィンドウ内にある限り、前の Web ページでこのプロパティが設定されていれば、次の Web ページはそれを読み取ることができると規定されています。つまり、ウィンドウのライフ サイクル中、ウィンドウにロードされるすべてのページは window.name を共有し、各ページには window.name に対する読み取りおよび書き込み権限があり、window.name はウィンドウにロードされるすべてのページに保持されます。明らかに、これによりクロスドメイン アクセスを実現できます。

要約する

上記はこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に一定の参考学習価値を持つことを願っています。ご質問があれば、メッセージを残してコミュニケーションしてください。123WORDPRESS.COM を応援していただきありがとうございます。