MENU

フロントエンド完結型アプリに潜む主なセキュリティリスク

以下は、代表的なリスクと注意点です。

1. HTMLインジェクション（XSS）

  • 内容: innerHTMLなどにユーザー入力をそのまま挿入すると、任意のHTMLやスクリプトが実行される。
  • 対策: textContentで出力／独自エスケープ関数の導入。

2. localStorageの過信

  • 内容: 認証情報や重要データをlocalStorageに保存すると、誰でも開発者ツールから見れてしまう。
  • 例: localStorage.setItem("authToken", "abcdef123") → 誰でもコピー可能
  • 対策: localStorageは非機密なデータ専用とし、削除機能や有効期限管理も検討。

3. FileReaderの悪用

  • 内容: FileReaderで読み込んだファイルの中身を、エスケープせずに表示するとHTMLインジェクションの経路になり得る。
  • 例: HTML形式のファイルやSVGにスクリプトを埋め込まれた場合
  • 対策: 読み込んだ内容を画面に出すときも必ずエスケープ／textContent使用。

4. 拡張子偽装・ファイルダウンロードの危険性

  • 内容: ユーザーに提供するダウンロード機能で、.exeや.htmlなど誤認しやすい拡張子を含むファイル名を使うと、悪用される可能性。
  • 対策: 安全な拡張子のみを許可する。ファイル名にユーザー入力を使うときはサニタイズ必須。

5. DoS的挙動（リソース消費）

  • 内容: 膨大な入力データ（例：数十MBの画像や巨大なCSV）でブラウザをクラッシュさせる攻撃。
  • 対策: ファイルサイズ上限を設ける。読み込む行数・要素数に制限を設ける。

6. URLインジェクション（location.hrefなどの誤用）

  • 内容: window.location.href = userInput のようにURLジャンプ処理をユーザー任せにすると、任意サイトへの遷移・フィッシングに加担してしまう。
  • 対策: 遷移先のホワイトリスト化 or 遷移前に確認ダイアログを挿入。

7. Web Worker／WASMの悪用

  • 内容: サードパーティのWASMやWorkerスクリプトを使用すると、予期しない計算負荷やセキュリティホールが混入する可能性。
  • 対策: ライブラリの信頼性確認／使用コードの簡潔性を保つ。

🧭 実務上の心得

観点ポイント
セキュリティはUIより優先画面がきれいでも、中身が危険なら本末転倒
開発時点で組み込む後付け対策は漏れやすい。設計時から脅威モデルを想定すること
ChatGPTも安心材料にしない出力されたコードも必ず目視確認とテストが必要

✅ まとめ表：フロントエンドアプリの主要セキュリティリスク

リスク名内容主な対策
HTMLインジェクションユーザー入力→HTML反映textContent or escapeHTML関数
localStorage漏洩機密情報保存保存回避・消去機能追加
FileReader出力XSSファイル内容をHTMLにtext表示 or エスケープ処理
ファイル名偽装.exe/.html誤誘導拡張子制限・ファイル名検査
ブラウザ過負荷巨大ファイル・無限ループサイズ上限・UIフリーズ対策
URLインジェクションユーザー入力URL遷移遷移確認 or ホワイトリスト化
コラム