:jsドメイン間問題のまとめ

17996 ワード
js。
ここでは、http://www.kuqin.com/webpagedesign/20090422/47458.htmlから
JAvascriptは、セキュリティ上の考慮から、ドメイン間で他のページのオブジェクトを呼び出すことは許されません.しかし、セキュリティ制限と同時にiframeやajaxアプリケーションへの注入にも多くのトラブルが発生しています.覚えていなければ、前の3回のD 2フォーラムでは毎回このことを言っていましたが、ここではドメインを超えた問題を簡単に整理します.
まずドメイン間では、javascriptの同源ポリシーの制限により、a.comドメイン名のjsがb.comまたはc.a.comドメイン名のオブジェクトを操作できないため、簡単に理解できます.詳細については、次の表を参照してください.
URL
説明
通信を許可するかどうか
http://www.kuqin.com/lab/a.jshttp://www.kuqin.com/script/b.js
同じドメイン名の下で異なるフォルダ
許可
http://www.kuqin.com/a.jshttp://www.kuqin.com/b.js
同じドメイン名の下
許可
http://www.kuqin.com:8000/a.jshttp://www.kuqin.com/b.js
同じドメイン名、異なるポート
許可しない
http://www.kuqin.com/a.jshttps://www.kuqin.com/b.js
同じドメイン名、異なるプロトコル
許可しない
http://www.kuqin.com/a.jshttp://70.32.92.74/b.js
ドメイン名とドメイン名対応ip
許可しない
http://www.kuqin.com/a.jshttp://script.kuqin.com/b.js
プライマリドメインが同じで、サブドメインが異なる
許可しない
http://www.ithao123.com/a.jshttp://www.kuqin.com/b.js
異なるドメイン名
許可しない
特に2つの点に注意してください.1つ目は、プロトコルとポートによるドメイン間の問題「フロント」では何もできません.
第二に、ドメイン間問題では、ドメインはURLのヘッダによって識別されるだけで、同じipアドレスが2つのドメインまたは2つのドメインに対応しているかどうかを判断しようとしない.
次に、「フロント」で一般的にドメイン間処理を行う方法を簡単にまとめます.バックグラウンドproxyという案はバックグラウンドの配置に関連しています.ここでは説明しません.興味があるのはYAHOOのこの文章を見てください.JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Callsです.
1、document.domain+iframeの設定は、メインドメインが同じでサブドメインが異なる例に対してdocument.domainを設定することで解決できます.具体的なやり方はhttp://www.kuqin.com/a.html和http://script.kuqin.com/b.html2つのファイルにdocument.domain=“kuqin.com”を追加します.そしてa.htmlファイルにiframeを作成し、iframeのcontentDocumentを制御することで、2つのjsファイル間で「インタラクティブ」になります.もちろん、この方法はメインドメインが同じで2級ドメイン名が異なる場合を解決するしかありません.もしあなたが奇想天外にscript.kuqin.comのdomianをalibaba.comに設定したら、それは明らかに間違っています.コードは以下の通り:www.kuqin.comのa.html
1

2

3

4

5

6

7

8

9


        document.domain = 'kuqin.com';

	var ifr = document.createElement('iframe');

	ifr.src = 'http://script.kuqin.com/b.html';

	ifr.style.display = 'none';

	document.body.appendChild(ifr);

	ifr.onload = function(){

		var x = ifr.contentDocument;

		alert(x.getElementsByTagName("h1")[0].childNodes[0].nodeValue);

	}
script.kuqin.comのb.html
1


 document.domain = 'kuqin.com';
2、動的scriptの作成ブラウザではデフォルトでドメイン間アクセスは禁止されていますが、ページ内で他のドメインのJSファイルを参照することは禁止されておらず、導入したJSファイルのfunctionを自由に実行することができます.これにより、scriptノードを作成する方法で完全なドメイン間通信を容易に実現できます.具体的なやり方はyuiのGet Utilityを参考にすることができます
ここでscriptノードのロードが完了したかどうかを判断するのは面白い:ieはscriptのreadystatechange属性しか通じず、Safari 3.x以上はscriptのloadイベントをサポートしているが、firefoxとopreaはonloadで解決しなければならない.また、この方法はjsタイプのデータしか伝達できず、便利ではありません.以下に、scriptのロード完了を部分的に判断する方法を示します.
1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33


……

 

// ie  script readystatechange  

// IE supports the readystatechange event for script and css nodes

if (ua.ie) {

n.onreadystatechange = function() {

var rs = this.readyState;

if ("loaded" === rs || "complete" === rs) {

n.onreadystatechange = null;

f(id, url);

}

};

 

……

 

// // Safari 3.x supports the load event for script nodes (DOM2)

 

……

 

n.addEventListener("load", function() {

f(id, url);

});

 

……

 

// FireFox and Opera support onload (but not DOM2 in FF) handlers for

// script nodes.  Opera, but not FF, supports the onload event for link

// nodes.

} else {

n.onload = function() {

f(id, url);

};

}
3、iframeとlocation.hashという方法を利用して回りますが、ドメインを完全に越えた場合の足取り置換問題を解決することができます.原理はlocation.hashを用いて値を伝達することである.url:http://kuqin.com#hellowordの「#helloworld」はlocation.hashであり、hashを変更してもページがリフレッシュされるわけではないので、hash値を利用してデータ転送を行うことができます.もちろんデータ容量は限られています.ドメイン名kuqin.comのファイルcs 1.htmlがithao 123.comのドメイン名のcs 2.htmlと情報を伝達すると仮定すると、cs 1.htmlはまず隠れたiframeを自動的に作成し、iframeのsrcはithao 123.comのドメイン名のcs 2.htmlページを指し、このときのhash値はパラメータ伝達として使用することができる.cs 2.htmlは、リクエストに応答した後、cs 1.htmlのhash値を変更することでデータを転送します.(ieはparent.location.hashの値の変更を許可しないため、kuqin.comドメイン名の下のエージェントiframeを借ります).同時にcs 1.htmlにタイマを追加し、location.hashの値に変化があるかどうかを一定時間おきに判断し、少し変化があればhash値を取得する.コードは以下の通りです:まずkuqin.comの下のファイルcs 1.htmlファイルです:
1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16


	function startRequest(){

		var ifr = document.createElement('iframe');

		ifr.style.display = 'none';

		ifr.src = 'http://www.ithao123.com/lab/cscript/cs2.html#paramdo';

		document.body.appendChild(ifr);

	}

 

	function checkHash() {

		try {

			var data = location.hash ? location.hash.substring(1):'';

			if(console.log){

				console.log('Now the data is '+data);

			}

		}catch(e){};

	}

	setInterval(checkHash, 2000);
ithao 123.comドメイン名のcs 2.html:
1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23


(function(){

	//             

	switch(location.hash){

		case '#paramdo':

			callBack();

			break;

		case '#paramset':

			//do something……

			break;

	}

 

	function callBack(){

		try {

            parent.location.hash = 'somedata';

        } catch (e) {

        	//ie         parent.location.hash,          ithao123     iframe

        	var ifrproxy = document.createElement('iframe');

        	ifrproxy.style.display = 'none';

        	ifrproxy.src = 'http://kuqin.com/test/cscript/cs3.html#somedata';

        	document.body.appendChild(ifrproxy);

        }

	}

})();
kuqin.comの下のドメイン名cs 3.html
1

2


	//  parent.parent         ，  ie      location.hash  

	parent.parent.location.hash = self.location.hash.substring(1);
例をクリックしてください  hashは完全なドメイン間もちろん、urlにデータが直接露出したり、データ容量やタイプが限られたりするなど、多くの欠点があります.
4、flashを利用するこれはYUI 3のIOコンポーネントから見た方法で、具体的にはhttp://developer.yahoo.com/yui/3/io/ flashという案はよく分からないので、皆さんは自分でゆっくり考えて、ほほほ.Adobe Developer Connectionでは、より多くのドメイン間エージェントファイル仕様が表示されます.ross-Domain Policy File Specifications. HTTP Headers Blacklist.
el.valueとel.getAttribute(「value」)の違い
POJ3096-Surprising Strings