crossorigin 属性

crossorigin 属性は CORS （Cross-Origin Resource Sharing / クロスドメイン通信） 設定属性です。別オリジンから読み込んだ画像などのリソースを文書内で利用する際のルールを指定します。

オリジンとは、スキーム名とポート番号（指定されている場合のみ）、およびホスト名からなる組み合わせを指します。

例えば、下記の2つのURLは同一オリジン上のリソースとなります。

• http://example.com/sample.html
• http://example.com/css/sample.css

しかし、下記の2つのURLは、ホスト名は同一ですが、スキーム名が異なるため別オリジンとなります。

• http://example.com/sample.html
• https://example.com/css/sample.css

crossorigin 属性には下記の値が指定できます。crossorigin 属性の値が空、もしくは不正な場合は anonymous が指定されたものとして扱われます。

属性値	状態
anonymous	Cookie やクライアントサイドの SSL 証明書、HTTP 認証などのユーザ認証情報は不要
use-credentials	ユーザ認証情報を求めます

<img src="http://example.com/sample.jpg" alt="" crossorigin="anonymous" />
 
<!-- 値が空の場合は anonymous として扱われます -->
<img src="http://example.com/sample.jpg" alt="" crossorigin />

<!-- crossOrigin プロパティによる値のセット -->
<script>
 var img = new Image,
  canvas = document.createElement("canvas"),
  ctx = canvas.getContext("2d"),
  src = "http://example.com/sample.jpg";
 
 img.crossOrigin = "anonymous";
 
 …略…
</script>