FirefoxでのみFont Awesomeが化けた時の対処法
FirefoxでみたらFont Awesomeが化けてる！
何気なく自社サイトをFirefoxで見てみたところ、Font Awesomeのアイコンが化けていることに気づきました。
Chrome、Safari、Edgeでは問題なく表示されているのに💦
たまに見る光景
あらま😮
いつから化けていたのか。公開当初はFirefoxでも散々確認してたので問題なく表示されてたはず💦
知らぬ間のFirefoxのバージョンアップ時にでもMozillaのポリシーが改訂されたのだろうか。
とりあえずエラーログを見てみる。
クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、https://use.fontawesome.com/releases/v5.7.1/css/all.css にあるリモートリソースの読み込みは拒否されます (理由: CORS 要求が成功しなかった)。
なんのこっちゃ😯
なにやら言ってることはクロスドメイン制約に関するエラーらしい。
クロスドメインの許可
対象ファイルの拡張子を FilesMatch タグで指定し、アクセスを許可するドメインを Header set Access-Control-Allow-Origin にて指定します。すべてのドメインからアクセスを許可する場合は “*” を指定します。
引用元：クロスドメイン制約が発生する原因
参照先サーバの .htaccess に以下を追記し、外部ドメインからのフォントファイルへのアクセスを許可させろとのこと。
# FilesMatch
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|otf|eot|woff)$">
Header set Access-Control-Allow-Origin "http://domain02.jp"
</FilesMatch>うーむ。そういうことなのだろうか。常時ssl通信させてるのでCDN以下直書きする必要があるフルパスは全てhttps://と書いてあるものの、その先の見えないところで単純にhttp通信が混在しているのではなかろうか。
試しにFont AwesomeのCDNだけhttps://use.fontawesome.comから//use.fontawesome.comに書き直してみる。
直った😃
Googleもだいぶ前からコレ系はこう書けと推薦してるのでこう書くのが正解なのでしょう。
とりあえずコレで様子を見てみましょう。
本来のクロスドメインに対する許可は上記.htaccessに追記するのが正解のようです。
