同一オリジンおよびクロスドメインのフロントエンド インタビューの詳細な紹介

クロスドメインは、ブラウザーの同一オリジン ポリシーによって発生します。これは、ページによって要求された URL アドレスがブラウザー上の URL アドレスと同じドメイン (つまり、ドメイン名、ポート、およびドメイン) 内に存在する必要があることを意味します。フロントエンドインタビューに必要な同一オリジンとクロスドメインに関する関連情報を以下の記事で詳しく紹介していますので、必要な方は参考にしてください。 。

前書き

ブラウザーの同一オリジン戦略とクロスドメイン手法も、フロントエンドのインタビューで非常に一般的な問題であることはよく知られています。この記事では主に同一オリジンとクロスドメインについて説明します。フロントエンドのインタビュー中に遭遇するメソッドについては、クロスドメインの問題についてはあまり説明する必要はありません。詳細を見てみましょう。

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

同一生成元ポリシーは、あるソースからロードされたドキュメントまたはスクリプトが別のソースからのリソースと対話する方法を制限するために使用される、潜在的に悪意のあるファイルを隔離するために使用される方法です。安全機構。

同一オリジンとは何ですか?

2 つのページでプロトコル、ドメイン名、ポートが同じ場合、その 2 つのページは同じオリジンです。例: http://www.hyuhan.com/index.html この Web サイト、プロトコルは 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 は、クライアントとサーバー間のクロスドメイン通信の一般的な方法です。クロスドメイン

window.onload = function() {
    var script = document.createElement('script');
    script.src = "http://example.com/callback=test";
    document.appendChild(script);
}
function test(res) {
    console.log(res);
}

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

test({
    "name": "小明",
    "age": 24
    })

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

WebSocket

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

CORS

CORS は、W3C 標準である Access-Control-Allow-Origin (クロスドメイン リソース共有) の略称です。 CORS はブラウザとサーバーの両方でサポートされている必要があります。現在、基本的にすべてのブラウザがこの機能をサポートしています。 CORS のサーバー側のサポートは、主に Access-Control-Allow-Origin を設定することによって実行されます。ブラウザーが対応する設定を検出すると、Ajax クロスドメイン アクセスを許可できます。

document.domain

Cookieは、セキュリティ上の理由から、同じオリジンを持つWebページのみを共有できます。ただし、2 つの Web ページの第 1 レベルのドメイン名が同じでも、ヘッドフォンのドメイン名が異なる場合は、document.domain を設定することで Cookie を共有できます。

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

postMessage API

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

window.name

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

以上が同一オリジンおよびクロスドメインのフロントエンド インタビューの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。