CORSの設定に関するメモ

最近、ブログのフォントをいじくっていて、最終的にウェブサイトのフォントとして以下のフォントを選びました ~~なんか言いにくい~~

方正兰亭纤黑
方正粗金陵
Times New Roman
Times
serif

問題が発生しました。方正のウェブサイトでフォントのライセンスを取得すると、非商用ライセンスになります。私の使用目的は非商用ですが、リスクを減らすためにフォントとプロジェクトを分けることにしました (怖い.jpg)。

えーと、フォントをテーマに組み込まないと、どうやってフォントを使うんだろう？オンラインのフォント CDN に方正のフォントがあるわけがありません...

最終的に、フォントをリソースサーバーの cdn.6-d.cc に置きました。画像などの外部リンクもすべてそこに置いて、フォントは https://cdn.6-d.cc/font/ に置きました。F12 キーを押してネットワークを確認すると、cdn.6-d.cc から 2 つの ttf ファイルが読み込まれていることがわかるはずです。

CORS の設定#

しかし、他のドメインからの参照は、Same-origin policy (同一オリジンポリシー)と呼ばれるブラウザのセキュリティポリシーによって制限されます。しかし、この制限を回避する方法として、Cross-origin resource sharing(CORS)という技術仕様があります。この技術仕様を使用すると、ヘッダーを追加してリソースを異なるドメインから呼び出すことができます。ちなみに、リソースの呼び出し範囲も制限できます。方正の法務チームに巻き込まれたくないので (~~逃げる~~)。

具体的な設定は以下の通りです。

location /font {
    set $cors_origin "";
    if ($http_origin ~* "^https://blog.lvcshu.com$") {
            set $cors_origin $http_origin;
    }
    if ($http_origin ~* "^https://johnpoint.github.io$") {
            set $cors_origin $http_origin;
    }
    if ($http_origin ~* "^https://lvcshu.netlify.com$") {
            set $cors_origin $http_origin;
    }
    if ($request_method = 'OPTIONS') {
    return 204;
    }
    add_header Access-Control-Allow-Origin $cors_origin always;
    add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, PATCH, DELETE, HEAD" always;
    add_header Access-Control-Max-Age 86400 always;
}

CSS の変更#

しかし、テーマのプロジェクトの CSS に私の URL をハードコードすると、上記のドメイン制限が効かなくなります。他の人を誤解させるわけにはいかないので、プロジェクトの all.css に次の行を追加するだけで、フォントを正しく読み込むことができます。

@font-face{font-family:"FZJL";src:url('フォントのURL')}
@font-face{font-family:"FZLT";src: url('フォントのURL')}

以上です。