English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

Javascriptのクロスドメイン知識の詳細な紹介

JSクロスドメイン知識の要約：

「クロスドメイン」という言葉が頻繁に使われるようになる以前には、私たちはそれを使用していました。例えば、Aウェブサイトのimgタグのsrc属性がBウェブサイトの特定の画像アドレスを指している場合、通常は正常に表示されます（防盗連携技術については言及しません）。同様に、scriptタグのsrc属性を他のウェブサイトのスクリプトリソースに設定することもできます（ある場合には、他のウェブサイトの負荷優位を最大限に活用し、自社のサーバーの並行処理量を減らすために、これを推奨することもあります）。しかし、他のウェブサイトのデータをjsで積極的にリクエストする場合（例えばajax方式）、不快なクロスドメイン問題に直面します。これが私たちが通常言うクロスドメインです。セキュリティの理由から、クロスドメインアクセスは主要なブラウザでデフォルトで禁止されています。ここでは、ソースポリシーという概念が関与しています：ソースポリシーは、一つのドメインから読み込まれたスクリプトが別のドメインのドキュメント属性を取得したり操作したりすることを阻止します。つまり、リクエストされたURLのドメインは、現在のWebページのドメインと同じである必要があります。これは、異なるソースからのコンテンツをブラウザが隔離し、彼らの間の操作を防ぐことを意味します。

クロスドメインがもたらす具体的なセキュリティ問題について、ブロガーは深く追求していません。皆さんは自分で推測してください。

しかし、特にインターネットが持続的に発展する今日、異なるパートナーやデータプロバイダからのフロントエンドインターフェースをリクエストする必要があります。クロスドメインアクセスの方法が規範化されていない前（クライアント側のクロスドメインアクセスのニーズがwに引き起こされたと見られます）3cの注意を払ってください、資料を見るとhtml5 WebSocket標準はクロスドメインのデータ交換をサポートしており、将来の選択可能なクロスドメインデータ交換の解決策の一つでもあります。それを制限を回避する方法はたくさんあります（ただし、どれも厄介です）。最も一般的なのは、いわゆるJSONPクロスドメインです。

JSONPの原理

JSONPの最も基本的な原理は、動的に<script>タグを追加することで、scriptタグのsrc属性にはクロスドメインの制限がありません。このように言えば、このクロスドメインの方法は、ajax XmlHttpRequestプロトコルとは関係ありません。

JSONPとは、JSON with Paddingのことです。同源ポリシーによる制限により、XmlHttpRequestは現在のソース（ドメイン、プロトコル、ポート）のリソースのみを要求することが許可されています。クロスドメインリクエストを行いたい場合、htmlのscriptタグを使用してクロスドメインリクエストを行い、レスポンスで実行するscriptコードを返すことができます。このようなクロスドメインのコミュニケーション方法がJSONPと呼ばれます。

簡単な例を示します：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
  <title>Test Jsonp</title> 
  <script type="text/javascript"> 
      function jsonpCallback(result) 
      { 
      alert(result.msg); 
      } 
    </script> 
  <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script> 
</head> 
<body> 
</body> 
</html>

原理とプロセスの概要を述べます：まず、クライアントでcallbackを登録し、そのcallbackの名前をサーバーに渡します（ここでは、クライアントとサーバーが、jsonpというキーでクエリストリング値として渡すことに合意しています）。その後、サーバーがjsonデータを生成します。それから、javascriptの文法でfunctionを作成し、functionの名前は渡されたパラメータjsonpです。最後に、jsonデータをfunctionに直接引数として置き、js文法のドキュメントを生成し、クライアントに返します。クライアントのブラウザがscriptタグを解析し、返されたjavascriptドキュメントを実行することで、事前に定義されたcallback関数を実行します。

上記の簡単な説明から推測できます：サービス側は、関数形式のjsコードスニペットを返すだけでなく、標準に従ったすべての実行可能なjsコードスニペットを返すことができます。

Jsonpの欠点は、GETリクエストのみをサポートし、POSTなどの他のHTTPリクエストをサポートしないこと、および、クロスドメインHTTPリクエストのみをサポートすることです。これにより、異なるドメインの二つのページ間でJavaScript呼び出しを行う問題を解決できません。（以下に続きます）

jQueryのJsonp

前述のように、JsonpはAjaxリクエストではありませんが、jQueryはjQuery.ajaxと同じ方法でクロスドメインリクエストを提供します：

$.ajax({
  url: 'http://crossdomain.com/jsonServerResponse',
  type: 'GET',
  dataType: 'jsonp',
  jsonp: "callback",
  jsonpCallback: 'functionName',
  success: function (data, textStatus, jqXHR) { }
  //……
});

上記のように、dataTypeがjsonpに設定されていると、それはクロスドメインリクエストであることを示しています。Jsonpがサーバーで指定された関数名を渡すクエリストリングキーとして設定され、JsonpCallbackがjs関数名です；JsonpCallbackが設定されていない場合、jQueryは自動的に生成されたランダムな関数名を生成します（windowオブジェクトにグローバル関数をロードし、コードが挿入されたときに実行され、実行が完了すると削除されます）。この自動生成された関数は、上記のコードの成功関数に戻されます。（JsonpCallbackに手動で値を設定した場合、成功関数がコールバックされるかどうかはわかりません。jQueryがプレデファインされた関数を探しますが、見つからない場合はエラーが報告されます。管理人は怠け者で、後で試してみます。）もちろん、jQueryは簡単なバージョン、$.getJSONを提供しており、ここでは説明しません。

成功関数のjqXHR引数には注意が必要です。Ajaxリクエストでは、それは本物のjqXHRオブジェクトであり、XMLHTTPRequestオブジェクト（継承または包装）としても見ることができますが、Jsonpリクエストではそうではありません。ほとんど情報を提供しません：それはXMLHTTPRequestのリクエスト状態情報が欠けており、したがって、errorやcompleteなどのほとんどのコールバック関数をトリガーできません（jQuery1.9.0）であり、success関数がコールバックされるのはscriptタグのloadイベントがトリガーされるため、これはajaxがXMLHTTPRequestの状態のメカニズムに完全に異なることも同様です。テストによると、jQueryの派生であるzepto（v1.1.3）、jsonpリクエストでエラーが発生した場合、例えばjsドキュメントをロードする際にヘッダーが返されるとき、401エラーが発生した場合、error関数が実行されますが、その関数のjqXHR引数も本格的なjqXHRタイプではありません。また、それを通じて応答のヘッダー情報を取得することもできません。このような場合、私たちはあるプロセスがエラーになっていることを知るだけで、具体的なエラーメッセージは知りません。応答ヘッダーが有用な情報を持ち、そのような状況では、ブログの著者はjsonpを使用することを推奨しません。jsonpを使用する前提条件は、ネットワークエラーなどの非ビジネス的なエラー以外のすべてのビジネス的なエラー（一般的に言えば、サーバーからリクエストを受け取り、応答を返すまでの間に発生するすべてのエラー）をクライアントに直接応答結果として返す必要があります。これにより、クライアントがリターン結果をコールバック分析することができます。

ご読読ありがとうございます。皆様のサポートに感謝します。

声明：本文の内容はインターネットから取得しており、著作権者は所有しておりません。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、本サイトは所有権を持ちません。また、人工的な編集は行われていません。したがって、法律责任も負いません。著作権侵害が疑われる内容がある場合は、メールを送信していただければ幸いです：notice#oldtoolbag.com（メールを送信する際、#を@に置き換えてください。通報を行い、関連する証拠を提供してください。一旦確認が取れましたら、本サイトは即座に侵害疑いのコンテンツを削除します。）

基礎教程
おすすめ