Javascript のクロスドメイン知識の詳細な紹介-jsチュートリアル-php.cn

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

高洛峰

リリース： 2016-11-05 16:37:28

オリジナル

1402 人が閲覧しました

JS クロスドメインの知識まとめ:

「クロスドメイン」という言葉が頻繁に登場する前から、実は私たちはよく使っていました。たとえば、Web サイト A の img では、src は Web サイト B の特定の画像アドレスを指します。これは、(ホットリンク対策技術に関係なく) 通常の状況では正常に表示されることに疑いの余地はありません。 script タグのは、他の Web サイトのスクリプトリソースを指すことができます (場合によっては、他の Web サイトの負荷を最大限に活用し、独自のサーバーの同時実行性を減らすために、これが推奨される場合もあります)。ただし、js を使用して、ajax などの他の Web サイトからデータを積極的にリクエストすると、通常クロスドメインと呼ばれる、イライラするクロスドメインの問題が発生します。セキュリティ上の理由により、主要なブラウザではクロスドメインアクセスがデフォルトで禁止されています。これには、同一オリジンポリシーの概念が含まれます。同一オリジンポリシーは、あるドメインから読み込まれたスクリプトが別のドメインのドキュメント属性を取得または操作することを防ぎます。つまり、要求された URL のドメインは、現在の Web ページのドメインと同じである必要があります。これは、ブラウザがさまざまなソースからコンテンツを分離して、ソース間での操作を防止することを意味します。

このブロガーは、クロスドメインの問題によって引き起こされる特定のセキュリティ問題については詳しく説明していないため、誰もが自分で判断できます。

しかし、多くの場合、特にインターネットが発展し続ける今日では、クロスドメインアクセス方法が標準化される前に、さまざまなパートナーやデータプロバイダーにフロントエンドインターフェイスを要求する必要があります (クロスドメインアクセスの要件を参照)。情報によると、html5 WebSocket 標準はクロスドメインデータ交換をサポートしており、将来的にはオプションのクロスドメインデータ交換ソリューションになるはずです。)その制限を回避しますか？答えはたくさんありますが (どれも面倒ですが)、最も一般的に使用されているのは、いわゆる JSONP クロスドメインです。

JSONP の原則

JSONP の最も基本的な原則は、<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。</script>

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>

ログイン後にコピー

原理とプロセスを簡単に説明します。まずクライアントでコールバックを登録し、次にコールバックの名前をサーバーに渡します (ここで、クライアントとサーバーはキーを jsonp のクエリ文字列値として渡すことに同意します)。この時点で、サーバーはまず json データを生成します。次に、JavaScript 構文を使用して関数を生成します。関数名は、渡されたパラメーター jsonp です。最後に、json データがパラメーターとして関数に直接配置されるため、js 構文ドキュメントが生成され、クライアントに返されます。クライアントブラウザは script タグを解析し、返された JavaScript ドキュメントを実行します。つまり、事前定義されたコールバック関数を実行します。

上記の簡単な説明から推測できます: js コードフラグメントを関数の形式で返すことに加えて、サーバーは仕様を満たすすべての実行可能な js フラグメントを自然に返すことができます。

JSONP の欠点は、GET リクエストのみをサポートし、POST などの他のタイプの HTTP リクエストはサポートしないこと、クロスドメイン HTTP リクエストのみをサポートし、異なるドメインの 2 つのページ間で JavaScript 呼び出しを行う方法の問題を解決できないことです。 (下記も参照) jQuery の

Jsonp

前に述べたように、jsonp は ajax リクエストではありませんが、jQuery はクロスドメインリクエストに対して jQuery.ajax と一貫したメソッドを提供します:

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

ログイン後にコピー

上に示すように、dataType は次のように設定されます。 jsonp。これはクロスドメインリクエストです。jsonp は関数名を渡すためにサーバーによって事前に設定されたクエリ文字列キーに設定され、jsonpCallback が設定されていない場合は、jQuery がランダムな関数名を生成します。 (ウィンドウオブジェクトのグローバル関数の読み込みでは、コードが挿入されると関数が実行され、実行後に削除されます) 自動生成された関数は、上記のコードの成功関数をコールバックすると推測できます。 (手動で jsonpCallback に値を割り当てるとき、success 関数がコールバックするのか、それとも jQuery が事前定義された関数を探し、見つからない場合はエラーを報告するのか疑問に思います。ブロガーは怠け者です。後でもう一度試してください。)もちろん、jQuery は、単純なバージョンの $.getJSON を提供します。ここでは説明しません。

注意する必要があるのは、ajax リクエストの jqXHR パラメーターであり、XMLHTTPRequest オブジェクト (継承またはカプセル化) と見なすこともできます。 XMLHTTPRequest の最も有用な情報を提供してください。XMLHTTPRequest のリクエストステータス情報が欠如しているため、エラー、完了などのほとんどのコールバック関数をトリガーできません。(jQuery1.9.0) 、そしてコールバックできる成功関数はおそらくscriptタグのloadイベントによってトリガーされるはずであり、XMLHTTPRequestのステータスに依存するajaxの仕組みとはまったく異なります。テストの結果、jQuery から生まれた zepto (v1.1.3) では、jsonp リクエストでエラーが発生しました。たとえば、js ドキュメントをロードするときにヘッダーが 401 エラーを返すと、エラー関数が実行されます。この関数の jqXHR パラメータも本物の jqXHR タイプではないため、この場合、特定のリンクで問題が発生したことが通知されるだけですが、それはわかりません。特定のエラー情報。応答ヘッダーに有用な情報が含まれるシナリオと同様に、ブロガーは jsonp の使用を推奨しません。jsonp を使用するための前提条件は、ネットワーク異常などの非ビジネス例外に加えて、すべてのビジネス例外であると言えます。サーバーから受信したリクエストです）応答応答期間中にスローされたすべての例外）は、クライアントのコールバック分析を容易にするために、リクエスト結果の形式でクライアントに直接返す必要があります。

読んでいただきありがとうございます。皆さんのお役に立てれば幸いです。このサイトのご支援に感謝します。