[解決済み] 同一生成元ポリシーを回避する方法

質問

同一原産地ポリシー

HTML/JSに関するコミュニティWikiを作りたかった。 同一生成元ポリシー このトピックを検索している人の助けになればと思います。これはSOで最も検索されるトピックの1つであり、そのための統合されたWikiがないので、ここに行きます :)

同一生成元ポリシーにより あるドキュメントやスクリプトから読み込まれた を取得または設定することができます。 のプロパティは、別の オリジンです。このポリシーは Netscape Navigator 2.0までさかのぼります。

同一生成元ポリシーを回避するためのお気に入りの方法は何ですか？

例文は冗長で、できればソースもリンクしてください。

解決方法は？

その document.domain メソッド

• メソッドの種類です。 iframe .

これは、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.domain を完全に異なるドメインに変更します。

出典 https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript

クロスオリジンリソース共有方式について

• メソッドの種類です。 AJAX .

クロスオリジンリソース共有 (CORS）は、W3C の Working Draft で、オリジンをまたいでソースにアクセスする際に、ブラウザとサーバーがどのように通信しなければならないかを定義しています。CORS の基本的な考え方は、カスタム HTTP ヘッダーを使用して、ブラウザとサーバーの両方が互いの情報を十分に把握し、リクエストまたはレスポンスが成功または失敗するかどうかを判断できるようにすることです。

単純なリクエストの場合 GET または POST で、カスタムヘッダーがなく、ボディが text/plain という追加ヘッダを付けて送信されます。 Origin . Originヘッダーは、サーバーが応答を提供すべきかどうかを簡単に判断できるように、要求しているページのオリジン（プロトコル、ドメイン名、ポート）を含んでいます。例として Origin ヘッダーは次のようになります。

Origin: http://www.stackoverflow.com

サーバーがリクエストを許可すべきと判断した場合、そのリクエストに対して Access-Control-Allow-Origin ヘッダが送信されたのと同じオリジンをエコーバックするか、あるいは * 公開リソースであれば 例えば

Access-Control-Allow-Origin: http://www.stackoverflow.com

このヘッダーがない場合、または起源が一致しない場合、ブラウザはリクエストを拒否します。すべてがうまくいけば、ブラウザはリクエストを処理します。リクエストもレスポンスもクッキー情報を含まないことに注意してください。

で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 メソッド

• メソッドの種類です。 iframe .

window.postMessage を呼び出すと MessageEvent が実行されると、ターゲットウィンドウでディスパッチされます (例えば、もし window.postMessage がイベントハンドラから呼び出された場合、以前に設定された保留のタイムアウトなど)。このとき MessageEvent はメッセージという型を持ち data に与えられた最初の引数の文字列値が設定されるプロパティです。 window.postMessage を使用することができます。 origin を呼び出すウィンドウ内のメインドキュメントの原点に相当するプロパティです。 window.postMessage の時に window.postMessage が呼び出され source プロパティは window.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 プロパティを使用して、メッセージの送信者の身元を確認する必要があります。このことは、強調してもし過ぎることはありません。 のチェックに失敗すると origin と、おそらく source プロパティは、クロスサイトスクリプティング攻撃を可能にします。

出典 https://developer.mozilla.org/en/DOM/window.postMessage