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 ユーザ認証情報を求めます

サンプルソースを見る

crossorigin 属性の仕様

この属性を使用できる要素

crossorigin 属性のサンプルソース

<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>

W3C HTML5 仕様書

2.7.6 CORS settings attributes