JSONP クロスドメイン原理分析と実装入門_JavaScript スキル

JavaScript は、Web 開発でよく使用されるフロントエンドの動的スクリプト テクノロジです。 JavaScript には、「同一オリジン ポリシー」と呼ばれる非常に重要なセキュリティ制限があります。このポリシーは、JavaScript コードがアクセスできるページ コンテンツに重要な制限を設けます。つまり、JavaScript は、それを含むドキュメントと同じドメイン内のコンテンツにのみアクセスできます。

JavaScript セキュリティ戦略は、Ajax プログラミングだけでなく、マルチ iframe またはマルチウィンドウ プログラミングを実行する場合にも特に重要です。このポリシーによれば、baidu.com のページに含まれる JavaScript コードは、google.com ドメイン名のページ コンテンツにアクセスできません。また、異なるサブドメイン間のページであっても、JavaScript コードを介して相互にアクセスすることはできません。 Ajax への影響は、XMLHttpRequest によって実装された Ajax リクエストが別のドメインにリクエストを送信できないことです。たとえば、abc.example.com の下にあるページは、def.example.com などに Ajax リクエストを送信できません。

しかし、詳細なフロントエンドプログラミングを行う場合、クロスドメイン操作が必然的に必要になるため、この時点で「同一生成元ポリシー」は厳しすぎます。 JSONP クロスドメイン GET リクエストは一般的なソリューションです。JSONP クロスドメインがどのように実装されるかを見て、JSONP クロスドメインの原理について説明します。

ページ内に <script> ノードを作成して異なるドメインに HTTP リクエストを送信する方法は、JSONP と呼ばれます。このテクノロジは、ドメイン間での Ajax リクエストの送信の問題を解決します。 JSONP の動作原理は次のとおりです。 <br><br> GET リクエストが http://example1.com/index.php ページの http://example2.com/getinfo.php に送信されると仮定すると、次のコードを配置できます。 JavaScript コードは、実装するページ http://example1.com/index.php に配置されます: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="93108" class="copybut" id="copybut93108" onclick="doCopy('code93108')"><u>コードをコピー </u></a> </span> コードは次のとおりです。</div> <div class="codebody" id="code93108"> <br>var eleScript= document.createElement("script"); <br>eleScript.type = "text/javascript"; "http://example2.com /getinfo.php"; <br>document.getElementsByTagName("HEAD")[0].appendChild(eleScript); <br><br> </div>から GET リクエストが行われた場合http://example2.com/getinfo.php 戻るときに、JavaScript コードの一部を返すことができます。これは自動的に実行され、http://example1.com/index.php でコールバック関数を呼び出すために使用できます。ページ。 <br><br>JSONP の利点は、XMLHttpRequest オブジェクトによって実装される Ajax リクエストのような同一生成元ポリシーによって制限されないことです。互換性が高く、XMLHttpRequest や ActiveX のサポートを必要とせずに古いブラウザでも実行できます。 ; リクエストが完了したら、コールバックを呼び出すことで結果を返すことができます。 <br><br>JSONP の欠点は、GET リクエストのみをサポートし、POST などの他のタイプの HTTP リクエストはサポートしないこと、クロスドメイン HTTP リクエストのみをサポートし、異なるドメインにある 2 ページ間の問題を解決できないことです。 JavaScript の呼び出し。 <br>別の例: <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="84822" class="copybut" id="copybut84822" onclick="doCopy('code84822')">コードをコピー <u></u></a> コードは次のとおりです: </span></div> <div class="codebody" id="code84822">var qsData = {' searchWord':$("#searchWord").attr("value"),'currentUserId': <br>$("#currentUserId").attr("value"),'conditionBean.pageSize':$( "# pageSize").attr("value")}; <br>$.ajax({ <br>async:false, <br>url: http://cross-domain dns/document!searchJSONResult.action, <br> タイプ: "GET"、<br>dataType: 'jsonp'、<br>jsonp: 'jsoncallback'、<br>data: qsData、<br>timeout: 5000、<br>beforeSend: function(){ <br> //このメソッドは jsonp モードではトリガーされません。その理由は、dataType が jsonp として指定されている場合、ajax イベントではなくなっている可能性があります。<br>}, <br>success: function (json) {//Client jquery は事前定義されたコールバック関数です。クロスドメイン サーバーで json データを正常に取得した後、このコールバック関数は動的に実行されます。<br>if(json.actionErrors.length!=0){ <br>alert(json.actionErrors) ; <br>} <br>genDynamicContent(qsData,type,json); <br>}, <br>complete: function(XMLHttpRequest, textStatus){ <br>$.unblockUI({ fadeOut: 10 }); >}, <br> error: function(xhr){ <br>//このメソッドは jsonp モードではトリガーされません。その理由は、dataType が jsonp として指定されている場合、ajax イベントではなくなることが考えられます。<br>/ /リクエスト エラー処理<br>alert(" リクエスト エラー (関連性のネットワーク ステータスを確認してください。)"); <br>} <br>}); <br>$ という書き込みも表示されることがあります。 getJSON("http://クロスドメイン dns/document!searchJSONResult.action?name1=" value1 "&jsoncallback=?", <br>function(json){ <br>if(json.property name==value){ <br>//コードを実行<br>} <br>}); <br><br> <br>このメソッドは、実際には、上記の例の $.ajax({..}) API の高度なカプセル化です。 $.ajax API の基礎となるパラメーターの一部はカプセル化されており、非表示になっています。 <br>このようにして、jquery は次の URL get リクエストに組み立てられます: </div> <br><br><br><div class="codetitle">コードをコピー <span><a style="CURSOR: pointer" data="62796" class="copybut" id="copybut62796" onclick="doCopy('code62796')"><u> コードは次のとおりです。 </u><div class="codebody" id="code62796"> <br>http：// Cross-Domain dns/document！searchjsonresult.action？＆jsoncallback = jsonp1236827957501＆_ = 1236828192549＆searchword =<br>use case case¤tuserid= 5351＆条件付き= 15 </div>JSONP 原則 <br>JSONP の最も基本的な原則は、<script> タグを動的に追加することであり、script タグの src 属性にはクロスドメイン制限がありません。このように、このクロスドメイン メソッドは、ajax XmlHttpRequest プロトコルとは何の関係もありません。 <br>このように、「jQuery AJAX クロスドメイン問題」は誤った命題になりました。jquery $.ajax メソッド名は誤解を招きます。 <br>dataType: 'jsonp' に設定されている場合、この $.ajax メソッドは ajax XmlHttpRequest とは関係がなく、JSONP プロトコルに置き換えられます。 JSONP は、サーバー側でスクリプト タグを統合してクライアントに返すことを可能にする非公式のプロトコルで、JavaScript コールバックの形式でクロスドメイン アクセスを可能にします。 <br><br>JSONP はパディング付きの JSON です。同一オリジン ポリシーの制限により、XmlHttpRequest は現在のソース (ドメイン名、プロトコル、ポート) からのリソースのみを要求できます。クロスドメインリクエストを行いたい場合は、HTMLのscriptタグを使用してクロスドメインリクエストを行い、レスポンスで実行するスクリプトコードを返すことができます。JavaScriptオブジェクトはJSONを使用して直接渡すことができます。 このクロスドメイン通信方式は JSONP と呼ばれます。 <br><br>jsonCallback 関数 jsonp1236827957501(....): クロスドメインサーバー上の json データを取得した後、コールバック関数 <br><br>Jsonp の実行処理によって登録されます。 <br>まずクライアントでコールバック (例: 'jsoncallback') を登録し、次にコールバック名 (例: jsonp1236827957501) をサーバーに渡します。注: サーバーはコールバック値を取得した後、jsonp1236827957501(...) を使用して出力する json コンテンツを含める必要があります。この時点で、サーバーによって生成された json データはクライアントによって正しく受信されます。 <br><br>次に、JavaScript 構文を使用して関数を生成します。関数名は、渡されたパラメーター「jsoncallback」の値 jsonp1236827957501 です。<br>最後に、json データをパラメーターとして関数に直接配置します。 js 構文ドキュメントを作成してクライアントに返します。 <br><br>クライアントのブラウザは、script タグを解析し、返された JavaScript ドキュメントを実行します。このとき、JavaScript ドキュメント データは、クライアントによって事前に定義されたコールバック関数 (例: jquery $.ajax) にパラメータとして渡されます。上記の例) () 成功でカプセル化されたメソッド: function (json))。 <br>jsonp メソッドは、<script src="http://cross-domain/...xx.js"></script> と原理的に一致していると言えます (qq space はこのメソッドを使用しています)。クロスドメインのデータ交換を実現するために広範囲に渡って行われます)。 JSONP はスクリプト インジェクション (スクリプト インジェクション) 動作であるため、特定のセキュリティ リスクが伴います。
では、なぜ jquery はクロスドメイン投稿をサポートしないのでしょうか?

post を使用して iframe を動的に生成すると、クロスドメイン後の目的を達成できますが (これは、js の専門家が jquery1.2.5 にパッチを適用した方法です)、これは比較的極端な方法であるため、お勧めできません。
クロスドメインの get メソッドは合法であり、post メソッドはセキュリティの観点から違法であるとも言えます。最後の手段として、間違ったアプローチを取らないことが最善です。

クライアント側でのクロスドメイン アクセスの需要が w3c の注目を集めているようです。情報によると、html5 WebSocket 標準はクロスドメイン データ交換をサポートしており、クロスドメインのオプションのソリューションにもなるはずです。 -将来のドメインデータ交換。

非常に簡単な例を見てみましょう:

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

;script type= "text/javascript">
function jsonpCallback(result)
{
alert(result.msg)



このうち、jsonCallbackは、クロスドメインサーバー上のjsonデータを取得した後にコールバックするためにクライアントが登録する関数です。 http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback この URL は、クロスドメイン サーバーが JSON データを取得するためのインターフェイスです。パラメータはコールバック関数の名前です。返される形式は、jsonpCallback({msg:'this) です。 is json data'})

原理とプロセスを簡単に説明します。まずクライアントでコールバックを登録し、次にコールバック名をサーバーに渡します。この時点で、サーバーはまず json データを生成します。 次に、JavaScript 構文を使用して関数を生成します。関数名は、渡されたパラメーター jsonp です。最後に、json データがパラメーターとして関数に直接配置されるため、js 構文ドキュメントが生成され、クライアントに返されます。

クライアントのブラウザは script タグを解析し、返された JavaScript ドキュメントを実行します。このとき、データはクライアントによって事前定義されたコールバック関数にパラメータとして渡されます。 (コールバック関数の動的実行)