セキュリティ

AI生成HTMLにlocalStorage内の個人情報が残っていないか確認する方法

AIが生成したHTMLをブラウザで動かすと、JavaScriptがlocalStorageにデータを書き込んでいることがあります。localStorageは同じオリジンのすべてのページから読み取れるため、テスト中に入力した個人情報や、AIがサンプルとして埋め込んだ値が残ったままになるリスクがあります。公開前に確認すべき手順を具体的に解説します。

なぜ危ないのか

localStorageはブラウザに永続的に保存されるキー・バリューストアで、JavaScriptから`localStorage.setItem('key', 'value')`で書き込み、`localStorage.getItem('key')`で読み出します。AIが生成したHTMLにlocalStorageを使うコードが含まれている場合、ページを開いた際に自動的にデータが書き込まれることがあります。共有URLを開いた相手のブラウザに個人情報が保存されると、その後にそのデバイスを使う別の人物も情報にアクセスできるリスクが生まれます。

localStorageの問題はページのHTMLソースを見ただけではわからない点です。JavaScriptのコードを詳しく読むか、実際にブラウザで動かしてApplicationパネルを確認しないと、何が保存されているかがわかりません。特に複雑なインタラクションを含むAI生成ページでは、どのタイミングでlocalStorageに書き込みが発生するかを追跡するのが難しいことがあります。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

ソースで見る場所

まずHTMLに含まれるJavaScriptコードを全文確認し、`localStorage`という文字列をCtrl+Fで検索します。`setItem`が含まれる行がある場合、書き込まれるキー名と値の中身を確認してください。特に変数から値を書き込む場合(`localStorage.setItem('user', userData)`)は、`userData`の中身がどこから来るかを追ってください。

ブラウザで実際にページを開いてDevToolsのApplicationタブを開き、左側ペインの「Local Storage」から対象のオリジンを選択すると、現在保存されているキー・バリューの一覧が表示されます。一覧を確認して個人情報らしき値が含まれていないか確認し、不要なデータはこのパネルから削除できます。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

安全に共有する設定

共有前の安全対策として最も効果的なのは、localStorageへの書き込みコードをモック化または無効化することです。AIが生成したJSの`localStorage.setItem`を`//localStorage.setItem`のようにコメントアウトするか、`const noop = () => {};`を定義して`localStorage.setItem = noop;`のように上書きする方法があります。

ページを開いたタイミングでlocalStorageをクリアするコードを追加する方法もあります。`window.addEventListener('load', () => localStorage.clear())`をscriptタグ内の先頭に追加すると、ページロード時に全データがクリアされます。ただしこの方法はページの機能に影響が出る可能性があるため、動作確認を行った上で採用してください。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

再発防止ルール

AIへのプロンプトに「localStorageにユーザーの個人情報を書き込むコードを生成しないこと。デモ目的のデータ保存が必要な場合はsessionStorageを使うか、変数のみで管理すること」と明示します。sessionStorageはタブを閉じると自動削除されるため、デモ用途には適しています。

共有後のケアとして、レビューが完了した後に共有URLのページをブラウザで開き、DevToolsのApplicationパネルで「Clear All」を実行してlocalStorageを空にします。その後URLを無効化することで、次のユーザーが古いデータにアクセスするリスクを排除できます。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

よくある質問

localStorageに残ったデータはURLを変えれば引き継がれませんか?

localStorageはオリジン(ドメイン)ごとに管理されるため、同じドメインの別URLに移動してもデータは維持されます。別オリジンに移動した場合は引き継がれません。共有サービスのドメインが同じであれば注意が必要です。

sessionStorageはlocalStorageより安全ですか?

sessionStorageはタブを閉じると自動的にクリアされるため、デモ用途にはlocalStorageより適しています。ただし同じタブで別のページに遷移した場合はデータが残るため、完全に安全というわけではありません。

localStorageのデータはサーバーに送信されますか?

localStorageのデータは自動的にサーバーへ送信されません。ただしJavaScriptのコードがlocalStorageから読み取って外部APIへ送信する処理を含む場合は、そのコードを通じてサーバーへ到達します。AIが生成したコードの送信処理を確認することが重要です。

関連記事

「セキュリティ」の記事をもっと見る →