CDN上にホストされたエラーをwindow.onerrorで取得しようとした時に全てのエラーが Script Errorになってしまうことが良くあります。
この問題は Cross-origin Resource Sharringによるもので、対策自体は以下の記事のようにネットにたくさんあるのですがイマイチ何をするのか釈然としなかったので調査しました。
まず、解決法
いろんなところに書いてありますが一応自分も解決法を書いておきます。以下の2つをする必要があります。
- CDNにAccess-Control-Allow-Originの設定をする
- CDNに置いてあるアセットを読み込むscriptタグにcrossorigin属性を追加
crossorigin属性の追加は以下のような感じです
<script type="text/javascript" src="https://cdn-host.com/application.js" crossorigin></script>
これだけでちゃんとエラーの詳細を得られるようになります
crossorigin属性
crossorigin属性とは、mozillaのscriptタグのドキュメントによるとwindow.onerrorでエラー詳細を取得するためのものと書いています。つまりwindow.onerror専用のタグです。(まだ標準化前らしいです)
デフォルトの値は anonymousで、他に use-credentialsも設定できます。
anonymousとuse-credentialsの違い
anonymousとuse-credentialsの説明をこちらから引用すると
anonymous: この要素からの CORS リクエストに認証情報フラグをセットしない。
use-credentials: この要素からの CORS リクエストに認証情報フラグをセットする。リクエストには認証情報が提供される。
とのことです。よくわかりません。ですので実際に crossorigin属性に2つの値をセットして試してみたところ、use-credentialsを指定した時はリクエストヘッダーにセッション情報のCookieが付き、anonymousの場合は付かないという違いがありました。
anonymousで安全なのか？
そもそも crossorigin属性の前提がAccess-Control-Allow-Originの設定がされていることなのでこのヘッダーが適切に設定されていればセキュリティリスクにはなりえないはずです。よって、そうする必要がない限り Access-Control-Allow-Origin: *のようにはすべきではないということです。
anonymousという名前もちょっと微妙な気はします。
参考
imgタグのcrossoriginの説明が分かりやすいように思いました。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/img#attr-crossorigin