CSPとX-Frame-Optionsで守る安全なウェブサイト

セキュリティ

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

セキュリティヘッダーは、ウェブサイトがブラウザに送信する指示書のようなものです。これを使うことで、攻撃者がサイトを悪用したり、ユーザーに不正な操作をさせるのを防ぎます。
特に重要なものがContent Security Policy(CSP)とX-Frame-Optionsです。

Content Security Policy(CSP)とは?

CSPは、ブラウザに「どんなリソース(スクリプト、画像、スタイルシートなど)を許可するか」を指示するセキュリティヘッダーです。

たとえば、「このスクリプトしか実行しないでね」「外部から読み込んだスクリプトは使わないで!」といったルールを設定できます。これにより、XSS(クロスサイトスクリプティング)攻撃を防ぐことができます。

CSPの例と設定方法

基本的な設定例
サーバー側で以下のヘッダーを送信します

CSS
Content-Security-Policy: default-src 'self';
  • 解説
    • default-src 'self'
      自分のサイト内(self)のリソースだけを許可します。外部のスクリプトやスタイルシートなどはブロックされます。

特定のリソースを許可

外部のリソースを一部許可したい場合

CSS
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com;
  • 解説
    • script-src 'self' https://trusted-cdn.com;
      自分のサイトと、https://trusted-cdn.comからのスクリプトを許可します。

CSPレポートモード
ブロックせずにCSP違反を報告するだけの設定

CSS
Content-Security-Policy-Report-Only: default-src 'self'; 
  • 解説
    • Content-Security-Policy-Report-Only
      設定違反があっても実行は許可し、ブラウザの開発者ツールに警告を表示します。

X-Frame-Optionsとは?

X-Frame-Optionsは、ウェブページが他のサイトに「iframe」として埋め込まれるのを制御するヘッダーです。

iframeとは?

iframe(インラインフレーム)とは、ウェブページの中に別のウェブページを埋め込むためのHTMLタグです。
つまり、「ページの中に別のページを表示する窓」のようなものです。

なぜ必要?

クリックジャッキングという攻撃を防ぐためです。
クリックジャッキングでは、攻撃者が自分の悪意あるサイトにあなたのサイトをiframeで埋め込み、ユーザーが意図しないクリックをさせることで、不正操作を行います。

X-Frame-Optionsの設定方法

完全に埋め込みを禁止
サーバーから以下のヘッダーを送信します

CSS
X-Frame-Options: DENY
  • 効果:
    他のどのサイトでもこのページをiframeに埋め込むことができなくなります。

特定のサイトからの埋め込みを許可
信頼できるドメインだけを許可したい場合:

CSS
X-Frame-Options: ALLOW-FROM https://trusted-site.com
  • 効果:
    https://trusted-site.comだけがiframeとして埋め込み可能です

自分のサイト内だけで許可
自分のサイト内でiframeを使用したい場合は、CSPのframe-ancestorsを使うのが推奨されます

CSS
Content-Security-Policy: frame-ancestors 'self';

実際の設定方法

Apacheの場合

.htaccessやサーバー設定ファイルに以下を追加します

Apache
# CSPの設定
Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted-cdn.com;"

# X-Frame-Optionsの設定
Header always set X-Frame-Options "DENY"

Nginxの場合

Nginxの設定ファイルに以下を追加します

Nginx
# CSPの設定
add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted-cdn.com;";

# X-Frame-Optionsの設定
add_header X-Frame-Options "DENY";

セキュリティヘッダーを導入するメリット

  1. XSS攻撃の防止(CSP)
    外部の悪意あるスクリプトを実行されるリスクを減らせます。
  2. クリックジャッキングの防止(X-Frame-Options)
    ページが攻撃者のiframeに埋め込まれるのを防ぎます。
  3. 信頼性の向上
    セキュリティヘッダーを設定しているサイトは、ブラウザやセキュリティツールから「安全」と評価されることが多くなります。

注意点

  1. CSP設定の過剰な制限に注意
    設定が厳しすぎると、必要なリソース(外部のライブラリやスクリプト)が動かなくなる可能性があります。テストをしながら調整しましょう。
  2. ブラウザの互換性
    古いブラウザでは一部のヘッダーがサポートされない場合がありますが、多くの主要ブラウザは問題なく対応しています。
  3. モニタリングと改善
    初めはCSPをReport-Onlyモードで設定し、どのリソースがブロックされるか確認するのがおすすめです。

まとめ

セキュリティヘッダーは、ウェブアプリケーションのセキュリティを強化する強力な手段です。

  • CSP:XSS攻撃を防ぎ、許可されたリソースだけを利用。
  • X-Frame-Options:クリックジャッキング攻撃を防ぐ。

適切なヘッダーを設定することで、ウェブサイトの安全性を大幅に向上させることができます。導入は簡単なので、ぜひあなたのウェブサイトにも適用してみましょう!

コメント

タイトルとURLをコピーしました