それらのもののクロスドメイン

ドメイン間での2つの戦略が得られ

同一生成元ポリシーのブラウザは、同一生成元ポリシーは、次の2つに分割されているクロスドメイン、につながります

DOM生成元ポリシー：異なるソース・ページのDOMを操作禁止します。ここでの主なシナリオは、クロスドメインのiframeの場合は、IFRAME異なるドメイン名がお互いへのアクセスを制限することです。
XMLHttpRequest元ポリシー：XHRオブジェクトはサーバアドレスの異なるソースにHTTPリクエストを送信し、使用しないでください。

限りプロトコル、ドメイン名、任意の別のポートとして、クロスドメイン要求との間で動作している異なるドメインであると見なされます。

なぜ我々は、クロスドメインの制限が必要なのか

クロスドメインを完全に理解した後、確かに私たちは、このような考えを持っているだろう、なぜクロスドメインの制限があり、ブラウザが何らかの理由でそれをやっています。実際には、セキュリティ上の理由から、主に、クロスドメインの制限を理解し、慎重に考えています。

AJAX生成元ポリシーは、CSRF攻撃を防ぐように設計されています。何AJAX生成元ポリシーがない場合、非常に危険な、我々はすべてのHTTP要求を開始したクッキーに対応する要求アドレスをもたらすでしょう、あなたは次のような攻撃を行うことができます。

ユーザーがあなたの銀行のページにログインします。http：//mybank.com,http：//mybank.comは、ユーザーのCookieにユーザーIDを追加します。
悪意のあるページを閲覧中のユーザーhttp://evil.comを。悪質なAJAXページ要求コードの実行。
http://evil.comがhttp://mybank.comにAJAXを開始する HTTPリクエスト、リクエストがデフォルトになりますまた、過去に対応クッキーを送信http://mybank.com。
銀行ページはクッキー送信ユーザ識別から抽出され、ユーザ認証が正しい、応答要求されたデータが返されます。この時点で、データが漏洩しています。
そしてAjaxのためにバックグラウンドで、ユーザーは、このプロセスを知覚することはできません。

DOM生成元ポリシー、あまりにも、あなたはクロスドメインはiframe間でアクセスすることができますので、あなたが攻撃することができた場合：

偽のWebサイトを作成し、銀行のウェブサイト内にネストされたiframeのhttp://mybank.com。
ユーザーがドメイン名に加えて来るように、幅と高さが徐々に、すべてのiframeのページに調整取得し、銀行のウェブサイトの他の部分には違いはありません。
ユーザーがアカウントのパスワードを入力した場合、私たちの主なサイトはへのクロスドメインアクセスすることができDOMノードhttp://mybank.com、ユーザーからの入力を取得して、攻撃を完了することができます。

あなたは、クロスドメインの制限を持っていたら、私たちは、より安全で確実なオンラインできるように。

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

クロスオリジンリソースの共有

CORSは、W3C標準である「クロスオリジンリソースの共有」（クロスオリジンリソース共有）の略です。このアプローチでは、記事のルアンYifeng教師の要約が特に良いですが、私は洞察力を見ることができると思いhttp://www.ruanyifeng.com/blog/2016/04/cors.htmlを。

ここで私は、簡単に一般的なプロセスについてお話します。

クライアントの場合、我々は、Ajaxリクエストや通常の使用XHRオブジェクトを送信します。
唯一の注意点は、我々のXHRプロパティを設定する必要があることですwithCredentialsを真である、そうでない場合は、クッキーを設定して、ああ、過去にはありません：=のxhr.withCredentialsをtrueに。
サーバー側では、あなたは、レスポンスヘッダに以下の二つのフィールドを設定する必要があります。
アクセス制御-許可-起源：http://www.yourhost.com
とAccess-Control-Allow-Credentialsを：trueに

このように、我々は、クロスドメインリクエストにインタフェースすることができます。

JSONPクロスドメイン

基本的な原理は、動的スクリプトタグを作成し、src属性クロスドメインを使用することです。

そうではなく、あいまいな、我々は例を見て：

      
      
       
       //関数funを定義します
      
      
      
      
       
       楽しい機能（フロント）{
      
      
      
      
       
           console.log（データ）。
      
      
      
      
       
       }。
      
      
      
      
       
       //スクリプトを作成し、バックエンドのコールバック関数という名前の楽しさを語りました
      
      
      
      
       
       VAR本体= document.getElementsByTagName（ 'ボディ'）[0];
      
      
      
      
       
       VARスクリプト= document.gerElement（ 'スクリプト'）;
      
      
      
      
       
       script.type = 'テキスト/ javasctipt';
      
      
      
      
       
       script.src = 'demo.jsコールバック=楽しいです？';
      
      
      
      
       
       body.appendChild（スクリプト）;

jsのスクリプトが直接実行を返します。楽しいの事前定義された機能の実装、および部屋へのデータのようにします。

1	楽しい（{ "名"： "名"}）

もちろん、これが唯一の原則デモ、練習では、我々は動的に楽しい関数を作成する必要がある、とするとき、返されたデータを破壊します。

実際の使用では、我々はAJAXライブラリの様々なを使用しているので〜、基本的にはパッケージをJSONP含まれていますが、我々はまだ何の原則を知っている必要があります、またはJSONP POSTリクエストを送信しない理由がわかりません

プロキシサーバー

ブラウザのクロスドメインの制限はなく、問題はないクロスドメインのサーバー、それが戻って、クライアントへのリソースのドメインであることを、サーバから要求することができます。

プロキシサーバーは万能薬です。

サブドメインに遭遇document.domainを

对于主域名相同，而子域名不同的情况，可以使用 document.domain 来跨域，这种方式非常适用于iframe跨域的情况，直接看例子吧比如a页面地址为 http://a.yourhost.com b页面为 http://b.yourhost.com。这样就可以通过分别给两个页面设置 document.domain = http://yourhost.com 来实现跨域。之后，就可以通过 contentWindow 等方式去拿到iframe的window对象了。

使用window.name进行跨域

window.name跨域同样是受到同源策略限制，父框架和子框架的src必须指向同一域名。window.name的优势在于，name的值在不同的页面(或者不同的域名)，加载后仍然存在，除非你显示的更改。并且支持的长度达到2M.

      
      
       
       //a页面的代码
      
      
      
      
       
       <script type="text/javascript">
      
      
      
      
       
          iframe = document.createElement('iframe');
      
      
      
      
       
          iframe.style.display = 'none';
      
      
      
      
       
          var state = 0;
      
      
      
      
      
      
       
          iframe.onload = function() {
      
      
      
      
       
            if(state === 1) {
      
      
      
      
       
                var data = iframe.contentWindow.name;
      
      
      
      
       
                console.log(data);
      
      
      
      
       
                iframe.contentWindow.document.write('');
      
      
      
      
       
                iframe.contentWindow.close();
      
      
      
      
       
                document.body.removeChild(iframe);
      
      
      
      
       
            } else if(state === 0) {
      
      
      
      
       
                state = 1;
      
      
      
      
       
                iframe.contentWindow.location =
      
      
      
      
       
                'http://m.zhuanzhuan.58.com:8887/b.html';
      
      
      
      
       
            }
      
      
      
      
       
          };
      
      
      
      
       
          document.body.appendChild(iframe);
      
      
      
      
       
       </script>
      
      
      
      
      
      
      
      
       
       //b页面代码
      
      
      
      
       
       <script type="text/javascript">
      
      
      
      
       
          window.name = "hello";
      
      
      
      
       
       </script>

location.hash跨域

location.hash方式跨域，是子框架具有修改父框架src的hash值，通过这个属性进行传递数据，且更改hash值，页面不会刷新。但是传递的数据的字节数是有限的。

      
      
       
       //a页面的代码
      
      
      
      
       
       <script type="text/javascript">
      
      
      
      
       
          iframe = document.createElement('iframe');
      
      
      
      
       
          iframe.style.display = 'none';
      
      
      
      
       
          var state = 0;
      
      
      
      
      
      
       
          iframe.onload = function() {
      
      
      
      
       
            if(state === 1) {
      
      
      
      
       
                var data = window.location.hash;
      
      
      
      
       
                console.log(data);
      
      
      
      
       
                iframe.contentWindow.document.write('');
      
      
      
      
       
                iframe.contentWindow.close();
      
      
      
      
       
                document.body.removeChild(iframe);
      
      
      
      
       
            } else if(state === 0) {
      
      
      
      
       
                state = 1;
      
      
      
      
       
                iframe.contentWindow.location =
      
      
      
      
       
                'http://m.zhuanzhuan.58.com:8887/b.html';
      
      
      
      
       
            }
      
      
      
      
       
          };
      
      
      
      
       
          document.body.appendChild(iframe);
      
      
      
      
       
       </script>
      
      
      
      
      
      
      
      
       
       //b页面代码
      
      
      
      
       
       <script type="text/javascript">
      
      
      
      
       
          parent.location.hash = "world";
      
      
      
      
       
       </script>

使用postMessage实现页面之间通信

信息传递除了客户端与服务器之前的传递，还存在以下几个问题：

页面和新开的窗口的数据交互。
多窗口之间的数据交互。
页面与所嵌套的iframe之间的信息传递。

window.postMessage是一个HTML5的api，允许两个窗口之间进行跨域发送消息。这个应该就是以后解决dom跨域通用方法了，具体可以参照MDN。

注：只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。

実際の条件、window.nameとクロスドメインのiframeに適したlocation.hashの下では、あまりIFRAMEを使用するので、これらの方法では、日付のうちビットです。一般的な方法は、一般にCORS、JSONPを使用し、それにされています。しかし、いくつかの異常な状況に遭遇し、我々はまだあなたが選ぶことができる多くの方法があります知っている必要があります

クロスドメインシンプルで小さなデモ、ああ〜本物の知識を実践Mengchuoを

From：https://zhuanlan.zhihu.com/p/28562290

オリジナル：大列のドメイン間の事