Javascriptクロスドメインアクセスソリューション


安全面の配慮から、Javascriptは国境を越えた訪問の能力を制限されましたが、時には合理的なクロスドメイン訪問をしたいです.どうすればいいですか?ここでは二つの種類に分けられます.一つは同じ親ドメインに基づくサブドメイン間のページへのアクセスです.以下の3つのdomainドメインを参照してください.taobao.com、jipiao.taobao.com、プロモーション.taobao.com.彼らは同じ親ドメインtaobao.comを持っています.二、異なる親ドメインページ間のアクセスに基づく.以下の3つのdomainドメインを参照してください.taobao.com、baidu.com、sina.com.cn.それらは異なる親領域を持っています.
それらのドメインをまたぐソリューションは、ドメインAのサーバ端にProxyプログラム(ASP、servletなど任意のサービス端末プログラム)を作成し、ドメインAのページJSが直接にドメイン下のProxyプログラムを使用して、ドメインAのページJSがドメインBの下に送信してデータを取得することを要求するプロジェクトを担当するプログラムです.最後にProxyでデータをページJSに戻して使います.訪問の流れはドメインAの下でJS-->ドメインAの下でProxy-->ドメインBのリンク例です.第一歩:ドメインA:http://Jipiao.taobao.com/test.htmページ上のjavascriptスクリプト:
<mce:script type="text/javascript"><!--
Var sUrl="http://Jipiao.taobao.com/proxy.do"; //       
var callback =
{
   success: function(res) {  alert(res.responseText);  },
   failure: function(res) {  alert('failure');},
   argument:{}
}
YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null); 
// --></mce:script>
第二ステップ:ドメインAのサービスを完了するProxyプログラム(ここではservletと仮定する)は、以下の通りです.
Public class Proxy extends …….{
..doGet(……..){
 HttpClient  client=……;
 GetMethod get=new  GetMethod("www.baidu.com/xxxxx.do");//   B   
 int statusCode = client.executeMethod(get);
 if (statusCode != HttpStatus.SC_OK) {
     byte[] responseBody = get.getResponseBody();
     String res=new String(responseBody);
     Httpresponse.getWriter().write(res);//       A 
 }
}
}
方案2:Scriptタグを通じて:ドメインAページでhttp://Jipiao.taobao.com/test.htm のheadに空のScriptラベルを書きます.
<html>
<head>
 <mce:script id="remoteScript" type="text/javascript" src=""/><!--
<head>
<body>
<script type="text/javascript" >
 Var remoteScript=document.getElementById("remoteScript");
 remoteScript.src="www.baidu.com/xxxxx.do";// B   
 alert(remote.test);//   B   JSON  
 alert(f[0]);
// --></mce:script>
</body>
</html>
注意:この方式はドメインBが返されるデータは合法的なJSONフォーマットまたはJSファイルのフォーマットでなければならない.例えばドメインBが返したデータフォーマットは以下の通りです.Var remote={test:’hello’}Var f=[2,1];
方案3:iframeを隠す、共有doman:すなわちドメインAページhttp://jipiao.taobao.com/yyyy.htm のページに隠しiframeを書きます.
<html>
<head>
<head>
<body>
<mce:script type="text/javascript" ><!--
 Document.domain="taobao.com";
 Var remoteHtml=document.getElementById("remoteHtml");
 remoteHtml.src="promotion.taobao.com/xxxx.htm";//     B   
 var document=remoteHtml.ContentDocument; //       document    B   xxx.htm    
// --></mce:script>
<iframe id="remoteHtml" src="" style="diapay:none" mce_style="diapay:none"/>
</body>
</html>
注意:ここですhttp://promotion.taobao.com/xxxx.htm ページもdocument.doman=「taobao.com」を設定する必要があります.この方法が効果的です.このようなiframeの方法が異なる親ドメイン間のクロスドメインに適合しないのは、Dcument.domanを自分の親ドメインに設定することができ、他のドメインに設定することができるのではなく、例えば、jiapio.taobao.comはdocument.doman=「taobao.com」だけでなく、document.doman=「baidu.com」ではなく、doman=「baidu.com」を設定することができないからです.
ここに挙げた3つの案にはそれぞれ長所と短所があります.Proxy案の利点はほとんどのクロスドメインアクセスに適用できます.また一つのドメインで開発するだけで、他のドメインではどんな種類のフォーマットのデータも提供できます.欠点はこのような方案が中間Proxyを通りましたので、遅延が少し大きいかもしれません.しかも、本域サーバーの負荷が重くなります.開発の仕事量も少し大きいです.Scriptタグの案は非常に簡単で、コードを使わずに済むということですが、帰りのデータフォーマットにはちょっと厳しいです.Json形式のデータしかないです.他のフォーマットのデータなら、この方法はどうすることもできません.iframe方式を隠すのも簡単です.戻りデータフォーマットは何でも処理できますが、同じ親ドメインでのクロスドメイン要求にのみ適用され、他のドメインに協力して開発する必要があります.つまり、document.domanを設定する必要があります.
原帖詳細:http://blog.csdn.net/lovingprince/archive/2008/09/20/2954675.aspx
JSクロスドメイン訪問の意味について、もう少し補足したいです.
  • クロスドメインアクセス、簡単に言えば、AサイトのjavascriptコードはBサイトにアクセスしようとしています.コンテンツの提出とコンテンツの取得を含みます.例えば、Aサイトのページから別のBサイト内のあるページのJSオブジェクトを実行したい、またはAサイトのページでJSでBサイト内のあるページのdom元素を解析したいなどです.このようなドメイン間のアクセス問題が発生したアプリケーションシーンは、一般的にiframeに異なるドメインのページを埋め込むか、あるいはAjax要求を異なるドメインに送信するかなどである.
  • セキュリティのため、ドメインを越えたアクセスは各ブラウザによってデフォルトで禁止されています.しかし、ブラウザは、ページ内で他のドメインのJSファイルを引用することを禁止しておらず、導入されたJSファイルのfunctionを自由に実行することができます.この点は個人的に重要だと思います.
  • ドメインをまたぐかどうかの判断ルールは、3つのドメイン名、プロトコル、ポートを比較することである.三者の中に一つの違いがあれば、国境を越える問題が発生します.私たちがよく言っているドメイン間の問題はドメイン名が違っています.このようなシーンが出現する確率が一番高く、解決できる方法があります.例えば、前に述べたtaobao.comドメイン下の二級ドメイン名がドメインにまたがる問題.
  • は、主ドメインが異なっていたり、httpsとhttpなどの契約が異なるクロスドメイン問題(例えば、*.taobao.comドメインが*.baidu.comドメイン内にアクセスしたい内容)については、Webから解決するのは全く不可能であり、サービスプロxyのソリューションを通じて解決するしかない.
  • 一般的な異なるドメイン間のページ制約dom要素は、window.locationが設定できますが、読み込めません.他のlocation属性と方法はアクセス禁止です.document.hrefは設定できますが、読み込めません.他のdocument属性と方法はアクセス禁止です.iframe>のsrcは設定できますが、読み込めません.