セキュリティヘッダーを「診断ツールの点数」のために入れると、サイトが崩れる──主なヘッダーの意味、外部タグと表示崩れを避ける導入の順番、顧客への説明

この記事は、セキュリティヘッダーの主な種類と意味、そして導入するときに表示崩れや外部タグの停止を起こさない進め方を扱います。

「診断サイトでC判定でした。全部入れてください」

無料の診断サイトで「ヘッダーが足りない」と出た顧客から、すぐ直してほしいと言われます。

言われたとおりに一式を入れると、翌日、解析のタグが動かない、埋め込みの地図や動画が表示されない、という連絡が来ます。

セキュリティヘッダーは、効き目が強いぶん、サイトの動きも変えます。
点数のために入れるものではなく、サイトの構成を理解して入れるものです。

セキュリティヘッダーとは、サーバーがブラウザに「このページをどう扱ってよいか」を伝える指示であり、作り方の対策を補う二重の守りである

黒字化の外科医です。セキュリティヘッダーを、制作会社の標準と導入の手順として解剖します。

標準にすべき理由は、三つあります。

第一に、作り方の対策の「保険」になるから。
MDNは、Content-Security-Policy（CSP）を、ページが読み込んでよいリソースを管理する仕組みとし、XSSへの守りに役立つと説明しています。
出力時のエスケープが本体で、ヘッダーは万一のときの被害を減らす、という関係です。

第二に、古い情報のまま入れると、逆効果になることがあるから。
MDNは、X-XSS-Protection を非推奨かつ非標準とし、代わりにCSPを使うよう勧めています。この古いヘッダー自体が、問題を生むことがあるとも注意しています。

第三に、一度入れると、外しにくいものがあるから。
MDNによれば、Strict-Transport-Security（HSTS）を受け取ったブラウザは、そのドメインをHTTPSでしか開かなくなります。設定を変えても、次にHTTPSで受け取るまで反映されません。

主なセキュリティヘッダーの意味

MDNの説明をもとに、制作会社がまず知っておきたいものを並べます。

Content-Security-Policy（CSP）
　ページが読み込んでよいスクリプト・画像などの出どころを決める
　テスト用に、止めずに報告だけする Content-Security-Policy-Report-Only がある

Strict-Transport-Security（HSTS）
　このドメインはHTTPSでのみ開くよう、ブラウザに覚えさせる
　includeSubDomains を付けると、すべてのサブドメインが対象になる

X-Content-Type-Options: nosniff
　ブラウザが中身から種類を推測せず、宣言された種類どおりに扱う

X-Frame-Options（DENY／SAMEORIGIN）
　他のサイトの枠（iframe）の中に表示されることを制限する
　より細かい指定は、CSPの frame-ancestors で行える

Referrer-Policy
　リンク先に、どこから来たかの情報をどこまで送るかを決める
　指定しない場合の既定は strict-origin-when-cross-origin

Permissions-Policy
　カメラや位置情報などの機能を、ページや埋め込みに使わせるかを決める
　MDNでは「試験的」「一部のブラウザで使えない」と表示されている

今すぐ試せる：導入前に「読み込んでいる外部のもの」を洗い出すプロンプト

私はWeb制作会社の経営者です。顧客サイトにセキュリティヘッダーを導入する前に、
影響を受けるものを洗い出してください。

【前提】
・サイトの構成（CMS、サーバー、CDNの有無）：〔　　〕
・読み込んでいる外部のもの（解析、広告、チャット、地図、動画、フォント、フォーム）：〔　　〕
・他のサイトに、このサイトを枠で埋め込んでいるか：〔　　〕
・サブドメインの一覧と、それぞれがHTTPSに対応しているか：〔　　〕

1. 導入するヘッダーごとに、影響を受けそうな外部のものを表にする。
2. HSTSの includeSubDomains を付けてよいか、判断の材料を示す。
3. CSPを、まず報告のみのモードで試す手順を示す。

ヘッダー導入工場：順番、確認、説明文

導入の順番（例）

第1段階：影響が小さいもの
　X-Content-Type-Options: nosniff
　Referrer-Policy
　X-Frame-Options（埋め込みの利用がないことを確認してから）

第2段階：HTTPSの確認が済んでから
　Strict-Transport-Security（max-ageを短く始め、問題がなければ伸ばす）
　includeSubDomains は、全サブドメインのHTTPS対応を確認してから

第3段階：時間をかけるもの
　Content-Security-Policy を、まず Report-Only で運用
　報告を見て許可する出どころを決め、本番の指定に移す

入れないもの
　X-XSS-Protection（非推奨のため、新たに有効にしない）

HSTSの max-age を短く始めるのは、元に戻す必要が出たときの影響を小さくするためです。MDNは、HSTSを止めるには max-age=0 を、ブラウザがHTTPSで受け取る必要があると説明しています。

導入後の確認項目

□ 全ページの種類（トップ、下層、フォーム、管理画面）で表示を確認したか
□ 解析・広告のタグが、計測できているか
□ 埋め込みの地図・動画・SNSが表示されるか
□ フォームの送信と、完了画面が動くか
□ CSPの報告に、想定外の出どころが出ていないか
□ 設定した値と理由を、サイトの台帳に記録したか

顧客への説明文（例）

本サイトには、ブラウザ側で安全性を高める設定（セキュリティヘッダー）を、
段階的に導入しています。
今後、解析や広告などの外部のタグを追加される場合は、
この設定の調整が必要になることがありますので、事前にご相談ください。
診断サイトの点数は目安の一つであり、点数が高いことと
サイトが安全であることは、同じではありません。

構造的なリスク

逆説を指摘しておきます。

CSPをきちんと入れるほど、マーケティング担当がタグを足すたびに、制作会社への依頼が必要になります。

だから、タグの追加を、保守の作業メニューとして料金表に載せてください。手間を無償で吸収すると、安全な設定ほど外されやすくなります。

▶ セキュリティ保守を「善意の無償対応」のままにしない──更新・監視・バックアップ・WAF・報告・緊急対応の6つで、契約された商品にする

よくあるQ&A

Q. サーバーの設定で入れるのか、CMSで入れるのか？

どちらでも入れられますが、どこで入れたかを台帳に残すことが大切です。CDNやWAFを通している場合は、そちらの設定との重なりも確認します。

▶ CDN・WAFの導入で、顧客サイトを止めない注意点──DNSの切り替え、キャッシュの事故、誤検知、契約名義の4つを、作業の前に決めておく

Q. X-Frame-Options とCSPの frame-ancestors は、どちらを使うのか？

社内標準で基本にする方を決め、両方を入れる場合は内容をそろえてください。

Q. 全部の既存サイトに一斉に入れるべきか？

一斉に入れると、表示崩れの連絡も一斉に来ます。年次の点検で、サイトごとに入れてください。

▶ 年次のセキュリティ点検を、保守の定例にする──棚卸し・診断・設定の見直し・報告の4工程と、1サイトあたりの工数の計算、点検報告書の型

最後に

セキュリティヘッダーは、作り方の対策を補う、強い道具です。

意味を理解し、外部のものを洗い出し、段階を踏んで入れ、台帳に残した会社だけが、点数ではなく、壊れない安全を納品できるのです。

▶ 納品前のセキュリティチェックリスト、制作会社の標準化キット──確認項目表、レビューの手順、顧客向け「安全性の説明書」、AIレビュー用プロンプト

これまでの記事は、メンバーシップ「黒字化オペ室」でまとめて読めます。月額1,980円、記事2本分の金額です。詳しくはプロフィールから。

#Web制作会社 #セキュリティヘッダー #CSP #HSTS #セキュリティ #サイト保守 #制作会社経営 #中小企業 #脆弱性対策 #品質管理