crossorigin=state - CORS指定

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

属性

<タグ名 crossorigin=state> - CORS指定

説明

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

anonymous
認証情報を使用しない (Originヘッダが送信される)
use-credintials
認証情報を使用する (Originヘッダは送信されない)

使用例

HTML
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
HTML
<script>
window.addEventListener('load', function() {
    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 のキャッシュに対する対策です。


Copyright (C) 2015-2018 杜甫々
初版:2015年1月4日 最終更新:2018年12月30日
http://www.tohoho-web.com/html/attr/crossorigin.htm