<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Browser on plzhans blog</title><link>https://blog.plzhans.com/ja/tags/browser/</link><description>Recent content in Browser on plzhans blog</description><generator>Hugo</generator><language>ja</language><lastBuildDate>Thu, 03 Sep 2026 11:08:00 +0000</lastBuildDate><atom:link href="https://blog.plzhans.com/ja/tags/browser/index.xml" rel="self" type="application/rss+xml"/><item><title>SEO監査が指摘するセキュリティヘッダー4つを、Cloudflareでコードなしに適用する</title><link>https://blog.plzhans.com/ja/posts/120-cloudflare-security-headers-hsts-csp/</link><pubDate>Sun, 30 Aug 2026 01:25:00 +0000</pubDate><guid>https://blog.plzhans.com/ja/posts/120-cloudflare-security-headers-hsts-csp/</guid><description>&lt;p&gt;&lt;picture&gt;&#10; &lt;source srcset="https://blog.plzhans.com/posts/120-cloudflare-security-headers-hsts-csp/assets/1_bb515481-7252-4c3f-94cb-0474c42c9d1c_hu_b1596e5cf95128e.webp" type="image/webp"&gt;&#10; &lt;img src="https://blog.plzhans.com/posts/120-cloudflare-security-headers-hsts-csp/assets/1_bb515481-7252-4c3f-94cb-0474c42c9d1c_hu_78a6ae4905cadc2c.png" alt="CloudflareとHTMLのmetaタグでセキュリティヘッダーを分けて適用する構成を示した代表画像" width="1200" height="630" loading="lazy"&gt;&#10; &lt;/picture&gt;&lt;/p&gt;&#10;&lt;p&gt;&lt;img src="https://blog.plzhans.com/posts/120-cloudflare-security-headers-hsts-csp/assets/2_3cb22a0f-7e83-805e-96d1-eef71485d603.png" alt="CloudflareとHTMLのmetaタグでセキュリティヘッダーを分けて適用する構成を示した代表画像" loading="lazy"&gt;&lt;/p&gt;&#10;&lt;h2 id="概要"&gt;概要&lt;/h2&gt;&#10;&lt;p&gt;SEO監査レポートで、4つのセキュリティヘッダーが指摘されることがあります。&lt;code&gt;Strict-Transport-Security&lt;/code&gt;、&lt;code&gt;Content-Security-Policy&lt;/code&gt;、&lt;code&gt;X-Content-Type-Options&lt;/code&gt;、&lt;code&gt;Referrer-Policy&lt;/code&gt;です。&lt;/p&gt;&#10;&lt;p&gt;最初はなぜこれがSEO項目なのかと思うはずです。結論から言うと、&lt;strong&gt;これらのヘッダーは検索順位を直接上げてくれるわけではありません。&lt;/strong&gt;&lt;/p&gt;&#10;&lt;p&gt;この記事では、なぜSEO監査にセキュリティヘッダーが含まれるのか、各ヘッダーが何をするのか、そしてCloudflareを前段に置いた静的ブログで&lt;strong&gt;後から管理しやすい組み合わせ&lt;/strong&gt;で適用する方法を整理します。&lt;/p&gt;&#10;&lt;h2 id="なぜseoレポートがセキュリティヘッダーを指摘するのか"&gt;なぜSEOレポートがセキュリティヘッダーを指摘するのか&lt;/h2&gt;&#10;&lt;h3 id="lighthouseスコアに含まれている"&gt;Lighthouseスコアに含まれている&lt;/h3&gt;&#10;&lt;p&gt;ほとんどのSEO監査ツールはGoogle Lighthouseをベースに技術SEOスコアを算出します。Lighthouseの4つのカテゴリのうち1つが&lt;strong&gt;Best Practices&lt;/strong&gt;で、ここにCSP、HSTS、&lt;code&gt;X-Content-Type-Options&lt;/code&gt;のチェックが含まれています。&lt;/p&gt;&#10;&lt;p&gt;厳密にはセキュリティ衛生の点検なのですが、SEO監査フレームワークに組み込まれて一緒に報告されているのです。検索エンジンがこのヘッダーを読んで順位付けしているわけではありません。&lt;/p&gt;&#10;&lt;h3 id="本当のつながりはハッキングされた時の結果"&gt;本当のつながりはハッキングされた時の結果&lt;/h3&gt;&#10;&lt;p&gt;実質的なつながりは次の経路です。&lt;/p&gt;&#10;&lt;ol&gt;&#10;&lt;li&gt;XSSやコンテンツインジェクションでスパムリンクや悪意のあるスクリプトが挿入される。&lt;/li&gt;&#10;&lt;li&gt;Google Safe Browsingが検索結果に警告を付けるか、インデックスから除外する。&lt;/li&gt;&#10;&lt;li&gt;トラフィックが一夜にして消える。&lt;/li&gt;&#10;&lt;/ol&gt;&#10;&lt;p&gt;セキュリティヘッダーは1番が起こる確率を下げる予防措置です。監査レポートがこの項目を高優先度に分類するのは、&lt;strong&gt;発生確率が高いからではなく、起きた時のインパクトが大きいから&lt;/strong&gt;です。&lt;/p&gt;&#10;&lt;blockquote&gt;&#10;&lt;p&gt;💡 まとめると「セキュリティヘッダー → 順位上昇」ではなく、「セキュリティヘッダー不在 → ハッキングリスク → (発生した場合)順位崩壊」という間接的で非対称な関係です。&#10;ユーザーアップロードもログインフォームもない静的ブログなら攻撃対象領域そのものが小さいため、優先度としては致命的というよりは、やっておくと安全な予防接種に近いものです。&lt;/p&gt;&#10;&lt;/blockquote&gt;&#10;&lt;h2 id="各ヘッダーの役割"&gt;各ヘッダーの役割&lt;/h2&gt;&#10;&lt;h3 id="strict-transport-security-hsts"&gt;Strict-Transport-Security (HSTS)&lt;/h3&gt;&#10;&lt;p&gt;ブラウザに対して、このドメインには今後必ずHTTPSでのみ接続するよう指示します。&lt;code&gt;http://&lt;/code&gt;でリクエストが発生してもサーバーに確認せず、ブラウザが即座に&lt;code&gt;https://&lt;/code&gt;に変換します。&lt;/p&gt;&#10;&lt;p&gt;すでに301でHTTPSリダイレクトをしていても、&lt;strong&gt;その最初のリクエストの瞬間は平文&lt;/strong&gt;です。公共Wi-Fiのような環境で攻撃者が中間で傍受し、偽のページを表示するSSLストリッピングが可能な区間がまさにここです。HSTSはその区間をなくします。&lt;/p&gt;&#10;&lt;h3 id="content-security-policy-csp"&gt;Content-Security-Policy (CSP)&lt;/h3&gt;&#10;&lt;p&gt;スクリプト、画像、スタイルをどの取得元から読み込めるかを定めるホワイトリストです。中核となる役割はXSS防御です。&lt;/p&gt;&#10;&lt;p&gt;外部依存(コメントウィジェット、アナリティクスなど)のいずれかがサプライチェーン攻撃を受けたり、コンテンツパイプラインのバグでエスケープされていないテキストがそのままHTMLに入り込む事故が起きても、許可されていない取得元からのスクリプト実行をブラウザが拒否します。&lt;/p&gt;&#10;&lt;p&gt;&lt;strong&gt;一次防御線が突破されても機能する二次防御線&lt;/strong&gt;だと考えてください。&lt;/p&gt;&#10;&lt;h3 id="x-content-type-options-nosniff"&gt;X-Content-Type-Options: nosniff&lt;/h3&gt;&#10;&lt;p&gt;ブラウザがサーバーの示した&lt;code&gt;Content-Type&lt;/code&gt;を無視して、ファイルの内容を見て種類を自ら推測するMIMEスニッフィングを防ぎます。&lt;/p&gt;&#10;&lt;p&gt;この推測が悪用されると、実行されてはいけないファイルがスクリプトとして実行される迂回経路が生まれます。ユーザーアップロードのないブログならリスクは低いですが、副作用がないためそのまま有効にしておく項目です。&lt;/p&gt;&#10;&lt;h3 id="referrer-policy"&gt;Referrer-Policy&lt;/h3&gt;&#10;&lt;p&gt;訪問者が他のサイトへ移動したり外部リソースを読み込んだりする際、どのページから来たのかをどこまで渡すかを定めます。&lt;/p&gt;&#10;&lt;p&gt;最近のブラウザは何も指定しなくてもデフォルト値がすでに&lt;code&gt;strict-origin-when-cross-origin&lt;/code&gt;になっています。以前のデフォルトだった&lt;code&gt;no-referrer-when-downgrade&lt;/code&gt;は、プロトコルさえ同じであればパスまで含めた完全なURLを渡していましたが、2020年の仕様改定で基準が変わりました。&lt;/p&gt;&#10;&lt;p&gt;そのため、この項目は「今まさに情報が漏れている」というよりは、&lt;strong&gt;ブラウザのデフォルト値に依存せず、サイトが望むポリシーを明示しておく&lt;/strong&gt;という意味合いが大きいです。SEOよりも訪問者のプライバシーの性格が強い項目です。&lt;/p&gt;&#10;&lt;h2 id="どこに何を置くか"&gt;どこに何を置くか&lt;/h2&gt;&#10;&lt;p&gt;ヘッダーを全部Cloudflareに集約することもできますし、全部HTMLに入れることもできます。実際に運用してみると、&lt;strong&gt;値が変わる頻度&lt;/strong&gt;が基準になります。&lt;/p&gt;&#10;&lt;table&gt;&#10;&#9;&lt;thead&gt;&#10;&#9;&#9;&#9;&lt;tr&gt;&#10;&#9;&#9;&#9;&#9;&#9;&lt;th&gt;ヘッダー&lt;/th&gt;&#10;&#9;&#9;&#9;&#9;&#9;&lt;th&gt;置き場所&lt;/th&gt;&#10;&#9;&#9;&#9;&#9;&#9;&lt;th&gt;理由&lt;/th&gt;&#10;&#9;&#9;&#9;&lt;/tr&gt;&#10;&#9;&lt;/thead&gt;&#10;&#9;&lt;tbody&gt;&#10;&#9;&#9;&#9;&lt;tr&gt;&#10;&#9;&#9;&#9;&#9;&#9;&lt;td&gt;Strict-Transport-Security&lt;/td&gt;&#10;&#9;&#9;&#9;&#9;&#9;&lt;td&gt;Cloudflare&lt;/td&gt;&#10;&#9;&#9;&#9;&#9;&#9;&lt;td&gt;一度有効にすれば変わることがない&lt;/td&gt;&#10;&#9;&#9;&#9;&lt;/tr&gt;&#10;&#9;&#9;&#9;&lt;tr&gt;&#10;&#9;&#9;&#9;&#9;&#9;&lt;td&gt;X-Content-Type-Options&lt;/td&gt;&#10;&#9;&#9;&#9;&#9;&#9;&lt;td&gt;Cloudflare&lt;/td&gt;&#10;&#9;&#9;&#9;&#9;&#9;&lt;td&gt;値が&lt;code&gt;nosniff&lt;/code&gt;固定である&lt;/td&gt;&#10;&#9;&#9;&#9;&lt;/tr&gt;&#10;&#9;&#9;&#9;&lt;tr&gt;&#10;&#9;&#9;&#9;&#9;&#9;&lt;td&gt;Referrer-Policy&lt;/td&gt;&#10;&#9;&#9;&#9;&#9;&#9;&lt;td&gt;Cloudflare&lt;/td&gt;&#10;&#9;&#9;&#9;&#9;&#9;&lt;td&gt;metaでもできるがヘッダーの方が確実&lt;/td&gt;&#10;&#9;&#9;&#9;&lt;/tr&gt;&#10;&#9;&#9;&#9;&lt;tr&gt;&#10;&#9;&#9;&#9;&#9;&#9;&lt;td&gt;X-Frame-Options&lt;/td&gt;&#10;&#9;&#9;&#9;&#9;&#9;&lt;td&gt;Cloudflare&lt;/td&gt;&#10;&#9;&#9;&#9;&#9;&#9;&lt;td&gt;値が固定で、metaでは代替できない&lt;/td&gt;&#10;&#9;&#9;&#9;&lt;/tr&gt;&#10;&#9;&#9;&#9;&lt;tr&gt;&#10;&#9;&#9;&#9;&#9;&#9;&lt;td&gt;Content-Security-Policy&lt;/td&gt;&#10;&#9;&#9;&#9;&#9;&#9;&lt;td&gt;HTML meta&lt;/td&gt;&#10;&#9;&#9;&#9;&#9;&#9;&lt;td&gt;外部サービスを追加するたびに値が変わる&lt;/td&gt;&#10;&#9;&#9;&#9;&lt;/tr&gt;&#10;&#9;&lt;/tbody&gt;&#10;&lt;/table&gt;&#10;&lt;p&gt;CSPだけ性格が異なります。アナリティクスを乗り換えたりコメントウィジェットを追加するたびに許可元を修正する必要があり、これをCloudflareに置くと**サイトをいじるたびにダッシュボードに入らなければなりません。**サイトのリポジトリで一緒に管理する方がはるかに楽です。&lt;/p&gt;&#10;&lt;h2 id="cloudflareに置くヘッダー"&gt;Cloudflareに置くヘッダー&lt;/h2&gt;&#10;&lt;h3 id="1-hstsとnosniffは1画面で完結する"&gt;1. HSTSとnosniffは1画面で完結する&lt;/h3&gt;&#10;&lt;p&gt;SSL/TLS → Edge Certificates → &lt;strong&gt;HTTP Strict Transport Security (HSTS)&lt;/strong&gt; → Enable HSTS&lt;/p&gt;</description></item></channel></rss>