📶

許可しているのにAdobe Fontsがクロスオリジンで拒否される

に公開
PHP
webフォント
Adobe Fonts
広告ブロッカー
idea

課題

Adobe Fontsがクロスオリジンで読み込まれていない。許可している。

header関数

Content-Security-Policyヘッダーのディレクティブに、use.typekit.net p.typekit.netの両方を入れている。

index.php
header(
    "Content-Security-Policy: " .
        "default-src 'self'; " .
        "script-src 'self' 'nonce-{$nonce}' 'strict-dynamic'; " .
        "style-src 'self' 'unsafe-inline' use.typekit.net; " .
        "font-src 'self' use.typekit.net p.typekit.net; " .
        "connect-src 'self' use.typekit.net p.typekit.net; " .
        "img-src 'self' data: *; " .
        "frame-ancestors 'self'; " .
        "frame-src 'self' use.typekit.net p.typekit.net;"
);

原因

ブラウザのプロフィールがインストールしていた「uBlock Origin」という広告ブロッカー機能だった。

「信頼するサイト」に登録することで回避。

おまけ

FOUT（Flash of Unstyled Text）をできるだけ減らす策として、接続準備をHTMLのロードと並行させていく。

index.html
<head>
...
    <link rel="preconnect" href="https://use.typekit.net" crossorigin>
...
</head>

Discussion