HTML5_html5チュートリアルスキルで通信APIの基本的な使い方を詳しく解説

1. ドキュメント間メッセージ通信
ドキュメント間メッセージ通信により、iframe、タブ、ウィンドウ間の安全なクロスソース通信が保証されます。これは、メッセージを送信する標準的な方法として postMessage API を定義します。 postMessage を使用してメッセージを送信するのは非常に簡単です。コードは次のとおりです。
chatFrame.contextWindow.postMessage('Hello,world','http://www.example.com');
受信時メッセージを表示するには、「イベント処理関数の追加」ページをクリックするだけです。メッセージが到着すると、メッセージのソースがチェックされて、メッセージを処理するかどうかが決定されます。
メッセージ イベントは、データとオリジン属性を持つ DOM イベントです。 data 属性は送信者によって配信される実際のメッセージであり、origin 属性は送信元です。
postMessage API は、同じオリジンのドキュメント間で通信できるだけでなく、ブラウザがオリジナル以外の通信を許可していない場合にも役立ちます。 postMessage は、その一貫性と使いやすさにより、同じ生成元のドキュメント間で通信する場合にも推奨されます。 postMessage API は、HTML5 Web ワーカーと通信する場合など、JavaScript 環境で通信する場合には常に使用する必要があります。
1.1 オリジンのセキュリティについて
HTML5 Rongguang では、ドメインのセキュリティを明確にし、改善するためにオリジンの概念を導入しています。オリジンは、ネットワーク上で信頼関係を確立するために使用されるアドレスのサブセットです。ソースはルール (スキーム)、ホスト (ホスト)、およびポート (ポスト) で構成されます。
ソースの概念ではパスは考慮されません。
HTML5 はソースのシリアル化を定義します。ソースは、API およびプロトコルでは文字列として表示されます。
PostMessage セキュリティ ルールにより、メッセージが意図しないソース ページに配信されないことが保証されます。メッセージを送信するとき、受信者のソースを指定するのは送信者です。送信者が postMessage を呼び出すために使用するウィンドウに特定のオリジンがない場合 (たとえば、ユーザーが別のサイトにジャンプした場合)、ブラウザはメッセージを配信しません。
同様に、メッセージを受信すると、送信者のソースもメッセージの一部として含まれます。偽造を避けるために、メッセージのソースはブラウザによって提供されます。受信者は、どのメッセージを処理し、どのメッセージを無視するかを決定できます。ホワイトリストを保持し、信頼できるソースからのメッセージのみを処理するようにブラウザーに指示できます。
サードパーティからの文字列は決して評価しないことが最善です。さらに、アプリケーション内部の文字列を処理するために eval メソッドを使用することは避けてください。 JSON は、window.JSON または json,.org パーサー経由で使用できます。
1.2 ブラウザによるドキュメント間メッセージ通信のサポート
一般的なアプローチは、XMLHttpRequest オブジェクトに withCredentials 属性が存在するかどうかを検出することです。

JavaScript コードコンテンツをクリップボードにコピーします

1. var xhr = new XMLHttpRequest(); if (typeof xhr.withCredentials === 未定義) { //クロスオリジン XMLHttpRequest をサポートしません } else { //クロスオリジンをサポートします起点 XMLHttpRequest }

1.3 postMessage API の使用
ヒント HTML5 で定義された MessageEvent インターフェイスは、HTML5 WebSocket および HTML5 WebWorkers の一部でもあります。 HTML5の通信機能では、MessageEventインターフェースと同じAPIを使用してメッセージを受信します。 EventSource API や Web Workers などの他の通信 API も、MessageEvent インターフェイスを使用してメッセージを配信します。
1.4 postMessage API を使用したアプリケーションの作成
メッセージの送信
対象ページの window オブジェクトで postMessage() 関数を呼び出すことでメッセージを送信できます。 コードは次のとおりです。以下:

JavaScript コードコンテンツをクリップボードにコピーします

1. window.postMessage("Hello, world", "ポルタ"); >

最初のパラメータには送信するデータが含まれ、2 番目のパラメータはメッセージの宛先です。 iframe にメッセージを送信するには、対応する iframe の contentWindow で postMessage を呼び出すことができます。コードは次のとおりです。

JavaScript コード

コンテンツをクリップボードにコピーします

1. document.getElementsByTagName("iframe")[0].contentWindow.postMessage("Hello, world"、「ちゃ」);

メッセージ イベントをリッスンする
メッセージを受信するときは、ページにイベント ハンドラーを追加するだけで済みます。メッセージが到着すると、メッセージのソースがチェックされて、メッセージを処理するかどうかが決定されます。

JavaScript コードコンテンツをクリップボードにコピーします

1. window.postMessage("Hello, world", "ポルタ"); >

メッセージ イベントは、データと元の属性を持つ DOM イベントです。 data 属性は送信者によって配信される実際のメッセージであり、origin 属性は送信元です。

ソースはルール (スキーム)、ホスト (ホスト)、ポート (ポート) で構成されます。
例: ルールが異なるため (https と http など)、ページのソースが異なります。
ソースの概念ではパスは考慮されません。たとえば、単なるパスではなく、それらは同じソースです。
ソースは、API およびプロトコルでは文字列として表示されます。

JavaScript コードコンテンツをクリップボードにコピーします

1. var OriginWhiteList = ["ポルタ", "ゲーム" 、""]; 関数 checkWhiteList(origin) { for (var i=0; iif (origin === OriginWhiteList[i]) { return true } } return false; } function messageHandler(e) { if (checkWhiteList(e.origin)) { processMessage(e.データ); } else { //不明なソースからのメッセージを無視する } }

postMessage API は、同一オリジンの通信と非オリジナルの通信の両方に適用できます。一貫性の観点から、相同なドキュメント間で通信する場合にも postMessage を使用することをお勧めします。

2 XMLHttpRequest Level2
XMLHttpRequest の改良版として、XMLHttpRequest Level2 は機能が大幅に向上しました。主に 2 つの側面に焦点を当てます: (1) クロスソース XMLHttpRequests; オリジン リソース共有 (クロスオリジン リソース共有) はクロスオリジン XMLHttpRequest を実装します。
クロスオリジン HTTP リクエストには、サーバーに HTTP リクエストのソース情報を提供する Origin ヘッダーが含まれています。ヘッダーはブラウザーによって保護されており、アプリケーション コードによって変更することはできません。基本的に、クロスドキュメントメッセージ通信におけるメッセージイベントのorigin属性と同じ効果があります。
CORS 仕様では、証明書の申請リクエストや GET と POST 以外の OPTIONS プリフライト リクエストなどの一部の機密動作は、この動作がサポートされるかどうかを判断するためにブラウザからサーバーに送信され、許可される必要があります。これは、正常な通信には CORS 機能を備えたサーバーによるサポートが必要な可能性があることを意味します。
2.2 進行状況イベント
新しいバージョンの XMLHttpRequest における最も重要な API の改善点の 1 つは、進行状況への応答の追加です。
XMLHttpRequest Level2 は、意味のある名前 Progress を使用して進行状況イベントに名前を付けます。

3 高度な機能3.1 構造化データ
postMessage の初期バージョンは文字列のみをサポートします。それ以降のバージョンでは、JavaScript オブジェクト、キャンバス imageData、ファイルなどの他のデータ型がサポートされました。ブラウザごとにサポートされる仕様が異なるため、オブジェクト タイプのサポートも異なります。

3.2 フレームバスティング
フレームバス技術を使用すると、特定のコンテンツが jframe にロードされないようにすることができます。アプリケーションは、最初に、そのウィンドウが最も外側のウィンドウ (window.top) であるかどうかを検出し、そうでない場合は、そのウィンドウを含むフレームから飛び出します。

JavaScript コード
コンテンツをクリップボードにコピーします

1. if(window!=window.top)
2. {
3. window.top.location=場所
4. }

3.3 バイナリ データ
新しいバイナリ API (Typed Array など) をサポートするブラウザは、XMLHttpRequest を使用してバイナリ データを送信できます。レベル 2 仕様では、Blob オブジェクトと ArrayBuffer オブジェクトを送信するための send() メソッドの呼び出しをサポートしています

XML/HTML コードコンテンツをクリップボードにコピー

1. var a = new Uint8Array([8,6,7,5,3, 0,9]); var xhr = new xhr.open("POST", "/data/ ", true); console.log(a); xhr.send(a.buffer);

XMLHttpRequest レベル 2 はバイナリ応答データも公開します。 responseType 属性値を text、document、arraybuffer、または blob に設定して、response 属性によって返されるオブジェクトのタイプを制御します。 HTTP 応答本文に含まれる生のバイトを表示したい場合は、responseTyper 属性値を arraybuffer または blob に設定する必要があります。