少し前に「セキュリティA+を目指す」と宣言しました。今回はその経過報告です。正直、思っていたより大変でしたが、なんとかA評価まで来ることができました。
まずは現状把握から
securityheaders.comでスキャンしてみると、当時はA評価。6項目のうちCSP(Content-Security-Policy)だけが未対応で、これがA+を阻む最後の壁でした。
CSPは、サイトがどこからスクリプトや画像、フォントを読み込んでいいかを細かく指定するセキュリティヘッダーです。設定を一つ間違えると、サイトの表示が崩れてしまうリスクがあります。正直、ここで腰が引けていました。
まずはバックアップ
何より先にやったのはバックアップです。UpdraftPlusでデータベース・プラグイン・テーマ・アップロードを丸ごと保存し、.htaccessの元の内容もテキストファイルで別途保管しました。何かあったらすぐ戻せる状態を作って、ようやく作業に取りかかれました。
サイトが何を読み込んでいるか調べる
CSPを設定するには、サイトが実際に何を読み込んでいるかを正確に把握する必要があります。ブラウザの開発者ツールでNetworkタブを開き、ひとつずつ確認していきました。
わかったのは以下の3点です。
- Google Fontsを読み込んでいる(Noto Fontシリーズ)
- YouTube動画を2本埋め込んでいる
- Google AnalyticsとTag Managerが動いている
この3つを許可リストに入れた状態で、CSPの設定を書きました。
いきなり本番は怖いので、まずはテストモード
最初から本番適用すると、何か問題があった場合にサイトが壊れてしまいます。なので「ブロックはせず、違反だけ記録する」Report-Onlyモードでまず試しました。
サイトを開いてConsoleを確認すると、案の定、2件の違反が出ました。
- フォントの読み込みエラー(data:形式のwoffフォントが許可されていなかった)
- メディアの読み込みエラー(media-srcの設定漏れ)
ここで「やっぱり一筋縄ではいかないな」と思いましたが、ひとつずつ修正して、再度確認すると違反は消えていました。トップページ、記事ページ、お問い合わせページ、キャラクター紹介ページと、一通り見て回りましたが、表示側に問題はありませんでした。ここまで来てようやく一安心です。
いざ本番適用
Report-Onlyを外し、本番のCSPとして適用しました。サイトを開き直す瞬間は少し緊張しましたが、表示は崩れず、正常に動作していることを確認できました。
スキャン結果
securityheaders.comで再スキャンすると、6項目すべてが緑のチェックになり、評価はA。ここまでの作業がちゃんと形になったのを見て、地味にうれしかったです。
ただ、A+にはまだ届きませんでした。
理由は1つの設定項目です。WordPressやプラグインの動作に関わる部分で、外すと表示が崩れるリスクがあるため、今回は無理に詰めず、現状のA評価でいったん落ち着くことにしました。
結果として
securityheaders.comの調査によると、Webエージェンシー50社のうちA評価を取れたのはわずか8%だったそうです。個人でのんびり運営しているブログが、その水準まで来られたのは、自分でも少し驚いています。
苦労した分だけ、達成した時の安心感は大きかったです。イゼルローン越えは、まだ道半ば。残った警告をどう片付けるかは、また次の機会に挑戦したいと思います。
Shin / クリエイター
× Shin’s GenAI ×
ひとりでは、できなかった。
AIと一緒なら、できた。
生成AIと対話しながら、設計・実装を一緒に進めた記録です。
Lux / AI妖精

コメント