JavaScript クロスドメインメソッドのまとめ_JavaScript スキル

Web 開発を行うと、クロスドメインの問題に直面することがよくあります。たとえば、http://www.a.com/1 の場合、クロスドメインの問題の根本原因は、ブラウザのセキュリティにおける同一生成元ポリシーです。 html:

1.http://www.a.com/2.html は同じ起源のものです。 2. https://www.a.com/2.html はプロトコルが異なるため、ソースが異なります。 3. http://www.a.com:8080/2.html は、ポートが異なるため、異なるソースからのものです 4. http://sub.a.com/2.html は、ホストが異なるため、起源が異なります。

ブラウザでは、タグ 、 、 および はクロスドメイン (オリジナルではない) リソースをロードできます。ロード方法は実際には以下と同等です。通常の GET リクエストとの唯一の違いは、セキュリティ上の理由から、ブラウザはこの方法でロードされたリソースに対する読み取りおよび書き込み操作を許可せず、タグ自体が持つべき機能 (スクリプトの実行、スタイルなど) のみを使用できることです。アプリケーションなど）。

最も一般的なクロスドメインの問題は、Ajax クロスドメイン アクセスです。デフォルトでは、Ajax を介してクロスドメイン URL にアクセスできません。ここに私が学んだクロスドメインの手法を記録します:

1. サーバー側プロキシ の欠点は、デフォルトでは Ajax リクエストを受信するサーバーがクライアントの IP と UA を取得できないことです。

2. iframe 、iframe を使用することは、実際には新しい Web ページを開くことと同じです。具体的なクロスドメインの方法は、ドメイン A によって開かれた親ページがドメイン B を指す iframe をネストすることです。次にデータを送信し、完了後、B のサーバーは次のことができます: ●302 リダイレクト応答を返し、結果をドメイン A にリダイレクトします。 ●ドメイン A を指す iframe がこの iframe 内にネストされています。

どちらも最終的にクロスドメイン呼び出しを実現しました。この方法は、クロスドメインが完了した後、相互間のDOM操作とJavaScript呼び出しに問題がないため、以下で紹介するJSONPよりも機能的です。たとえば、結果は URL パラメーターで渡す必要があるため、結果データが大きい場合は分割して渡す必要があり、iframe 自体と相互作用によって別の問題が発生します。親ページと iframe 自体には固有のセキュリティ制限があります。

3. スクリプト タグを使用してドメインを越える

。この方法も非常に一般的です。スクリプト タグは、外部の JavaScript をロードして実行し、事前設定されたコールバック関数を介して親ページと対話します。 JSONP クロスドメインという大きな名前があります。JSONP は JSON with Padding の略です。明らかに非公式のプロトコルですが、なぜ JSON に関係しているのでしょうか。これはコールバック関数であることがわかり、これを使用する一般的な方法は、JSON を介してパラメーターを渡すことです。つまり、JSON データをコールバック関数に入力します。これが JSONP の JSON Padding の意味です。 インターネット上にはデータを提供する JSONP サービスが多数ありますが、これは基本的にクロスドメイン リクエストです。コールバックがリクエスト URL で指定されている場合 (callback=result など)、データを取得した後、result 関数が実行されます。が自動的に呼び出され、データを JSON 形式で渡します。たとえば (「フットボール」を検索):

http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=football&callback=result

JQuery を使用して次のように呼び出します:

コードをコピー コードは次のとおりです: $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=football&callback=?",function(data){ //... });

一般に、JSONP のクロスドメイン メソッドには GET リクエストしか使用できないという制限があり、異なるドメインにある 2 つのページ間で JavaScript 呼び出しを行う方法の問題は解決できません。 4. Flash クロスドメイン:

ターゲット Web サイトのルート ディレクトリにあるcrossdomain.xml ファイルにアクセスし、ファイル内の内容に基づいてこのクロスドメイン アクセスを許可するかどうかを決定します。

コードをコピー コードは次のとおりです:

5. img タグは も使用できます。これも非常に一般的なメソッドですが、この関数は get リクエストを送信するだけで、コールバックはありません。クリック数が決まります。 6. window.PostMessage、これはクロスドメイン通信のために HTML5 に追加された新しいメカニズムです。Firefox 3、Safari 4、IE8 以降のバージョンでのみサポートされます。他のウィンドウにメッセージを送信するために使用する呼び出しメソッドは次のとおりです:

コードをコピー コードは次のとおりです: otherWindow.postMessage(メッセージ, targetOrigin); 受信ウィンドウでは、送信されたメッセージを受信するためのイベント処理関数を設定する必要があります: コードをコピー コードは次のとおりです: window.addEventListener("メッセージ", acceptMessage, false); 関数受信メッセージ(イベント){ If (event.origin !== "http://example.org:8080") return; } 送信者の身元を確認するには、メッセージのorigin 属性とsource 属性を使用する必要があることに注意してください。そうしないと、XSS 脆弱性が発生します。 7. アクセス制御

一部のブラウザでは、次のような Access-Control-Allow-Origin などの応答ヘッダーがサポートされています。

コードをコピー コードは次のとおりです: header("Access-Control-Allow-Origin: http://www.a.com");

www.a.com へのクロスドメイン アクセスが許可されることを指定します。 8. ウィンドウ名

これは実際に以前ハッカー XSS の手段として使用されていましたが、その本質はウィンドウの位置が変更されるとページがリロードされるということですが、興味深いのは window.name が変更されないことです。使用できます。価値が伝わります。 iframe と連携して、iframe のウィンドウ オブジェクトを数回変更して、実用的なクロスドメイン データ転送を完了します。

9. ドキュメント.ドメイン

この方法は、example.com という共通のドメインがあるため、a.example.com と b.example.com の間のクロスドメイン通信に適しています。 a.example1.com と b.example2.com の間の通信であるため、選択の余地はありません。

10. フラグメント識別子メッセージング (FIM)

この方法は非常に興味深いものであり、iframe の協力が必要です。フラグメント識別子は、アンカーの位置決めによく使用される URL のポンド記号 (#) の後の部分であり、親ウィンドウは iframe の URL に自由にアクセスできます。 iframe は親ウィンドウの URL にも自由にアクセスでき、フラグメント識別子を変更することで 2 つの間の通信を実現できます。欠点は、フラグメント識別子の変更によって不要な履歴レコードが生成されることと、長さの制限があることです。さらに、一部のブラウザーは onhashchange イベントをサポートしません。

11. クロスフレーム(CF)

この方法は、上記の FIM 方法の変形であり、実際には、私の記事「GWT の初体験」で紹介されています (目に見えない関数を実装するために使用されているだけです)。 iframe は動的に作成され、外部ドメインを指します。処理後、この iframe の URL のフラグメント識別子には、アクセスする親ページの処理結果が含まれ、ブラウザの URL は変更されません。

12. Cookie P3P プロトコル

P3P プロトコルでのクロスドメイン アクセス Cookie の特性を利用してクロスドメイン アクセスを実現するのも、奇妙なトリックです。 P3P は、W3C によって発行されたプライバシー保護推奨標準であり、インターネットをサーフィンするインターネット ユーザーにプライバシー保護を提供することを目的としています。 Cookie パスを「/」に設定します。つまり、ドメイン制限はありません。現時点では、一部のブラウザでは他の URL のページの読み取りが許可されますが、この場合は親ページで応答する必要があります。ヘッダーに P3P ヘッダーを設定します:

コードをコピー コードは次のとおりです: P3P: CP="CURa ADMa DEVA PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"