blocked by CORS policyで読み込めないときの対策

AWS EC2 インスタンス上に Web サーバを立てて独自ドメインからその Web サイトに接続できるように設定したら、よくわからないエラーで一部リソースが読み込めなくなっていたので、とりあえずの対策を施しました。

スポンサーリンク

エラー内容

Access to Font at ‘http://www.example.com/fontawesome-webfont.woff?v=4.7.0’ from origin ‘http://example.mktia.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://example.mktia.com’ is therefore not allowed access.

一部書き換えていますが、こんな感じです。

CORS とは

Cross-Origin Resource Sharing の略称で、異なるオリジン (スキーム、ホスト、ポート) 間の通信でデータをやり取りするための決まり、らしい。

(参考) HTML5 における CORS について | Qiita

通常、ブラウザは攻撃者に対して情報漏洩しないよう、異なるオリジンからのリクエストに対してリソースを公開しないよう設定されているっぽいです。

そのため、上の例ではホストが www.example.com であるサーバの下のフォントファイルに example.mktia.com からのアクセスがあったため、エラーを返したと考えられます。

対策

Apache サーバで運用しているサイトでは、.htaccess ファイルを編集することで解決できるようです。

部外者のアクセスはブロックできるように、正規表現を用いて一部アクセスだけを許可するように設定します。

この場合、ホストが xxxx.mktia.com のときはアクセスが認められるはずです。

(参考) Access-Control-Allow-Originヘッダ関連のエラーがCORSなリクエスト時に出る場合の対処【Apache】| TeraDas

最後に

これまで CNAME を設定したときなどにも出ていたのかもしれませんが、初めて気づきました。そんな落とし穴があるとは、この世界は相変わらず知らないことだらけです。

スポンサーリンク

コメント・質問する