Window.nameはクロスドメインデータ転送の問題を解決します

Window.nameはクロスドメインデータ転送の問題を解決します
<br />原文: http://research.microsoft.com/~helenw/papers/subspace.pdf
window.name 転送技術はもともと、クッキーのいくつかの欠点 (ドメイン名ごとに 4 x 20 Kb の制限、データは文字列のみ、クッキーの設定と取得の構文が複雑など) を解決するために Thomas Frank によって発明されました (詳細については、原文「クッキーなしのセッション変数」を参照してください)。その後、Kris Zyp はこの方法に基づいて window.name 転送を強化し、Dojo (dojox.io.windowName) に導入して、クロスドメイン データ転送の問題を解決しました。
window.name の優れた点:名前の値は、異なるページ (異なるドメインでも) を読み込んだ後も保持され、非常に長い名前の値 (2 MB) をサポートできます。
window.name 伝送技術の基本原理と手順は次のとおりです。

name はブラウザ環境の global/window オブジェクトのプロパティであり、フレームに新しいページが読み込まれると、name のプロパティ値は変更されません。 iframe にリソースを読み込むと、ターゲット ページはフレームの name 属性を設定します。この名前属性値を取得して、Web サービスによって送信された情報にアクセスできます。ただし、name 属性は同じドメイン名を持つフレームにのみアクセスできます。つまり、name 属性にアクセスするには、リモート Web サービス ページが読み込まれた後、フレームを元のドメインに戻す必要があります。同一生成元ポリシーにより、他のフレームが名前属性にアクセスすることはできません。名前属性を取得したら、フレームを破棄します。
最上位レベルでは、name 属性は安全ではなく、name 属性に設定されたすべての情報は後続のすべてのページで利用できます。ただし、windowName モジュールは常に iframe 内のリソースを読み込み、データが取得されるか、最上位レベルの新しいページを参照すると、iframe は破棄されるため、他のページは window.name プロパティにアクセスできなくなります。
基本的な実装コードは YUI に基づいており、Kejun によって書かれた例から派生しています。

(関数(){
var YUD = YAHOO.util.Dom、YUE = YAHOO.util.Event;
データリクエスト = {
_doc: ドキュメント、
cfg: {
プロキシ URL: 'proxy.html'
}
};
dataRequest.send = function(sUrl, fnCallBack){
if(!sUrl || typeof sUrl !== '文字列'){
戻る;
}
sUrl = (sUrl.indexOf('?') > 0 ? '&' : '?') 'windowname=true';
var frame = this._doc.createElement('iframe'), state = 0, self = this;
this._doc.body.appendChild(フレーム);
frame.style.display = 'なし';
var clear = 関数(){
試す{
frame.contentWindow.document.write();
フレームのコンテンツウィンドウを閉じます。
self._doc.body.removeChild(フレーム);
}キャッチ(e){}
};
var getData = 関数(){
試す{
var da = frame.contentWindow.name;
}キャッチ(e){}
クリア();
if(fnCallBack && typeof fnCallBack === 'function'){
fnCallBack(da);
}
};
YUE.on(フレーム、'load'、関数(){
if(状態 === 1){
データを取得します。
} そうでない場合(状態 === 0){
状態 = 1;
frame.contentWindow.location = self.cfg.proxyUrl;
}
});
フレーム.src = sUrl;
};
})();

<<:  MySQL 更新セットとの違い

>>:  element-uiのアップロードコンポーネントでファイルやその他のパラメータを転送する際の問題を分析する

推薦する

Dockerのプロセスとイメージを実行するための基本コマンドの詳細な説明

目次1. ワークフローを実行する2. ミラーリングの基本コマンド1. ワークフローを実行するDock...

TypeScript におけるジェネリックケースの詳細な説明

ジェネリックの定義 // 要件 1: ジェネリックは指定されていないデータ型をサポートできるため、渡...

VUE ユニアプリの条件付きコーディングとページレイアウトに関する簡単な説明

目次条件付きコンパイルページレイアウト要約する条件付きコンパイル条件付きコンパイルでは、特別なコメン...

Docker実行コンテナが作成状態にある問題についての簡単な説明

最近の問題としては、次のような現象があります。システムには、docker run コマンドを継続的に...

Vue のフィルターの適用シナリオの詳細な説明

filterは通常、特定の値をフィルターするために使用されます。たとえば、フィールドが空だが、フロン...

Mysql が CPU を過剰に占有する場合の最適化方法 (必読)

Mysql が CPU を占有しすぎる場合、どこから最適化を開始すればよいでしょうか? CPU 使...

Vueのデータ応答性原則の詳細な説明

この記事は主に、Vue のレスポンシブ ソース コードを理解していない、または触れたことがない人向け...

js の hasOwnProperty のプロパティとインスタンスの使用法の詳細な説明

1. js は hasOwnProperty が不正に占有されることから保護しません。オブジェクトに...

JavaScript における BOM と DOM の詳細な説明

目次BOM (ブラウザ オブジェクト モデル) 1. ウィンドウブラウザのウィンドウサイズを取得する...

JSコンストラクタとインスタンス化およびプロトタイプ導入の関係

目次1. コンストラクタとインスタンス化2. コンストラクターとインスタンス化の関係は何ですか? 3...

ウェブサイトのフッター沈下現象に対する3つの解決策を詳しく解説

背景多くのウェブサイトのデザインは、一般的にコンテンツ+フッターの2つの部分で構成されています。コン...

Vue3 リストインターフェースデータ表示の詳細

目次1. リストインターフェースの表示例2. データを表示する2.1. コンポーネントがリストに表示...

Vue プロジェクトはファイルダウンロードの進行状況バー機能を実装します

日常業務でファイルをダウンロードする一般的な方法は 2 つあります。 1 つ目は、サーバーのファイル...

HTMLのインライン要素とブロックレベル要素とは何か、またそれらの違いは何ですか

以前の就職面接で面接官が尋ねた質問を覚えています。「インライン要素とは何ですか。ブロックレベル要素と...

nginx ロードバランシングを介して https にリダイレクトする方法

ウェブ上で証明書とキーをコピーするscp -rp -P52113 /application/ngin...