Notes / Category
Web技術
CSP違反レポートのendpointを自前で持つ。Cloudflare Workerで最小構成を組む
CSPをサイトに入れる時、違反レポートをどこで受けるか。report-uri.comのようなSaaSを使うか、自前でendpointを立てるか、それともendpointなしで運用するか。3つの選択肢を比較して、Cloudflare Workerで30行程度の自前endpointを立てる手順とCORSの挙動。
mail-tester 7/10の真因はSPF includeのTEMPERROR。1行消して10/10に
Google Workspace + Xサーバー環境でmail-testerを回すと7/10になり「You are not allowed to use one of your sender email addresses (-3)」と指摘される。SPFレコード内のincludeがDNS lookupタイムアウトしている時のTEMPERRORが真因で、不要なincludeを1行削るだけで10/10になる、移行直後によくある落とし穴。
Tailwind v4と@fontsourceの落とし穴。@import同居でwoff2が404になる
Tailwind v4と@fontsourceを同じCSSファイルで@import同居させると、ビルド済みCSSのfont-faceは作られるのに、対応するwoff2ファイルがdistに出力されません。本番で日本語フォントが全部404、ブラウザはHiraginoにフォールバック。Lighthouse緑、Playwright緑のまま見逃される構造と、@import分離による解決。
View Transitionsとstrict CSPの不可避な衝突。Astro security.cspの限界
AstroのClientRouterはランタイムでdata:URI scriptを生成して前ページのinline scriptを再評価する設計。これがstrict CSPと正面衝突します。Astro security.csp + strict-dynamicを試したが頓挫した経緯と、現実的な選択肢の整理。
XサーバーからWebだけCloudflare Pagesへ移す。ドメインとメールは残したまま
旧WordPressをAstroに書き換えてCloudflare Pagesに置いた。ドメインはXドメインで契約継続、メールはXサーバー経由のGoogle Workspaceで運用継続したい。WebだけをCloudflareに移すDNS移行の手順を、CloudflareのZone追加から伝播完了まで実機操作で記録する。
Astro View Transitionsとイベントリスナーの累積。AbortControllerでクリーンアップする
AstroのView Transitionsを有効化すると、ページ遷移のたびに astro:page-load が発火します。セットアップ系の処理を書いていると、イベントリスナーが累積する。AbortControllerと astro:before-swap を使ったクリーンアップパターン。
静的サイトでも_headersで防御層を揃える。Cloudflare Pages 5ヘッダーとCSPの段階導入
「静的サイトだからHTTPセキュリティヘッダーは不要」というのは、よくある誤解。HTTPヘッダーが提供する防御層はSSGとSSRを問わず必要です。Cloudflare Pagesの_headersで5つの基本ヘッダーを設定し、CSPをReport-Onlyから段階導入する手順。
CJK Variable Fontの"CSSが大きい"は罠。unicode-range サブセットの実態
コーポレートサイトのCSSバンドルが446KBに膨れる。「フォントロードがレンダリングをブロックしてFCPやLCPに直撃」というレビュー指摘の妥当性を分解します。@fontsource-variableの unicode-range サブセット仕組みと、定義サイズとペイロードの違い。
hidden inputで公開されるAPIキーのabuse制御。秘密鍵と公開識別子の違い
フォームのhidden inputにAPIキーを入れるSaaS(Web3Forms等)は珍しくありません。「鍵が公開されている」とAIレビューが指摘してくることもありますが、これは秘密鍵漏洩リスクではなく abuse(乱用)制御の話。識別子としての公開鍵と、防御策の整理。
iOSで"1段下にカクっと落ちる"スクロール。JS制御スクロールとWebKit rubber-bandの競合
スムーズスクロールライブラリを入れた途端、iPhoneで奇妙な現象が起きました。下方向にスクロールして指を離した瞬間、画面がさらに1段下にカクっと落ちる。JS制御スクロールとiOSの rubber-band や慣性スクロールの競合と、サイト側でできる対策、ブラウザ単独問題の切り分け方。
Lighthouseモバイルスコアの読み方。CPU 4× slowdownプロファイルを分解する
Lighthouseモバイル Performance 80 を見て「遅い」と即断する前に、計測プロファイルを分解します。CPU 4× slowdown、1.6 Mbps throttling、Moto G Power 想定の意味と、実機Mid-tierとの乖離。実数で判断する習慣。
公開リポジトリで漏れがちな情報3種。generator meta、旧HTML残骸、hidden input
GitHubに上げているサイトのリポジトリで、攻撃対象面を広げる情報が漏れがちです。生成器メタタグ、移行作業で残った旧HTML、フォームのhidden input。3パターンとそれぞれの対処。
React Islandは本当に必要か。小さな図解のための180KB
Astro Islandsは必要な部分だけJSを動かせる仕組みです。一方で、何気なくReactをインポートすると、たった一つのインタラクティブな図解のためにReact + ReactDOMのバンドル全体がページに混ざる。「Astroなら速いはず」を裏切られる原因と、React不要時の代替案。
Three.jsを遅延ロードする。動的インポートとrequestIdleCallbackで720KBを3.6KBに
コーポレートサイトの背景にThree.jsを置いたら、モバイルの初期ロードが10秒近くかかりました。原因はトップレベルのインポートでThree.js全体が初期チャンクに同梱されていたこと。動的インポートとrequestIdleCallbackで別チャンクに分ける手順。