WebRelease のプレビュー画面での FONTPLUS の適用について

WebRelease のプレビュー画面での FONTPLUS の web フォントの指定が反映されない場合についての対応方法についてのご案内です。

WebRelease のプレビュー画面とすべての管理画面の html には、WebRelease 2.70L 以降、

referrer-policy: same-origin

という http レスポンスヘッダが付されています。このヘッダにより、WebRelease の画面からの外部リソース（cross origin となるリソース）へのアクセスの際に、Referrer ヘッダが付かない状態になっています。この設定は、知らぬ間に WebRelease が稼働しているホスト名が、外部に通知されてしまうことがないよう、セキュリティ上の配慮のために追加された設定です。

一方、FONTPLUS のように referrer の通知を必要とするサービスの場合、この設定のままではサービスを受けられません。具体的には指定した FONTPLUS のフォント指定がプレビュー画面で反映されない状態になってしまいます。

以下に、FONTPLUS などの外部のサービスに referrer を通知する方法について概説します。

html 中の meta タグで referrer-policy を指定する

先のとおり、WebRelease のすべての画面には referrer-policy: same-origin の http レスポンスヘッダがついていますが、この指定を html 中の meta タグでオーバーライドすることができます。

具体的には、テンプレートの展開中に、下記の様に <meta name="referrer" content="origin-when-cross-origin"> タグを追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=%encoding()%">
<meta name="referrer" content="origin-when-cross-origin"> 
<title>%pageTitle()%</title>
<script type="text/javascript" src="//webfont.fontplus.jp/accessor/script/fontplus.js?..." charset="utf-8"></script>
</head>
<body>
<p style="font-family: FOT-モード明朝A Std B;">%text%</p>
</body>
</html>

この meta タグの挿入によって FONTPLUS 側に referrer が通知されるようになります。

この設定は FONTPLUS に限らず、外部のサービスに referrer を通知したい場合に利用することができます。

この例では、referrer-policy に origin-when-cross-origin を指定していますが、他に、strict-origin-when-cross-origin などを指定することもあるでしょう。ニーズに合わせた referrer-policy を指定するようにしてください。

プレビューの場合に限って meta タグを出したい場合は isPreview() 述語を使用してください。(2020/02/27 追記)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=%encoding()%">
<wr-if condition="isPreview()"><meta name="referrer" content="origin-when-cross-origin"></wr-if>
<title>%pageTitle()%</title>
<script type="text/javascript" src="//webfont.fontplus.jp/accessor/script/fontplus.js?..." charset="utf-8"></script>
</head>
<body>
<p style="font-family: FOT-モード明朝A Std B;">%text%</p>
</body>
</html>

尚 referrer ヘッダがないことが原因で FONTPLUS のフォント指定が適用されない問題は Windows 上の IE11 と Edge では発生しない場合がある模様です。（2020/02/25 現在)