おいしいブログ

おいしいブログのCORSの対応話

2017-12-29

tofu

Font Awesome サイズでかい問題

おいしいブログのアイコンにはFont Awesome を利用しています。すごく便利なので重宝しています。が、そのアイコンの全てを使うわけではないので、必要なものだけを読むようにしたいというのが人情です。というわけで必要なものに絞ってファイルを生成、それを読み込むようにします。

Font Awesomeから必要なアイコンを取り出す

IcoMoonを使ってFont Awesomeのアイコンを必要なものだけ使う方法を参考に、フォントのデータを作成、ダウンロードします。あとはフォントをアップロードして、CSSをちょっと追記してあげれば完了? の予定だったんですが、そこにあったのはカレンダーやタグなどのアイコンではなく◻(豆腐)でした。

Web Font 豆腐問題

Web Fontを利用している際に(Web Fontに限った話なのか詳細はわからないものの、ひとまず)、表示できるフォントのデータが何がしかの理由で無い場合に、◻(豆腐)になることから豆腐問題として有名?な現象があるようなのですが、これに当たりました。

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. と言っていたのでクロスオリジンの問題のようです。あーそういうことねーー完全に理解したわー? フォントを読もうとしたらクロスオリジンで読めず豆腐化してしまったと。ブログのドメインはblog.mylde.com、CSSなどアセット類を配置しているのはmylde.comなので、このせいですね。ということで、CORSを設定してこのエラーを是正する必要があります。

CORS(Cross-Origin Resource Sharing)を設定する

今回フォントを配置しているのはS3、配信しているのはCloud Frontなのでこの両方の設定を行います。例によってSSや詳細な手順はすぐ使えなくなるので行うこととその手順をふわっとメモ。

S3

また画面が変わっていて迷ったわけですが、今回はバケットのページのアクセス権限のタブにCORSの設定がいました。画面が変わったとしても、どこかにはいるだろうCORSの設定、探します。設定は以下、mylde.com とサブドメインを設定を追加。

# CORSの設定

<CORSRule>
    <AllowedOrigin>mylde.com</AllowedOrigin>
    <AllowedOrigin>*.mylde.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

S3のエンドポイントをcurlなんかで叩いてAccess-Control-Allow-OriginなんかのヘッダがついていればOK。

これでめでたくアイコンが最小限で読まれるようになりました?