SPAのセキュリティ診断方法｜シングルページアプリケーション特有の脆弱性

React、Vue.js、Angularなどのフレームワークを使ったシングルページアプリケーション（SPA）は、高速で快適なユーザー体験を提供できる一方、従来のWebアプリケーションとは異なるセキュリティリスクを抱えています。クライアントサイドでの処理が増えることで、機密情報の露出やAPI通信の脆弱性など、新たな攻撃ポイントが生まれているのです。本記事では、SPA特有のセキュリティリスクを明らかにし、実際の診断事例をもとに具体的な診断方法とチェックポイントを解説します。

SPAのセキュリティリスクが高まる3つの理由

シングルページアプリケーションは、その設計思想と実装方法により、従来のマルチページアプリケーションとは異なるセキュリティ上の課題を抱えています。ここでは、SPAでセキュリティリスクが高まる主な3つの理由を見ていきましょう。

クライアントサイドでのデータ処理による機密情報の露出リスク

SPAでは、サーバーから取得したデータをクライアントサイド（ブラウザ）で処理するため、JavaScriptのコード内に機密情報が含まれるリスクがあります。例えば、APIキーやアクセストークンをソースコードに直接記述してしまうケースや、ユーザー情報をブラウザのLocalStorageに平文で保存してしまうケースが典型的です。

IPAの「安全なウェブサイトの作り方」によると、クライアントサイドに保存された情報は開発者ツールで簡単に閲覧できるため、機密性の高いデータは必ずサーバーサイドで管理する必要があると指摘されています。実際の診断事例では、ブラウザのデベロッパーツールのApplicationタブを開くだけで、管理者権限のトークンが平文で保存されていたケースもありました。

• JavaScriptファイルに直接記述されたAPIキー
• LocalStorageに保存された暗号化されていないユーザー情報
• コメントアウトされた認証情報がそのまま残っている

API依存のアーキテクチャによる認証・認可の複雑化

SPAは、バックエンドのAPIと通信してデータを取得する設計が一般的です。このAPI依存のアーキテクチャでは、認証と認可の仕組みが複雑になりやすく、設定ミスや実装の不備が脆弱性につながります。

特に注意すべきは、CORS（Cross-Origin Resource Sharing）の設定です。APIサーバーのCORS設定を誤ると、意図しないドメインからのアクセスを許可してしまい、データの不正取得や改ざんのリスクが高まります。OWASP Top 10の最新版でも、API関連の脆弱性が新たに重要項目として追加されており、API通信のセキュリティ確保は喫緊の課題となっています。

また、JWT（JSON Web Token）を用いた認証では、トークンの有効期限管理やリフレッシュトークンの取り扱いを適切に行わないと、セッションハイジャックのリスクが生じます。

動的なDOM操作によるXSS攻撃の増加

SPAでは、JavaScriptを使って動的にDOMを操作するため、適切なエスケープ処理を行わないとXSS（クロスサイトスクリプティング）攻撃に対して脆弱になります。従来のサーバーサイドレンダリングでは、テンプレートエンジンが自動的にエスケープ処理を行ってくれるケースが多いですが、SPAではフレームワークの機能を正しく理解して使う必要があります。

例えば、Reactの「dangerouslySetInnerHTML」やVue.jsの「v-html」ディレクティブは、HTML文字列をそのまま挿入する機能です。ユーザー入力をこれらの機能で直接レンダリングすると、悪意のあるスクリプトが実行されてしまいます。

実際の診断では、ユーザーのプロフィール編集機能で、名前欄に「」と入力すると、アラートが表示されてしまう脆弱性が発見されたケースもありました。

SPA特有の脆弱性診断チェックリスト

SPAのセキュリティ診断では、従来のWebアプリケーション診断項目に加えて、SPA特有の項目を確認する必要があります。ここでは、実務で使える具体的なチェックリストを8項目に分けて紹介します。

トークン管理とセッション制御の検査

JWTやOAuthトークンの管理方法は、SPAセキュリティの要です。以下の項目を必ず確認しましょう。

• トークンの保存場所：LocalStorageではなくHttpOnly属性付きCookieまたはメモリ内保存が推奨
• 有効期限の設定：アクセストークンは短時間（15分以内）、リフレッシュトークンは適切な期間
• トークンのローテーション：リフレッシュ時に新しいトークンを発行する仕組みがあるか
• XSS対策：トークンがJavaScriptから読み取れない設定になっているか

Chrome DevToolsのApplicationタブでLocalStorageとCookiesを確認し、トークンの保存方法と属性を検証します。もしLocalStorageにトークンが平文で保存されている場合は、即座に改善が必要です。

API通信のセキュリティ検証

SPAとバックエンドAPIの通信において、以下のセキュリティ要件を満たしているか確認します。

• HTTPS通信の強制：すべてのAPI通信がHTTPSで行われているか
• CORS設定の適切性：許可するOriginが明示的に指定されているか（ワイルドカード「*」は避ける）
• APIエンドポイントの認証：認証が必要なエンドポイントで適切にトークン検証が行われているか
• レート制限の実装：DDoS攻撃やブルートフォース攻撃への対策があるか

NetworkタブでAPI通信を監視し、レスポンスヘッダーのAccess-Control-Allow-Originが適切に設定されているか確認します。また、認証なしでアクセスできるAPIエンドポイントがないかもチェックしましょう。

クライアントサイドの認証ロジック検証

クライアントサイドでの認証チェックは、あくまでUX向上のための補助的な機能です。セキュリティの本質はサーバーサイドの認証・認可にあります。

• ルーティング制御：未認証ユーザーが管理画面にアクセスしようとした際、クライアントでリダイレクトするだけでなく、サーバーでも権限チェックがあるか
• 権限チェックのバイパス可能性：JavaScriptを無効化したり、直接APIを叩いたりした際に、不正アクセスが可能でないか
• 状態管理の安全性：Redux/Vuex等の状態管理ツールに機密情報が保存されていないか

ブラウザの開発者ツールでJavaScriptを一時的に無効化し、認証が必要なページに直接URLでアクセスできないか試してみましょう。もしアクセスできてしまう場合、サーバーサイドの認証実装に問題があります。

フロントエンド難読化の妥当性確認

JavaScriptコードの難読化は、ソースコードの可読性を下げてリバースエンジニアリングを困難にする手法ですが、完全なセキュリティ対策にはなりません。

• 難読化の実施状況：本番環境でWebpackやTerserなどで難読化されているか
• ソースマップの削除：.mapファイルが本番環境に残っていないか
• 機密情報の除去：難読化しても、APIキーやシークレットがコード内に残っていないか

Sourcesタブで.jsファイルを確認し、変数名や関数名が短縮されているか、またソースマップファイルが読み込まれていないかをチェックします。

実践的なSPAセキュリティ診断手順

理論を理解したら、次は実際の診断手順に移ります。ここでは、診断前の準備から結果の評価まで、ステップバイステップで解説します。

診断前準備とツール選定

効果的なセキュリティ診断を行うには、適切なツールの選定と環境構築が不可欠です。以下の3つのツールを組み合わせることで、包括的な診断が可能になります。

1. OWASP ZAP（Zed Attack Proxy）

無料で利用できるペネトレーションテストツールです。自動スキャン機能に加え、手動でのリクエスト改ざんやファジングテストが可能です。SPAの場合、Ajax Spider機能を有効にすることで、動的に生成されるコンテンツも検出できます。

2. Burp Suite Community Edition

プロキシツールとして、ブラウザとサーバー間の通信を傍受・解析できます。API通信の詳細な確認やトークンの検証に役立ちます。有料版のProでは、より高度なスキャン機能が利用できます。

3. Chrome DevTools

Googleが提供する開発者向けツールで、ブラウザに標準搭載されています。Network、Application、Consoleの各タブを駆使することで、基本的な脆弱性の多くを発見できます。

自動診断ツールの活用法

OWASP ZAPを使った自動診断の基本的な手順を紹介します。

1. ZAPの起動とプロキシ設定：ZAPを起動し、ブラウザのプロキシ設定でlocalhostの8080ポートを指定
2. 対象サイトの探索：手動でSPAアプリを操作し、ZAPにサイト構造を学習させる（Ajax Spider使用）
3. Active Scanの実行：探索したURLに対して自動スキャンを実行
4. 結果の確認と優先順位付け：High、Medium、Lowのリスクレベルで分類された脆弱性を確認

ただし、自動診断には限界があります。特にビジネスロジックの脆弱性（例：価格改ざん、権限昇格）は手動診断でないと発見できないケースが多いため、自動診断は一次スクリーニングと位置付けましょう。

手動診断のポイントとDevTools活用術

Chrome DevToolsを使った手動診断では、以下のポイントに注目します。

Networkタブでの確認事項

• API通信の一覧を確認し、認証ヘッダー（Authorization）の有無をチェック
• レスポンスボディに機密情報が含まれていないか確認
• エラーレスポンスで詳細なスタックトレースが返されていないか

Applicationタブでの確認事項

• LocalStorage/SessionStorageに保存されているデータの内容を確認
• Cookiesの属性（HttpOnly、Secure、SameSite）が適切に設定されているか
• Service Workerが登録されている場合、キャッシュ内容を確認

Consoleタブでの確認事項

• エラーメッセージで内部情報が露出していないか
• 開発用のデバッグログが本番環境に残っていないか

診断結果の評価基準とリスクレベル判定

発見した脆弱性は、以下の基準でリスクレベルを判定します。

IPA「安全なウェブサイトの作り方」では、脆弱性の深刻度は「影響の大きさ」と「攻撃の容易さ」の2軸で評価することが推奨されています。例えば、XSSが発見された場合でも、管理画面の限定的な機能でのみ発生する場合はMedium、ログイン前の画面で発生する場合はHighと評価します。

フレームワーク別のセキュリティ診断ポイント

React、Vue.js、Angularは、それぞれセキュリティ機能や注意すべきポイントが異なります。ここでは、フレームワーク別の具体的な診断ポイントを解説します。

Reactアプリケーションの診断ポイント

Reactは、デフォルトでXSS対策のエスケープ処理を行いますが、特定の機能を使う際は注意が必要です。

dangerouslySetInnerHTMLの使用箇所チェック

この機能を使うと、HTMLをそのまま挿入できますが、ユーザー入力を直接渡すとXSSの原因になります。診断では、ソースコード内で「dangerouslySetInnerHTML」を検索し、使用箇所があれば以下を確認します。

• ユーザー入力が含まれていないか
• 含まれている場合、DOMPurifyなどのサニタイズライブラリで処理されているか
• 信頼できるソース（CMS等）からのデータでも、バリデーションが行われているか

サードパーティライブラリの脆弱性

npm auditコマンドで依存関係の脆弱性をチェックします。特に、react-router-domやaxiosなど、広く使われているライブラリの既知の脆弱性は必ず対応しましょう。

Vue.jsアプリケーションの脆弱性パターン

Vue.jsも基本的にエスケープ処理を行いますが、v-htmlディレクティブ使用時は注意が必要です。

v-html使用箇所の検証

テンプレート内で「v-html」を検索し、以下を確認します。

• 動的なユーザー入力がバインドされていないか
• バインドされている場合、サニタイズ処理が適切に行われているか
• v-htmlを使わずに、v-textやマスタッシュ記法で代替できないか

VuexのState管理

Vuexストアに機密情報が保存されている場合、Vue DevToolsで簡単に閲覧できてしまいます。診断では、Stateに以下の情報が含まれていないか確認します。

• パスワード、APIキー
• クレジットカード情報
• 個人を特定できる機密情報

Angularの組み込みセキュリティ機能と確認ポイント

Angularは、他のフレームワークと比べてセキュリティ機能が充実しており、多くの攻撃を自動的に防ぎます。

組み込みのXSS対策

Angularは、テンプレート内の値を自動的にサニタイズします。ただし、bypassSecurityTrustHtml等のメソッドを使うと、この保護が無効化されるため、使用箇所を確認します。

• bypassSecurityTrustHtml
• bypassSecurityTrustScript
• bypassSecurityTrustUrl

これらのメソッド使用箇所では、必ずサニタイズ処理が行われているか確認しましょう。

HttpClientのXSRF対策

AngularのHttpClientは、デフォルトでXSRF（クロスサイトリクエストフォージェリ）対策のトークンを送信します。診断では、以下を確認します。

• HttpClientModuleが正しくインポートされているか
• バックエンドがXSRF-TOKENヘッダーを検証しているか
• CookieにXSRF-TOKENが適切に設定されているか

まとめ

この記事では、SPAのセキュリティ診断方法について、リスクの理解から具体的な診断手順、フレームワーク別の注意点まで解説しました。重要なポイントは以下の3つです。

• SPA特有のリスクを理解する：クライアントサイド処理、API依存、動的DOM操作によって、従来と異なる攻撃ポイントが生まれています
• 包括的な診断を実施する：自動診断ツールと手動診断を組み合わせ、トークン管理・API通信・認証ロジック・フロントエンドコードの4つの観点で検証します
• フレームワークの特性を活かす：React/Vue/Angularそれぞれの組み込みセキュリティ機能を正しく理解し、危険な機能の使用を最小限に抑えます

次のステップとしては、まずChrome DevToolsを使って自社のSPAアプリケーションの基本的な診断を実施し、LocalStorageやAPI通信の状況を確認することをおすすめします。その後、OWASP ZAPなどのツールで本格的な診断を行い、発見された脆弱性を優先順位に応じて対応していきましょう。セキュリティは一度対策すれば終わりではなく、フレームワークのアップデートや新たな脅威に応じて継続的に見直すことが重要です。