crossorigin属性

crossorigin属性とは

JavaScriptや画像などは、他のドメインから読み込むことができます。この読み込むドメインが違うことを、クロスオリジンと呼びます。また、クロスオリジンで利用することをCORS(Cross-Origin Resource Sharing)と言います。

CORSはリスクが発生することがあり、一部利用に制限があります。crossorigin属性を使うと、この制限がなく使えるようになります。crossorigin属性は、audio、img、link、script、video要素で使えます。

crossorigin属性は、以下の値が使えます。

値が空(crossorigin=""と指定)の場合や、crossoriginだけ指定した場合もanonymousとして扱われます。

crossorigin属性は、リスクがある処理の時(例えばimgの画像をcanvasで使う)に必要です。通常のスクリプトやimg要素で画像を表示するだけであれば、crossoriginを指定しなくても使えます。

利用例

以下は、crossorigin属性を使ったscript要素の例です。

<script src="https://example.com/script.js" crossorigin></script>

上記は、デフォルトのanonymousが指定されたのと同じになります。認証情報を送信しません。

以下は、use-credentialsを指定する時の例です。

<script src="https://example.com/script.js" crossorigin="use-credentials"></script>

上記により、認証情報を送信します。

オリジンと資格情報の補足

オリジンは、正確にはプロトコル(スキーム) + ドメイン + ポート番号で判断されます。

プロトコルとは、HTTPS(Hypertext Transfer Protocol Secure)などの通信手順です。ブラウザのアドレス欄でhttps://example.comと入力する時のhttpsが該当します。

ポート番号は、サービスを示します。HTTPSであれば443など、一般的な決まりに従う場合は指定が不要です。サーバ側で設定すれば、3000など違う番号も使えます。その時は、ブラウザでhttps://example.com:3000など、最後にポート番号を付けて入力する必要があります。

このオリジンが異なる間でデータなどを共有することが、CORSになります。CORSでは、セキュリティの観点などから一部制限がありますが、crossoriginを指定することで制限なく利用できるようになります。

データを提供するオリジン側が認証を必要とする場合、crossoriginをuse-credentialsにします。use-credentialsにすると、通信中に認証情報も送信します。

いずれの場合も、データを提供するオリジン側で、データを共有することを許可する設定になっている必要があります。