https://www.cnblogs.com/-qing-/p/10966047.htmlから学びます

そしてまた、クロスドメイン由来の政策問題について話をします

1同一生成元ポリシー

スクリプトのソースまたはテキストが行われ、さまざまな方法には限界ブラウザへのアクセスを参照する、いわゆる同一生成元ポリシー、。そのようなセットのJSソース読み取りまたは元素の源を導入すると、B属性することができません。

だから、最初の起源が何であるかを定義する、いわゆる相同は、2つのページを指し同じプロトコル、ホスト（もよく言わドメイン名）、ポートを持って、3つの要素が不可欠です。

あなたはより明確にどのような相同性の概念を理解するためにいくつかの例の下に見ることができます。

URL1 URL2トラフィックを許可するかどうかを
HTTP：// www.foo.com/js/a.js     http://www.foo.com/js/b.js     プロトコル、ドメイン名を、同じポートを可能にする 
HTTPを：// WWW。 foo.com/js/a.js     http://www.foo.com ：8888 / JS / b.js合意、同じドメイン名、ポートが異なることはできません 
HTTPS：// www.foo.com/js/a.jsを     http://www.foo.com/js/b.js     ホスト、同じドメイン名、契約が異なることはできません 
HTTPを：// www.foo.com/js/a.js     http://www.bar.com/js /b.js     プロトコル、同じポート、別のドメイン名が許可されていません 
HTTP：// www.foo.com/js/a.js     http://foo.com/js/b.js     プロトコル、同じインターフェース、同じプライマリドメイン名、異なるサブドメインを許可していません。

元ポリシーが異なるソース間の相互作用を制限しますが、一部の人々が疑問を持っていることが、私たちは多くの場合、前に何かを書いている時点で、他のドメイン名、スタイルファイル、画像ファイルへのjsファイルを参照し、あなたは、ああ制約を見ていませんこの定義は間違っていないです。実際、主にXMLHttpRequestや他の要求JS目的とした同一生成元ポリシーの制限の異なるソース間の相互作用では、次のような状況は、同一生成元ポリシーの制限の対象にはなりません。

ページへのリンク、およびフォームの提出は、同一生成元ポリシーの制限の対象ではありませんリダイレクトします。言うべきリンク言うまでもなく、サイト上のナビゲーションリンクは他のサイトへのリンクです。あなたは、ドメイン名www.foo.comの横にフォームを送信するには、www.bar.com完全に可能です。
クロスオリジンリソースの埋め込みが許可されている、もちろん、ブラウザのJavascriptが読みと負荷を書くことができないものを制限します。前述のように、以前に埋め込まれました<script src="..."></script>，<img>，<link>，<iframe>等。あなたが当社のウェブサイト（またはページのjsなど）上のiframe埋め込みリソースを防ぎたい場合はもちろん、私たちは、Webサーバーを追加することができますX-Frame-Options DENY制限するヘッド。それは設定することができますnginxのadd_header X-Frame-Options DENY;。

非常に多くの例があるので全く同一生成元ポリシーの制限はありません、それはクロスドメインの問題から来る通常のですか？次のセクションでクロスドメインの問題に移動します。

2クロスドメインの問題

コースの次のクロスドメインの問題へのこのセクションで、我々はWEBサーバーまたはサーバー側のスクリプトで設定前提条件ACCESS-CONTROL-ALLOW-ORIGINあなたは頭のドメイン名を設定し、いくつかのクロスドメインアクセスを許可した場合、ヘッドは、ブラウザがスキップされます限界同一生成元ポリシーは、対応するコンテンツを返します。あなたがブラウザを介してリソースを取得しようとしていない場合に加えて、たとえば、あなたがない範囲で、Pythonスクリプトによるインターフェースを呼び出すか、JSファイルを取得するために行きます。

2.1 Ajaxのクロスドメイン

インタフェースを介して、Ajax呼び出しは、他のドメインのクロスドメインの問題を抱えています。たとえば、以下の例では、私はhttp://www.foo.com/index.htmlAjaxの呼び出しを介して要求http://www.bar.com/js/test.js、エラーの今意志。

：XMLHttpRequestのは、httpロードすることはできません// www.bar.com/js/test.jsを。
ノー「アクセス制御-許可-起源」ヘッダーがある要求されたリソース上に存在。
起源は「http://www.foo.com 」 されたため、アクセスが許可されていません。

WEBサーバは当社設定されていないので、これはACCESS-CONTROL-ALLOW-ORIGIN頭を、デフォルトでは、クロスドメインの参照リソースを禁止することです。もちろん、それはここで注意しなければならない、実際には、クロスドメインリクエストが正常に送信され、サーバーは、test.jsコンテンツを返しますが、それのデータ応答を取得するためにJavascriptのブラウザを禁止しています。ACCESS-CONTROL-ALLOW-ORIGINヘッダを設定するために、nginxのは、次のコードを使用することができ

add_header 「アクセス制御-許可-起源」 「http://www.foo.com 」; 
add_header ' とAccess-Control-Allow-Credentials '  ' 真' ; 
add_header ' アクセス制御-方法を許可'  'POSTをGET ' ;

加えて、我々は別のドメイン名ので、文句を言うも、iframe要素を取得するにはJavascriptを介して直接参照してください。下記の

加えて、我々は別のドメイン名ので、文句を言うも、iframe要素を取得するにはJavascriptを介して直接参照してください。下記の

これは、我々が同じプライマリドメイン名を共有しているため、それは中のindex.htmlとtest.htmlというに設定することができているdocument.domain='foo.com'のiframe内のアクセス要素へ。2つのファイルが同じであっても、プライマリドメイン名ならば、ドメイン以下に設定する必要があることに注意してください。それは2つの完全に異なるドメインである場合はもちろん、これは特殊なケースで、あなたが置くことができない方法はありませんセットが。www.foo.comdomainwww.163.com

加えて、見ることができたindex.htmlに<script>,<iframe>他のラベルクロスドメインリソースを埋め込まれています。

＃index.htmlを
 <！DOCTYPE HTML> 
<HTML> 
<HEAD> 
<TITLE>テストクロスドメイン</ TITLE> 
<スクリプトSRC = " /js/jquery.js " > </ SCRIPT> 
<スクリプトSRC = " のhttp：/ /www.bar.com/js/test.js " > </ SCRIPT> 
<SCRIPT> 
$（関数（）{ 
    document.domainを = ' foo.com ' ; // 1注释掉则会报错
    VAR IFR =ドキュメント。 getElementByIdを（" testframe " ）; 
    ifr.onload = 関数（）{
         VARの DOC = IFR。contentDocument ||ifr.contentWindow.document; 
        アラート（doc.getElementsByTagName（" H1 "）[ 0 ] .childNodes [ 0 ] .nodeValue）。
    } 
}）。

$アヤックス（" http://www.bar.com/js/test.js "）; // 2报错 
</スクリプト> 

</ HEAD> 
<BODY> 
<H1>テストクロスドメイン</ H1> 
<IFRAME ID = " testframe " SRC = " http://foo.com/test.html " > </ IFRAME> 
</ BODY> 
</ HTML>

もちろん、あなたもすることができiframe，location.hash，window.name，HTML5的postMessage、より参照、クロスドメインのリソースへのアクセス方法であるとしてもRain Man、この記事の JavaScriptがまとめてクロスドメインソリューションを。

0.2 JSONPクロスドメインアクセス

JSONPは、コンテンツの開発に共通している、そこには、AJAXリクエストパラメータでjQueryの中にカプセル化されたJSONPの複数を取ることができます。JSONPは、リソースへのクロスドメインアクセスを可能にしますが、その実装の原理は、動的に挿通されたAJAX、とはあまりないが<script>、我々はすでに、上記の内容を知っているので、組み込みブラウザは、クロスドメイン・リソースで、リソースのラベルへのクロスドメインアクセスを実現するためにそれは許さ。

JSONPの原理を説明するためにここでは簡単な例。
二つの文書は、最初のものはあるhttp://www.foo.com/jsonp.htmlロードする動的に作成したスクリプトタグによって、http://www.bar.com/js/outer.jsファイルをした後、outer.jsファイルの内容を返すので、データ転送とコールバックプロシージャを達成するために、関数呼び出しであることを起こります。もちろん、実際のJSONPインタフェースは、あなたが過去に関数名を渡し、その後、あなたは、関数名を渡すコールバック関数名にデータが返されます、コールバック関数のパラメータは、JSON形式のパッケージです。基本的な原理を達成JSONPでjQueryのはこれです、より詳細なJSONPの原理は、この傑作を見ることができます簡単に言えJSONPで。

＃jsonp.html
 <スクリプトタイプ= " テキスト/ javascriptの" > 
    関数コールバック（データ）{ 
        アラート（data.message）。
    } 
    関数addScriptTag（SRC）{ 
    VARのスクリプト=のdocument.createElement（' スクリプト' ）。
        script.src = SRC; 
        document.body.appendChild（スクリプト）; 
    } 

    window.onload = 関数（）{ 
        addScriptTag（" http://www.foo.com/js/outer.js " ）。
    }
 </ SCRIPT> 

＃outer.js 
コールバック（{メッセージ：「成功" }）。

XSSの同種およびクロスドメインの問題

https://www.cnblogs.com/-qing-/p/10966047.htmlから学びます

そしてまた、クロスドメイン由来の政策問題について話をします

2クロスドメインの問題

2.1 Ajaxのクロスドメイン

0.2 JSONPクロスドメインアクセス

おすすめ