セキュリティヘッダーを入れると、サイトの表示が崩れることはありますか？

CSPと埋め込み制限は、設定によっては外部の地図・動画・チャット・広告タグなどを止めてしまうことがあります。nosniff・Referrer-Policy・Permissions-Policyは、通常のサイトでは影響が出にくい設定です。CSPは「報告のみ」で始めると、止める前に影響を確認できます。

X-XSS-Protection も入れた方がよいですか？

現在の主要ブラウザはこのヘッダーを使っていないため、新しく入れる必要はありません。代わりの対策はCSPです。

セキュリティヘッダーとは何か。中小企業サイト向けの優先順位

診断の結果で「セキュリティヘッダーが未設定」と出て、制作会社に聞いたら「必要ありません」と言われた——そんな相談をいただくことがあります。セキュリティヘッダーは、それだけでサイトを守り切るものではありません。ただ、数行の設定で入れられて、万一のときの被害を小さくする、費用対効果の高い対策です。

セキュリティヘッダーとは

サイトはページを返すとき、本文とは別に「ヘッダー」という付帯情報を送っています。セキュリティヘッダーはその中に書く、ブラウザへの指示です。「このサイトは必ず暗号化で開くこと」「他のサイトの中に埋め込んで表示しないこと」といった内容を、サイト側から伝えます。

指示を守るのは訪問者のブラウザなので、サーバーやWordPressの中身を大きく変える必要はありません。

6つのヘッダーと優先順位

優先	ヘッダー	何を防ぐか	表示が崩れる可能性
1	X-Content-Type-Options	ファイルの種類の取り違えを悪用した実行	ほぼなし
1	Referrer-Policy	移動先のサイトへ、元のページのURLを渡しすぎること	ほぼなし
1	Permissions-Policy	カメラ・マイク・位置情報などを勝手に使われること	使っていない機能を止めるだけなら、ほぼなし
2	埋め込み制限（X-Frame-Options か CSP の frame-ancestors）	他サイトに埋め込んで偽のボタンを押させる手口	自社サイトを他サイトに埋め込んでいる場合のみ
3	HSTS（Strict-Transport-Security）	暗号化なしの通信へ誘導する手口	http でしか開けないページが残っていると、そのページが開けなくなる
4	CSP（Content-Security-Policy）	不正に埋め込まれたスクリプトの実行	外部のタグや埋め込みが多いと崩れやすい

まず入れる3つ（影響がほぼ出ない）

X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()

Permissions-Policyは、サイトで使っていない機能を止める指示です。店舗の地図で現在地を使うなど、実際に使っている機能は止めないように指定します。

次に埋め込み制限

X-Frame-Options: SAMEORIGIN

自社のページを、自社以外のサイトの中に表示させない設定です。CSPを入れる段階で frame-ancestors 'self' に置き換えても同じ効果があります。

HTTPSが全ページで問題なければHSTS

Strict-Transport-Security: max-age=31536000

一度このヘッダーを受け取ったブラウザは、指定した期間、そのサイトを必ず https で開きます。http でしか開けないページやサブドメインが残っている状態で入れると、そのページが開けなくなります。最初は短い期間で試し、問題がなければ長くします。サブドメインまで含める includeSubDomains や、ブラウザに最初から登録してもらう preload は、影響範囲が広いので、全サブドメインを把握してから判断してください。

最後にCSP

CSPは「このサイトで実行してよいスクリプトの出どころ」を列挙する指示で、効果が最も大きい一方、設定を間違えると解析タグや地図、チャットなどが動かなくなります。最初は Content-Security-Policy-Report-Only という報告のみのヘッダーで入れ、何が止まる予定かを確認してから本番の指定に切り替えます。

自分で確認する方法

ターミナルで次を実行し、上の6つが含まれるかを見ます。

curl -sI https://www.example.jp/

ブラウザなら、開発者ツール（F12）の「ネットワーク」タブでページを再読み込みし、最初の行を選んで「レスポンスヘッダー」を確認します。トップページだけでなく、問い合わせページなど複数のページで同じように出ているかも見てください。設定の場所によっては、一部のページにだけ付いていることがあります。

よくある誤解

「WordPressなら最初から入っている」：WordPressの標準の状態では、これらのヘッダーはほとんど付きません。サーバー設定、CDN、プラグインのどこかで追加する必要があります
「HTMLのmetaタグで書けば同じ」：CSPの一部はmetaタグでも指定できますが、HSTSや埋め込み制限はヘッダーで送る必要があります
「全部入れれば攻撃されない」：ヘッダーは被害を小さくするための備えで、プログラムの弱点そのものを直すわけではありません。更新と組み合わせて意味があります

Webサイト診断の診断ではこう判定します

ホームページ安全設定診断の「ブラウザ向けの安全設定」区分（15点）の配点です。

項目	配点	合格の条件
Content-Security-Policy	5	ヘッダーまたはmetaで設定あり（Report-Onlyのみは2点）
他サイトへの埋め込み制限	3	X-Frame-Options か CSP の frame-ancestors
X-Content-Type-Options	3	nosniff
Referrer-Policy	2	設定あり
Permissions-Policy	2	設定あり

HSTSは「通信の暗号化」区分で、max-ageが15552000秒（180日）以上なら4点、それ未満なら2点です。

設定する場所と、依頼文の例

設定の場所は、サイトの置き方によって変わります。

Apacheのレンタルサーバー：.htaccess に Header always set X-Content-Type-Options "nosniff" のように書く（mod_headers が使える場合）
nginx：add_header X-Content-Type-Options "nosniff" always;
CDN（Cloudflare等）を使っている：CDN側の応答ヘッダーの変更機能で追加
WordPressのプラグイン：手軽ですが、ページのキャッシュ方法によっては付かないことがあるので、追加後に必ず確認します

当社サイトに、次のセキュリティヘッダーの追加をお願いします。
表示や外部サービス（地図・フォーム・解析タグ）への影響を確認しながら進めてください。

1. X-Content-Type-Options: nosniff
2. Referrer-Policy: strict-origin-when-cross-origin
3. Permissions-Policy（使っていない機能を停止）
4. X-Frame-Options: SAMEORIGIN
5. Strict-Transport-Security（全ページがhttpsで問題ないことを確認後）
6. Content-Security-Policy（まずReport-Onlyで影響を確認）

作業後、トップページと問い合わせページでヘッダーを確認させてください。

ホームページ安全設定診断では、これらのヘッダーの有無を無料でまとめて確認できます。設定作業を任せたい場合はブラウザ向け安全設定（セキュリティヘッダー）をご覧ください。ほかの外から見える項目は外から確認できる10項目、