HTML5のcrossorigin属性とは？CORS設定属性の仕組みと使い方を解説

crossorigin属性とは

はい、公式仕様（HTML Living Standard）では、crossorigin属性について次のように定義されています。

crossorigin属性は「CORS設定属性」である。その目的は、クロスオリジンアクセスを許可しているサードパーティサイトから読み込んだ画像を、canvas要素で利用できるようにすることにある。

つまり、crossorigin属性とは、別ドメイン（クロスオリジン）から取得したリソースを、CORS（オリジン間リソース共有）のルールに基づいて安全に扱うための属性です。

CORSエラーとJavaScriptのエラーログの問題

crossorigin属性が特に役立つ場面の一つが、JavaScriptのエラーログ収集です。外部ドメインから読み込んだスクリプト内でエラーが発生した場合、CORSポリシーによって詳細な情報が隠され、「Script error.」のような汎用的なメッセージしか得られないことがあります。

これは、ブラウザ側のセキュリティ機構により、オリジンが異なるリソースの情報へのアクセスが制限されているためです。内部的には次のような判定処理が行われています。

if (securityOrigin()->canRequest(targetUrl)) {
    // 同一オリジンの場合：詳細なエラー情報を取得できる
    msg = myError;
    line = myLineNumber;
    source = sourceURL;
} else {
    // クロスオリジンの場合：情報は意図的にマスクされる
    msg = "Error!";
    source = String();
    line = 0;
}

このコードが示すように、対象のURLが現在のセキュリティオリジンから要求可能かどうかを判定し、許可されていない場合にはエラーメッセージ・行番号・ソースURLがすべてマスクされてしまいます。

crossorigin属性による解決方法

この問題を回避するには、スクリプトや画像を読み込む側にcrossorigin属性を指定し、配信側のサーバーで適切なAccess-Control-Allow-Originヘッダーを返す必要があります。

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

• anonymous：クレデンシャル（Cookieなど）を送信せずにCORSリクエストを行う
• use-credentials：Cookieなどの認証情報付きでCORSリクエストを行う

この設定により、ブラウザは外部スクリプトをCORS対応リソースとして扱い、本来マスクされるはずだった詳細なエラー情報をwindow.onerrorなどで受け取れるようになります。CDN経由でJavaScriptファイルを配信しているサイトでは、エラー監視ツールを活用するためにこの属性の設定が事実上必須といえるでしょう。