国境を越えた問題の整理

7746 ワード

クロスドメインは、フロントエンドの開発者が身につけなければならない概念です.この文章はいくつかの基本的な問題から出発して、この概念を理解します.
まず、何がクロスドメインですか?なぜクロスドメインがありますか?
ドメインをまたぐという言葉は文字通りドメイン名にまたがるという意味ですが、実際にはドメインをまたぐ範囲は決して狭くないです.具体的な概念は以下の通りです.プロトコル、ドメイン名、ポートにはどのような違いがあるかによって、異なるドメインとして扱われます.ですから、もしあなたのバックエンドがNODEJSを使っていたら、ポートの設定はデフォルトの3000を採用しています.それともクロスドメインが発生します.クロスドメインという問題が発生したのは、外部の文書を勝手に引用すれば、異なるラベルの下のページで類似のファイルを引用して、ブラウザがばかになりやすく、安全も保障されなくなるということが分かりやすいからです.何事も安全第一ですよ.しかし、セキュリティ制限と同時にiframeやajaxアプリケーションにも多くの迷惑をかけています.したがって、一部の方法により、ドメインのjsが他のドメインのページオブジェクトを操作できるようにするか、または他のドメインのjsがドメインのページオブジェクト(iframe間)を操作できるようにする必要があります.以下は具体的なクロスドメインの状況を詳しく説明します.


URL                      //               
http://www.a.com/a.js
http://www.a.com/b.js     //          
http://www.a.com/lab/a.js
http://www.a.com/script/b.js //             
http://www.a.com:8000/a.js
http://www.a.com/b.js     //    ，         
http://www.a.com/a.js
https://www.a.com/b.js //    ，        
http://www.a.com/a.js
http://70.32.92.74/b.js //       ip    
http://www.a.com/a.js
http://script.a.com/b.js //    ，        （cookie           ）
http://www.a.com/a.js
http://a.com/b.js //    ，      （  ）    （cookie           ）
http://www.cnblogs.com/a.js
http://www.a.com/b.js //

じゃ、クロスドメインの方法は何がありますか?
国境を越えるという制限がある以上、私達はどうやって迂回しますか?
1.document.domainを通じてドメインを横断する
前に述べたように、ブラウザには同一ソースポリシーがあり、その制限の一つはajaxの方法で異なるソースの文書を要求することができないことである.第二の制限は、ブラウザの異なるドメインのフレーム間では、jsのインタラクションができません.異なるフレームの間ではwindowオブジェクトを取得できますが、該当する属性と方法は取得できません.例えば、ページがあります.住所は?http://www.damonare.cn/a.html このページの中にiframeがあります.そのsrcはhttp://damonare.cn/b.html明らかに、このページとその中のiframeフレームは異なる領域です.だから、私達はページの中でjsコードを書くことでiframeの中のものを得ることができません.


    function test(){
        var iframe = document.getElementById('iframe');
        var win = iframe.contentWindow;//     iframe  window  ，  window               
        var doc = win.document;//      iframe  document  
        var name = win.name;//        window   name  
    }


</code></pre>この 、document.domainは に ちます.http://www.damonare.cn/a.html http://damonare.cn/b.htmlこの つのページのdocument.domainは じドメインにすればいいです.ただし、Dcument.domanの  には  があり、Dcument.domannを    またはより いレベルの ドメインに  するしかありません.そして、メインドメインは じでなければなりません.<li>ページにありますhttp://www.damonare.cn/a.html でdocument.domanを  します.</li><pre><code><iframe id="iframe" src="http://damonare.cn/b.html" onload="test()"/>
<disable_script type="text/javascript">
    document.domain = 'damonare.cn';//     
    function test(){
        alert(document.getElementById('iframe').contentWindow);//contentWindow         window   
    }
</disable_script>
</code></pre>ページでhttp://damonare.cn/b.html でdocument.domainを  します.<pre><code><disable_script type="text/javascript">
    document.domain = 'damonare.cn';// iframe         document.domain，       document.domain  
</disable_script>
</code></pre>document.domainを  する  は、 なるサブドメインのフレーム のインタラクションのみに  されます.<br>2.location.hashを じてドメインを  する<br> ウィンドウはiframeのURLを み きできますので、iframeは ウィンドウのURLを いてもいいです.URLの  はhashと ばれています.{ とその ろの  です.ブラウザのアンカーポイントの   けに   に われています.Server はこの  に  がないです.HTTP    でhashを  しないというべきです.この  の  はHTTP  が  しません.しかし、ブラウザの  が  されます.この  の  は、URLのhash  を えて     を うことです. windowは のwindowのlocationを えてメッセージを  します( つのページは じドメインでIE、Chromeはparent.location.hashの を  することができませんので、 ウィンドウのドメイン の の  frameを  します).そして  のURLの  をモニターしてメッセージを  します.この  の  は  でないブラウザの  を  します.また、いくつかのブラウザはオンハシュチャンゲイベントをサポートしていません.URLの  を るためにポーリングをする  があります.  に、このようにしても、データが  urlに  されて、データの  とタイプが られているなどの  があります.  の を します.<br> ページがbaidu.com/aであれば、iframeが め んでいるページがgoogle.comである(ここではドメイン などurl  を  している)、この2つのページ の  を  するには、  の  があります.<li> a.はデータをb.htmlに  して、**a.はiframeのsrcを  します.google.com/b.htmlを  してurlに  が  して、  の  を  します.<li> b.はa.にデータを  します. つのページは じドメインでIE、Chromeはparent.locations.hashの を  することができませんので、 の  のドメイン の の   raifme**bsによって しiframeを  します.このiframeのsrcはbaidu.comドメインの のものです.「http://www.baidu.com/proxy.html#dataurlが  するのを  しました.a.htmlのurlを  します. じ  なので、proxy.はa.のurl hashを  します.***a.はurlが  するのを  して、  の  をトリガします.<br>b.キーコードは<pre><code>try {  
    parent.location.hash = 'data';  
} catch (e) {  
    // ie、chrome         parent.location.hash，  
    var ifrproxy = document.createElement('iframe');  
    ifrproxy.style.display = 'none';  
    ifrproxy.src = "http://www.baidu.com/proxy.html#data";  
    document.body.appendChild(ifrproxy);  
}
</code></pre>  としては、この2つの  は  にhackyなので、  では く われているシーンは  に ないです.ポイントは の3つの  です.<br>3.HTML 5のpostMessageによるドメイン  <br>  ブラウザInternet Explorer 8＋、chrome、Firefox、Opera、Safariはこの  をサポートします.この  は に  を け る「message」イベントとメッセージを る「postMessage」  が まれています.<br>Aページは、postMessage  でメッセージを  する.<pre><code>window.onload = function() {  
    var ifr = document.getElementById('ifr');  
    var targetOrigin = "http://www.google.com";  
    ifr.contentWindow.postMessage('hello world!', targetOrigin);  
};
</code></pre>Bページは、メッセージイベントを じて  され、メッセージを  する.<pre><code>var onmessage = function (event) {  
  var data = event.data;//    
  var origin = event.origin;//        
  var source = event.source;// Window    
  if(origin=="http://www.baidu.com"){  
    console.log(data);//hello world!  
  }  
};  
if (typeof window.addEventListener != 'undefined') {  
  window.addEventListener('message', onmessage, false);  
} else if (typeof window.attachEvent != 'undefined') {  
  //for ie  
  window.attachEvent('onmessage', onmessage);  
}
</code></pre>このスキームはまた、 れたiframeを  し、H 5の   も  であり、モバイル  で しても い.<br>4.JSONP  のドメイン  <br> ほどお ししたこれらは     です.つまり、2つのiframe、ページとページとの です. のようにいくつかの  ドメインにまたがっています.scriptタグによって  されたjsは じソースポリシーによって  されていません.だから、scriptタグを じてjsまたは の    を  することができます.このファイルはjs  の び しを します.たとえば、a.htmlページがありますが、その のコードはajaxを  して なるドメインのjsonデータを  する  があります.このjsonデータアドレスを  してください.http://damonare.cn/data.phpでは、a.htmlのコードはこのようにできます.<pre><code><?php $callback = $_GET['callback'];//       
$data = array('a','b','c');//      
echo $callback.'('.json_encode($data).')';//  
??>
</code></pre>jqueryは   にグローバル  を  してcalback=?の   を  します.データを  すると   に  されます.  には      として  します.. <br>JSONPの  と  :<li> JSONPの  は、XMLHttpRequestオブジェクトによって  されるAjax  のように  ソースポリシーによって  されていません.より いブラウザで  できます.XMLtpRequestやActiveXのサポートは  です.  が  したら、calbackを び すことができます.<li> JSONPの  は、POSTなどの のタイプのHTTP  をサポートしていないGET  だけをサポートしています.ドメイン HTTP  だけをサポートしています.このような  、ドメイン の2つのページの でJavaScript び しがどのように われているかは  できません.<br>5.CORSによるドメイン  <br>CORS(Cross-Origin Resource Sharing)ドメインをまたぐリソース  は、ドメインをまたぐリソースにアクセスする に、ブラウザとサーバがどのようにコミュニケーションを るべきかを  しています.CORSの  にある   な えは、ブラウザとサーバとの    を  として、  や  が  するべきか、  するべきかを  します.  は、すべてのブラウザがこの  をサポートしています.IEブラウザは、IE 10を  ることはできません.CORS  このプロセスは、ブラウザが   に  され、ユーザーが  する  はありません.   にとっては、CORS  は じソースのAJAX  と じです.ブラウザでAJAXがソースを  すると、  のヘッダ  が   に  されます.また、  の  がある  もありますが、ユーザーは じません.<br>  でコードに わない:<pre><code><disable_script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://segmentfault.com/u/trigkit4/",true);
    xhr.send();
</disable_script>
</code></pre>サーバー のCORSに するサポートは、Access-Coontrol-Allow-Originを  することによって に  されます.ブラウザが  する  を  したら、Ajaxにドメインを えたアクセスを  します.<br>JSONに べて、  の  があります.<li> JSONPはGET  のみ  であり、CORSはすべてのタイプのHTTP  をサポートする.</li><li>はCORSを  して、   は  のXMLtHttpRequestを  して  を  し、データを ることができ、JSONPよりも いエラー  があります.<li> JSONPは に いブラウザによって  されています. らはしばしばCORSを  しないです.ほとんどの  ブラウザはCORSを  しています.</li>.<br>CORSはより  なプロトコルと ています.サーバー とクライアントがこのプロトコルに っている り、  が  です.<br>このプロジェクトの な   はサーバー の  にあります.ブラウザは  の  が  ではありません.<li> PHPファイルに  する:</li><pre><code><?php header("Access-Control-Allow-Origin:*");  
 ??>
</code></pre><li> サーバのプロファイルを  します.  は  の りです.http://blog.csdn.net/ownfire/article/details/46707229  </li>

node.js addons development Prrequisite knowledgement/node.jsプラグイン開発予備知識