Web フォントの配信確認は Origin ヘッダ付きの curl でも行う：代替書体のまま 13 日間気づかなかった記録

#!/usr/bin/env bash
# check_variants.sh — 同じ URL を「素の要求」「Origin 付き」「キャッシュを避けた要求」で取り、並べて比べる
# 使い方: ./check_variants.sh https://example.com/assets/fonts/body-latin.woff2 https://example.com
set -u
URL="${1:?フォントなどの URL}"
ORIGIN="${2:?ページのオリジン（例 https://example.com）}"
 
hdr() { # ヘッダ文字列 $1 から、名前 $2 の値を取り出す（大文字小文字を区別しない）
  printf '%s' "$1" | tr -d '\r' | awk -v k="$2" -F': ' 'tolower($1)==k{print $2; exit}'
}
 
probe() { # $1=ラベル $2=要求先 URL、残り=curl に渡す追加引数
  local label="$1" target="$2"; shift 2
  local out
  # 本文は捨て、ヘッダと実際に受け取ったバイト数だけを見る
  out=$(curl -sS -o /dev/null -D - -w 'X-Bytes: %{size_download}\n' "$@" "$target") \
    || { printf '%-12s curl が失敗しました\n' "$label" >&2; echo "ERR"; return; }
  local code; code=$(printf '%s' "$out" | tr -d '\r' | awk '/^HTTP\//{c=$2} END{print c}')
  printf '%-12s status=%s cf-cache-status=%s bytes=%s\n             cache-control=%s acao=%s\n' \
    "$label" "$code" "$(hdr "$out" cf-cache-status)" "$(hdr "$out" x-bytes)" \
    "$(hdr "$out" cache-control)" "$(hdr "$out" access-control-allow-origin)" >&2
  echo "$code"
}
 
plain=$(probe "plain" "$URL")
cors=$(probe "with-Origin" "$URL" -H "Origin: ${ORIGIN}")
# クエリを付けると CDN のキャッシュキーが変わり、オリジンの現状に近い応答が返る
fresh=$(probe "cache-bust" "${URL}?cb=${RANDOM}${RANDOM}" -H "Origin: ${ORIGIN}")
 
if [ "$plain" != "$cors" ] || [ "$cors" != "$fresh" ]; then
  echo "NG: 応答が食い違っています（plain=$plain with-Origin=$cors cache-bust=$fresh）" >&2
  exit 1
fi
# そろっていても 200 でなければ失敗（全部 404、全部 curl 失敗も見逃さない）
if [ "$plain" != "200" ]; then
  echo "NG: 3 通りとも status=$plain です" >&2
  exit 1
fi
echo "OK: 3 通りとも status=200" >&2

plain        status=200 cf-cache-status= bytes=100
             cache-control=max-age=31536000 acao=
with-Origin  status=404 cf-cache-status= bytes=2
             cache-control=max-age=31536000 acao=
cache-bust   status=200 cf-cache-status= bytes=100
             cache-control=max-age=31536000 acao=
NG: 応答が食い違っています（plain=200 with-Origin=404 cache-bust=200）

// ページを開いた状態で DevTools のコンソールに貼る
(async () => {
  await document.fonts.ready;
  // 1) 読み込みに失敗した書体を一覧にする
  const faces = [...document.fonts].map(f => ({ family: f.family, weight: f.weight, status: f.status }));
  console.table(faces);
 
  // 2) 同一オリジンの CSS から @font-face の URL を集める（別オリジンの CSS は読めないので飛ばす）
  const urls = new Set();
  for (const sheet of document.styleSheets) {
    let rules;
    try { rules = sheet.cssRules; } catch { continue; }
    for (const r of rules) {
      if (!(r instanceof CSSFontFaceRule)) continue;
      const src = r.style.getPropertyValue('src');
      for (const m of src.matchAll(/url\(["']?([^"')]+)["']?\)/g)) {
        urls.add(new URL(m[1], sheet.href || location.href).href);
      }
    }
  }
 
  // 3) ブラウザのキャッシュを使う取得と、使わない取得を比べる
  //    reload はキャッシュを上書きするので、必ず force-cache を先に取る
  for (const u of urls) {
    const cached = await fetch(u, { cache: 'force-cache', mode: 'cors' }).then(r => r.status).catch(() => 'ERR');
    const fresh = await fetch(u, { cache: 'reload', mode: 'cors' }).then(r => r.status).catch(() => 'ERR');
    console.log(cached === fresh ? 'same' : 'DIFF', { url: u, forceCache: cached, reload: fresh });
  }
})();

<IfModule mod_headers.c>
  # 拡張子ごとに付けている長期キャッシュが、404 や 5xx にまで乗らないようにする
  # expr= の条件指定は Apache 2.4.10 以降で使える
  Header always set Cache-Control "no-store" "expr=%{REQUEST_STATUS} >= 400"
</IfModule>

# わざと存在しないパスを取り、404 に no-store が付いているかを見る
curl -sS -o /dev/null -D - "https://example.com/assets/fonts/does-not-exist-$RANDOM.woff2" \
  | tr -d '\r' | grep -iE '^(HTTP/|cache-control:)'

# URL 指定に、素の変種と Origin 付きの変種を両方並べる（Cloudflare API）
curl -sS -X POST "https://api.cloudflare.com/client/v4/zones/${CF_ZONE_ID}/purge_cache" \
  -H "Authorization: Bearer ${CF_API_TOKEN}" -H "Content-Type: application/json" \
  --data '{"files":[
    {"url":"https://example.com/assets/fonts/body-latin.woff2"},
    {"url":"https://example.com/assets/fonts/body-latin.woff2","headers":{"Origin":"https://example.com"}}
  ]}'
 
# プレフィックス指定（スキームは付けない）
curl -sS -X POST "https://api.cloudflare.com/client/v4/zones/${CF_ZONE_ID}/purge_cache" \
  -H "Authorization: Bearer ${CF_API_TOKEN}" -H "Content-Type: application/json" \
  --data '{"prefixes":["example.com/assets/fonts/"]}'

デプロイ後の確認:
1. ./check_variants.sh <フォントの URL> <サイトのオリジン> を、追加・変更したフォントと画像のすべてで実行する
2. 終了コードが 1 のファイルがあれば、パージせずに出力の 3 行をそのまま報告する（判断は私が行う）
3. 終了コードがすべて 0 でも、「確認した URL の一覧」を報告に含める