HTML / JS同一生成元ポリシーに関するコミュニティウィキを作成して、このトピックを検索するすべての人に役立つことを願っています。これはSOで最も検索されているトピックの1つであり、統合されたwikiがないため、ここに移動します:)
同一生成元ポリシーは、あるオリジンからロードされたドキュメントまたはスクリプトが別のオリジンからドキュメントのプロパティを取得または設定することを防ぎます。このポリシーは、NetscapeNavigator2.0にまでさかのぼります。
例を冗長に保ち、できればソースもリンクしてください。
document.domain方法_これは、document.domain の値を現在のドメインのサフィックスに設定する iframe メソッドであることに注意してください。その場合、短い方のドメインが後続のオリジン チェックに使用されます。たとえば、ドキュメント内のスクリプトがhttp://store.company.com/dir/other.html次のステートメントを実行するとします。
document.domain = "company.com";
そのステートメントが実行された後、ページは でオリジン チェックに合格しhttp://company.com/dir/page.htmlます。ただし、同じ理由で、company.com を に設定できませんでしdocument.domain たothercompany.com。
この方法を使用すると、サブドメインをソースとする iframe から、メイン ドメインをソースとするページで javascript を実行できます。document.domainFirefox などのブラウザでは完全に異質なドメインに変更できないため、この方法はクロスドメイン リソースには適していません。
ソース: https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript
Cross-Origin Resource Sharing (CORS) は W3C ワーキング ドラフトであり、オリジン間でソースにアクセスするときにブラウザーとサーバーがどのように通信する必要があるかを定義しています。CORS の背後にある基本的な考え方は、カスタム HTTP ヘッダーを使用して、ブラウザーとサーバーの両方が互いを十分に認識し、要求または応答が成功するか失敗するかを判断できるようにすることです。
カスタム ヘッダーを使用するか使用せず、本文がGETである単純なリクエストの場合、リクエストは と呼ばれる追加のヘッダーとともに送信されます。Origin ヘッダーには、要求元のページのオリジン (プロトコル、ドメイン名、およびポート) が含まれているため、サーバーは応答を提供する必要があるかどうかを簡単に判断できます。ヘッダーの例は次のようになります。POSTtext/plainOriginOrigin
Origin: http://www.stackoverflow.com
サーバーは、リクエストを許可する必要があると判断した場合、送信されたのと同じオリジン、またはそれがパブリック リソースである場合にAccess-Control-Allow-Origin、エコー バックするヘッダーを送信します。*例えば：
Access-Control-Allow-Origin: http://www.stackoverflow.com
このヘッダーがない場合、またはオリジンが一致しない場合、ブラウザはリクエストを許可しません。すべてが正常であれば、ブラウザはリクエストを処理します。リクエストにもレスポンスにも Cookie 情報は含まれないことに注意してください。
Mozilla チームは、CORS に関する投稿で、プロパティの存在を確認してwithCredentials 、ブラウザが XHR 経由で CORS をサポートしているかどうかを判断するよう提案しています。次に、オブジェクトの存在と組み合わせて、XDomainRequestすべてのブラウザーをカバーできます。
function createCORSRequest(method, url){
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr){
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined"){
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
xhr = null;
}
return xhr;
}
var request = createCORSRequest("get", "http://www.stackoverflow.com/");
if (request){
request.onload = function() {
// ...
};
request.onreadystatechange = handler;
request.send();
}
CORS メソッドが機能するには、任意のタイプのサーバー ヘッダー メカニズムにアクセスする必要があり、サードパーティのリソースに単純にアクセスすることはできないことに注意してください。
ソース: http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/
window.postMessage方法_window.postMessageが呼び出されると、MessageEvent実行する必要がある保留中のスクリプトが完了すると、ターゲット ウィンドウで がディスパッチされます (たとえばwindow.postMessage、イベント ハンドラから が呼び出された場合の残りのイベント ハンドラ、以前に設定された保留中のタイムアウトなど)。にMessageEventは、タイプ メッセージ、 にdata提供される最初の引数の文字列値に設定されるプロパティ、呼び出された時点でウィンドウ呼び出しのメイン ドキュメントの起点に対応するプロパティwindow.postMessage、およびウィンドウからのプロパティがあります。と呼ばれます。originwindow.postMessagewindow.postMessagesourcewindow.postMessage
を使用するwindow.postMessageには、イベント リスナーをアタッチする必要があります。
// Internet Explorer
window.attachEvent('onmessage',receiveMessage);
// Opera/Mozilla/Webkit
window.addEventListener("message", receiveMessage, false);
そして、receiveMessage関数を宣言する必要があります:
function receiveMessage(event)
{
// do something with event.data;
}
オフサイト iframe は、以下を介してイベントを適切に送信する必要もありますpostMessage。
<script>window.parent.postMessage('foo','*')</script>
どのウィンドウでも、ウィンドウ内のドキュメントの場所に関係なく、他のウィンドウのこのメソッドにいつでもアクセスして、メッセージを送信できます。したがって、メッセージの受信に使用されるすべてのイベント リスナーは、origin プロパティと場合によっては source プロパティを使用して、メッセージの送信者の ID を最初に確認する必要があります。これは控えめに言っても過言ではありません。プロパティをチェックしないと、クロスサイト スクリプティング攻撃が可能になりますorigin。source
ソース: https://developer.mozilla.org/en/DOM/window.postMessage
サーバーに単純なリバース プロキシを設定すると、ブラウザは Ajax リクエストに相対パスを使用できるようになりますが、サーバーは任意のリモート ロケーションへのプロキシとして機能します。
Apache でmod_proxyを使用する場合、リバース プロキシを設定するための基本的な設定ディレクティブはProxyPass. 通常、次のように使用されます。
ProxyPass /ajax/ http://other-domain.com/ajax/
この場合、ブラウザは相対 URL としてリクエストでき/ajax/web_service.xmlますが、サーバーは へのプロキシとして機能することでこれを提供しますhttp://other-domain.com/ajax/web_service.xml。
この方法の興味深い機能の 1 つは、リバース プロキシが複数のバックエンドにリクエストを簡単に分散できるため、ロード バランサーとして機能することです。
私はJSONPを使用しています。
基本的に、あなたは追加します
<script src="http://..../someData.js?callback=some_func"/>
あなたのページに。
some_func() を呼び出して、データが入っていることを通知する必要があります。
AnyOriginは一部のhttpsサイトではうまく機能しなかったので、httpsでうまく機能するように見えるwhateverorigin.orgというオープンソースの代替手段を作成しました。
この画像のクレジットを主張することはできませんが、このテーマについて私が知っているすべてのものと一致し、同時に少しユーモアを提供します。
私が見つけた同一生成元ポリシーを克服する最新の方法は、http://anyorigin.com/です。
このサイトは、任意の URL を指定するだけで javascript/jquery コードを生成するように作成されており、そのソースに関係なく、html/data を取得できます。つまり、任意の URL または Web ページを JSONP リクエストにします。
私はそれがかなり便利だと思いました:)
anyorigin の JavaScript コードの例を次に示します。
$.getJSON('http://anyorigin.com/get?url=google.com&callback=?', function(data){
$('#output').html(data.contents);
});
JSONPが頭に浮かびます。
JSONP または「パディング付き JSON」は、ベース JSON データ形式を補完するものであり、ページがプライマリ サーバー以外のサーバーから JSON を要求し、より有意義に使用できるようにする使用パターンです。JSONP は、Cross-Origin Resource Sharing と呼ばれる最近の方法に代わるものです。
さて、私はこれを回避するために PHP で curl を使用しました。ポート 82 で Web サービスを実行しています。
<?php
$curl = curl_init();
$timeout = 30;
$ret = "";
$url="http://localhost:82/put_val?val=".$_GET["val"];
curl_setopt ($curl, CURLOPT_URL, $url);
curl_setopt ($curl, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt ($curl, CURLOPT_MAXREDIRS, 20);
curl_setopt ($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($curl, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5");
curl_setopt ($curl, CURLOPT_CONNECTTIMEOUT, $timeout);
$text = curl_exec($curl);
echo $text;
?>
PHP ファイルを呼び出す JavaScript は次のとおりです。
function getdata(obj1, obj2) {
var xmlhttp;
if (window.XMLHttpRequest)
xmlhttp=new XMLHttpRequest();
else
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","phpURLFile.php?eqp="+obj1+"&val="+obj2,true);
xmlhttp.send();
}
私の HTML は、ポート 80 の WAMP で実行されます。つまり、同じオリジン ポリシーが回避されました :-)
以下に、same-origin-policy のいくつかの回避策と説明を示します。
Thiru のブログ - Browser same origin policy workaround
これは、そこで利用できるもののほとんどを分析します: http://www.slideshare.net/SlexAxton/breaking-the-cross-domain-barrier
postMessage ソリューションについては、以下をご覧ください。
https://github.com/chrissrogers/jquery-postmessage/blob/master/jquery.ba-postmessage.js
とわずかに異なるバージョン:
https://github.com/thomassturm/ender-postmessage/blob/master/ender-postmessage.js
個人的にwindow.postMessageは、最新のブラウザーで見つけた最も信頼できる方法です。XSS 攻撃にさらされないようにするために、もう少し作業を行う必要がありますが、それは妥当なトレードオフです。
window.postMessage上記の他の方法を使用して、古いブラウザーに同様の機能を提供する、ラップする一般的な Javascript ツールキット用のプラグインもいくつかあります。