crossorigin=state - CORS指定

• トップ
• HTMLリファレンス
• crossorigin=state

属性

サポート

説明

crossorign属性は、img, script, audio, video, link 要素で指定できます。同一生成元ポリシー(Same-Origin Policy) に対する CORS(Cross-Origin Resource Sharing) に関する属性で、異なったオリジン(プロトコル, サーバ名, ポート番号の組み合わせ)間で画像などを共有するために使用します。

anonymous

認証情報を使用しない (Originヘッダが送信される)

use-credintials

認証情報を使用する (Originヘッダは送信されない)

使用例

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<script>
window.addEventListener('load', () => {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var img = new Image();
    img.crossOrigin = "anonymous";
    img.src = "http://other-site.exapmple.com/sample.png" + "?" + new Date().getTime();
    img.onload = function() {
        context.drawImage(img, 40, 40);
        var base64 = canvas.toDataURL("image/png");  // crossorigin無しだとエラー
            :             
    }
});
</script>
<canvas id="canvas" width=400 height=400 style="border:1px solid gray;"></canvas>

※ 画像に getTime() をつけているのは、Internet Explorer のキャッシュに対する対策です。

リンク

• https://html.spec.whatwg.org/multipage/urls-and-fetching.html#cors-settings-attributes
• https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/crossorigin https://caniuse.com/?search=crossorigin