ホームページ > 記事 > ウェブフロントエンド > Javascript のクロスドメイン知識の詳細な紹介
Javascript のクロスドメイン知識の詳細な紹介
- 高洛峰オリジナル
- 2016-12-08 13:58:351376ブラウズ
JS クロスドメイン知識まとめ:
「クロスドメイン」という言葉が頻繁に登場する前から、実は私たちはよく使っていました。たとえば、Web サイト A の img では、src は Web サイト B の特定の画像アドレスを指します。これは、(ホットリンク対策技術に関係なく) 通常の状況では正常に表示されることに疑いの余地はありません。 script タグの は、他の Web サイトのスクリプト リソースを指すことができます (場合によっては、他の Web サイトの負荷を最大限に活用し、独自のサーバーの同時実行性を減らすために、これが推奨される場合もあります)。ただし、js を使用して、ajax などの他の Web サイトからデータを積極的にリクエストすると、通常クロスドメインと呼ばれる、イライラするクロスドメインの問題が発生します。セキュリティ上の理由により、主要なブラウザではクロスドメイン アクセスがデフォルトで禁止されています。これには、同一オリジン ポリシーの概念が含まれます。同一オリジン ポリシーは、あるドメインから読み込まれたスクリプトが別のドメインのドキュメント属性を取得または操作することを防ぎます。つまり、要求された URL のドメインは、現在の Web ページのドメインと同じである必要があります。これは、ブラウザがさまざまなソースからコンテンツを分離して、ソース間での操作を防止することを意味します。
このブロガーは、クロスドメインの問題によって引き起こされる特定のセキュリティ問題については詳しく説明していないため、誰もが自分で判断できます。
しかし、多くの場合、特にインターネットが発展し続ける今日では、クロスドメイン アクセス方法が標準化される前に、さまざまなパートナーやデータ プロバイダーにフロントエンド インターフェイスを要求する必要があります (クロスドメイン アクセスの要件を参照)。情報によると、html5 WebSocket 標準はクロスドメイン データ交換をサポートしており、将来的にはオプションのクロスドメイン データ交換ソリューションになるはずです。)その制限を回避しますか？答えはたくさんありますが (どれも面倒ですが)、最も一般的に使用されているのは、いわゆる JSONP クロスドメインです。
JSONP の原則
JSONP の最も基本的な原則は、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを動的に追加することであり、script タグの src 属性にはクロスドメインの制限がありません。このように、このクロスドメイン メソッドは、ajax XmlHttpRequest プロトコルとは何の関係もありません。
JSONP はパディング付きの JSON です。同一オリジン ポリシーの制限により、XmlHttpRequest は現在のソース (ドメイン名、プロトコル、ポート) からのリソースのみを要求できます。クロスドメイン リクエストを作成する場合は、HTML 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 と一貫性を持たせる方法を提供しています。 dataType これがクロスドメインリクエストであることを示すために jsonp に設定されます。jsonp は関数名を渡すためにサーバーによって事前に設定されたクエリ文字列キーに設定され、jsonpCallback は jsonpCallback が設定されていない場合は js 関数名です。ランダムな関数名を自動的に生成します (ウィンドウ オブジェクトにグローバル関数をロードします。この関数はコードが挿入されるときに実行され、実行後に削除されます。) 自動生成された関数は、成功関数をコールバックすると推測できます。上記のコード。 (手動で jsonpCallback に値を割り当てるとき、success 関数がコールバックするのか、それとも jQuery が事前定義された関数を探し、見つからない場合はエラーを報告するのか疑問に思います。ブロガーは怠け者です。後でもう一度試してください。)もちろん、jQuery は、単純なバージョンの $.getJSON を提供します。ここでは説明しません。
成功関数の jqXHR パラメータに注意する必要があります。ajax リクエストでは、これは XMLHTTPRequest オブジェクト (継承またはカプセル化された) と見なすこともできる本物の jqXHR オブジェクトですが、これは当てはまりません。 jsonp リクエストでは、XMLHTTPRequest の最も有用な情報を取得します。XMLHTTPRequest のリクエスト ステータス情報が欠落しているため、エラー、完了などのほとんどのコールバック関数 (jQuery1.9.0) をトリガーできず、成功します。コールバックできる関数はscriptタグのloadイベントによってトリガーされると推測されており、XMLHTTPRequestのステータスに依存するajaxの仕組みとは全く異なります。テストの結果、jQuery から生まれた zepto (v1.1.3) では、jsonp リクエストでエラーが発生しました。たとえば、js ドキュメントをロードするときにヘッダーが 401 エラーを返すと、エラー関数が実行されます。この関数の jqXHR パラメータも本物の jqXHR タイプではないため、この場合、特定のリンクで問題が発生したことが通知されるだけですが、それはわかりません。特定のエラー情報。応答ヘッダーに有用な情報が含まれるシナリオと同様に、ブロガーは jsonp の使用を推奨しません。jsonp を使用するための前提条件は、ネットワーク異常などの非ビジネス例外に加えて、すべてのビジネス例外であると言えます。サーバーから受信したリクエストです）応答応答期間中にスローされたすべての例外は、クライアントのコールバック分析を容易にするために、リクエスト結果の形式でクライアントに直接返す必要があります。