JSONPクロスドメインの原理を徹底分析_基礎知識

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 は以下のように機能します: </p> <p>GET リクエストが <a href="http://example1.com/index.php">http://example1.com/index.php</a> ページの <a href="http://example2.com">http://example2.com</a>/getinfo.php に送信されたとします。次の JavaScript コードをページ <a href="http://example1.com/index.php">http://example1.com/index.php</a> に配置して実装します: </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="12864" class="copybut" id="copybut12864" onclick="doCopy('code12864')"><u>コードをコピーします</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code12864"> <br> var eleScript= document.createElement("script");<br> eleScript.type = "text/javascript";<br> eleScript.src = "<a href="http://example2.com/getinfo.php">http://example2.com/getinfo.php</a>";<br> document.getElementsByTagName("HEAD")[0].appendChild(eleScript);<br> </div> <p>GET リクエストが <a href="http://example2.com/getinfo.php">http://example2.com/getinfo.php</a> から返されると、このコードが自動的に実行され、http://example1.com/index.php<a href="http://example1.com/index.php">ページ内のコールバック関数。 </a> </p> <p>JSONP の利点は <strong> です。XMLHttpRequest オブジェクトによって実装される Ajax リクエストのような同一生成元ポリシーによって制限されず、互換性が高く、古いブラウザーでも実行できます。は必須であり、リクエストが完了した後、コールバックを呼び出すことで結果を返すことができます。 </strong> </p> <p>JSONP の欠点は <strong> です。JSONP は GET リクエストのみをサポートし、POST などの他のタイプの HTTP リクエストはサポートしません。また、クロスドメイン HTTP リクエストのみをサポートし、異なるドメインにある 2 つのページの問題を解決できません。 . 間で JavaScript 呼び出しを行う方法。 </strong> </p>別の例: <p> </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="4578" class="copybut" id="copybut4578" onclick="doCopy('code4578')">コードをコピー<u></u></a> コードは次のとおりです:</span><div class="codebody" id="code4578"> <br> var qsData = {'searchWord':$("#searchWord").attr("value"),'currentUserId':<br> $("#currentUserId").attr("value"),'conditionBean.pageSize':$("#pageSize").attr("value")};<br> $.ajax({ <br> 非同期:false、<br> URL: http://クロスドメイン dns/document!searchJSONResult.action、<br> 入力: "GET"、<br> データ型: 'jsonp'、<br> jsonp: 'jsoncallback'、<br> データ: qsData、<br> タイムアウト: 5000、<br> beforeSend: function(){ <br> //このメソッドは jsonp モードではトリガーされません。その理由は、dataType が jsonp として指定されている場合、ajax イベントではなくなるためである可能性があります <br> }、<br> 成功: function (json) {//クライアント側で jquery によって事前定義されたコールバック関数。クロスドメイン サーバーで json データを正常に取得した後、このコールバック関数は動的に実行されます <br> If(json.actionErrors.length!=0){ <br> アラート(json.actionErrors); } <br> genDynamicContent(qsData,type,json); }、<br> 完全: function(XMLHttpRequest, textStatus){ <br> $.unblockUI({ fadeOut: 10 }); }、<br> エラー: function(xhr){ <br> //このメソッドは jsonp モードではトリガーされません。その理由は、dataType が jsonp として指定されている場合、ajax イベントではなくなるためである可能性があります <br> //リクエストエラー処理<br> alert("リクエストエラー (関連するネットワークステータスを確認してください。)"); }<br> });<br> <br><br> <br><br>次のように書かれているのを目にすることがあります: </div> <p><strong></strong></p> <p>コードをコピーします</p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="82552" class="copybut" id="copybut82552" onclick="doCopy('code82552')"> コードは次のとおりです:<u></u></a> $.getJSON("http://クロスドメイン dns/document!searchJSONResult.action?name1=" value1 "&jsoncallback=?", </span> 関数(json){ </div> If(json.属性名==値){ <div class="codebody" id="code82552"> // コードを実行 <br> }<br> }); <br> <br><br> <br>このメソッドは実際には、上記の例の $.ajax({..}) API の高度なカプセル化です。$.ajax API の基礎となるパラメーターの一部はカプセル化されており、表示されません。 <br> </div>このようにして、jquery は次の URL 取得リクエストに組み立てられます: <p></p> <p></p> <p>コードをコピーします</p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="22073" class="copybut" id="copybut22073" onclick="doCopy('code22073')"> コードは次のとおりです:<u></u></a> http://クロスドメイン dns/document!searchJSONResult.action?&jsoncallback=jsonp1236827957501&_=1236828192549&searchWord=</span> ユースケース&currentUserId=5351&conditionBean.pageSize=15</div> <div class="codebody" id="code22073"> <p>応答側 (http://cross-domain dns/document!searchJSONResult.action) で、 jsoncallback = request.getParameter("jsoncallback") を使用して、後で jquery 側でコールバックされる js 関数名を取得します。 : jsonp1236827957501 と応答の内容 スクリプト タグの場合: "jsonp1236827957501(" リクエスト パラメーターに従って生成された json 配列")"; jquery はコールバック メソッドを通じてこの js タグを動的にロードして呼び出します。 jsonp1236827957501 (json array);クロスドメインのデータ交換の目的を達成します。 </p> <p><strong>JSONP 原則</strong></p> <p>JSONP の最も基本的な原則は、<script> タグを動的に追加することであり、script タグの src 属性にはクロスドメイン制限がありません。このように、このクロスドメイン メソッドは、ajax XmlHttpRequest プロトコルとは何の関係もありません。 </p> <p>このように、「jQuery AJAX クロスドメイン問題」は誤った命題になりました。jquery $.ajax メソッド名は誤解を招きます。 </p> <p>dataType: 'jsonp' に設定されている場合、この $.ajax メソッドは ajax XmlHttpRequest とは関係がなく、JSONP プロトコルに置き換えられます。 JSONP は、サーバー側でスクリプト タグを統合してクライアントに返すことを可能にする非公式のプロトコルで、JavaScript コールバックの形式でクロスドメイン アクセスを可能にします。 </p> <p>JSONP はパディング付きの JSON です。同一オリジン ポリシーの制限により、XmlHttpRequest は現在のソース (ドメイン名、プロトコル、ポート) からのリソースのみを要求できます。クロスドメインリクエストを行いたい場合は、HTMLのscriptタグを使用してクロスドメインリクエストを行い、レスポンスで実行するスクリプトコードを返すことができます。JavaScriptオブジェクトはJSONを使用して直接渡すことができます。 このクロスドメイン通信方式は JSONP と呼ばれます。 </p> <p>jsonCallback 関数 jsonp1236827957501(....): クロスドメイン サーバー上の json データを取得した後、コールバック関数 </p> によって登録されます。 <p>Jsonp の実行プロセスは次のとおりです: </p> <p>まずクライアントでコールバック (例: 'jsoncallback') を登録し、次にコールバック名 (例: jsonp1236827957501) をサーバーに渡します。注: サーバーはコールバック値を取得した後、jsonp1236827957501(...) を使用して出力する json コンテンツを含める必要があります。この時点で、サーバーによって生成された json データはクライアントによって正しく受信されます。 </p> <p>次に、JavaScript 構文を使用して関数を生成します。関数名は、渡されたパラメーター「jsoncallback」jsonp1236827957501 の値です。</p> <p>最後に、json データがパラメーターとして関数に直接配置され、js 構文ドキュメントが生成され、クライアントに返されます。 </p> <p>クライアントのブラウザは、script タグを解析し、返された JavaScript ドキュメントを実行します。このとき、JavaScript ドキュメント データは、クライアントによって事前定義されたコールバック関数 (例: jquery $.ajax() メソッド) にパラメータとして渡されます。上記の例) カプセル化された成功: 関数 (json))。 </p> <p>jsonp メソッドは、<script src="http://cross-domain/...xx.js"></script> と原理的に一致していると言えます (qq space はこのメソッドを使用しています)。クロスドメインのデータ交換を実現するために広範囲に渡って行われます)。 JSONP はスクリプト インジェクション (スクリプト インジェクション) 動作であるため、特定のセキュリティ リスクが伴います。

それではなぜ jquery はクロスドメインポストをサポートしないのですか?

post を使用して iframe を動的に生成すると、クロスドメイン後の目的を達成できますが (これは、JS エキスパートが jquery1.2.5 にパッチを適用した方法です)、これは比較的極端な方法であるため、お勧めできません。

クロスドメインの get メソッドは合法であり、post メソッドはセキュリティの観点から違法であるとも言えます。最後の手段として、間違ったアプローチを取らないことが最善です。

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

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

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

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml" > 
 
     
     
    > 
 
 
 

其中 jsonCallback 是客戶端註冊的，取得跨網域伺服器上的json資料後，回呼的函數。 http://crossdomain.com /jsonServerResponse?jsonp=jsonpCallback 這個url 是跨域伺服器取json 資料的接口，參數為回調函數的名字，返回的格式為：jsonpCallback({msg:'this is json data'})

簡述原理與流程：先在客戶端註冊一個callback, 然後把callback的名字傳給伺服器。此時，伺服器先生成 json 資料。 然後以 javascript 語法的方式，產生一個function , function 名字就是傳遞上來的參數 jsonp。最後將 json 資料直接以入參的方式，放置到 function 中，這樣就產生了一段 js 語法的文檔，返回給客戶端。

客戶端瀏覽器，解析script標籤，並執行返回的 javascript 文檔，此時資料作為參數，傳入到了客戶端預先定義好的 callback 函數裡。 （動態執行回呼函數）