クロスサイトリクエストフォージェリ(CSRF)などのセキュリティ攻撃を防止するために、ブラウザは「同一生成元ポリシー(Same-Origin Policy)」という仕組みを実装しています。異なるオリジンのリソースへのアクセスに制約をかけるものです。制約はまた、JSONP や CORS(Cross-Origin Resource Sharing) と呼ばれる仕組みを利用することで一部解除することができます。

オリジン(Origin)は、スキーム、ホスト、ポート番号の組み合わせです。下記は同じオリジンとみなされます。

http://site-a.example.com/
http://site-a.example.com:80/
http://site-a.example.com/example.html

下記は異なるオリジンとみなされます。

https://site-a.example.com/      ← スキームが異なる
http://site-b.example.com/       ← ホストが異なる
http://site-a.example.com:8080/  ← ポート番号が異なる

ただし、Internet Explorer では、ポート番号のみが異なる場合は同じオリジンとみなします。

異なるオリジン(例えば site-a.example.com から site-b.example.com) に対する XMLHttpRequest や Fetch API を発行しても、その結果を responseText で読み出すことができません。呼び出せないのではなく、呼び出せてもその結果を取得できないことに注意してください。

<script>
window.addEventListener('load', function() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            console.log("status = " + xhr.status);  // status = 0
            console.log(xhr.responseText);          // Can not access
        }
    }
    xhr.open("POST", "http://site-b.example.com/");
    xhr.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
    xhr.send("a=b&c=d");
});
</script>

この制約が発生すると、ブラウザのコンソールに下記の様なエラーメッセージが表示されます。

site-b 側で Access-Control-Allow-Origin ヘッダを返却することにより、この制約を解除することができます。

異なるオリジン(例えば site-a.example.com から site-b.example.com) の画像を Canvas に描画すると、Canvas は汚染された(tainted)とみなされ、canvas に対する toBlob(), toDataURL(), getImageData() などのアクセスが制限されます。

<script>
window.addEventListener('load', function() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var img = new Image();
    img.src = "http://site-b.example.com/img/test.png" + "?" + new Date().getTime();
    img.onload = function() {
        context.drawImage(img, 40, 40);
        var base64 = canvas.toDataURL("image/png");    // Error
        console.log(base64);
    }
});
</script>
<canvas id="canvas" width=100 height=100 style="border:1px solid gray;"></canvas>

この制約が発生すると、ブラウザのコンソールに下記の様なエラーメッセージが表示されます。

site-b 側で Access-Control-Allow-Origin ヘッダを返却し、イメージに crossorigin を設定することにより、この制約を解除することができます。

    var img = new Image();
    img.crossOrigin = "anonymous";
    img.src = "http://site-b.example.com/img/test.png" + "?" + new Date().getTime();

異なるオリジン(例えば site-a.example.com から site-b.example.com) のコンテンツを iframe に表示した場合、そのフレームに対する contentWindow アクセスが制限されます。

<script>
window.addEventListener('load', function() {
    var iframe = document.getElementById("iframe");
    var doc = iframe.contentWindow.document;    // Error
    console.log(doc);
});
</script>
<iframe src="http://site-b.example.com/" id="iframe"<>/iframe>

この制約が発生すると、ブラウザのコンソールに下記の様なエラーメッセージが表示されます。

この制約は解除することができないようです。

上記の他にも @font-face による外部フォントアクセス、WebGL によるアクセス、スクリプトに対する onerror による詳細エラー情報取得などに制約があるようです。制約の条件や範囲はブラウザの実装により異なります。

異なるオリジン間の制限を解除するために、Origin や Access-Control-Allow-Origin ヘッダを使用します。site-a.example.com から、site-b.example.com のリソースにアクセスする際、XMLHttpRequest や、crossorigin="anonymous" が指定された <img>, <script>, <audio>, <video>, <link> では、クライアントからサーバに対して下記の HTTP ヘッダが送信されます。

Origin: http://site-a.example.com

これに対し、サーバから下記のヘッダが返却されると、ブラウザは、他のオリジンからのアクセスを許可されたリソースであると判断し、XMLHttpRequest や Canvas などの制約を解除します。

Access-Control-Allow-Origin: *

特定のサイトにのみ制限を解除する場合は、下記の様に許可する対象のオリジンを返却します。

Access-Control-Allow-Origin: http://site-a.example.com