なぜ危ないのか
AIはユーザーの指示を最大限に実現しようとするため、「おしゃれなポップアップ」と指示すると`position:fixed`で全画面を覆うオーバーレイを生成することがあります。このオーバーレイがクリックジャッキングの手口と構造的に同一であるため、悪意ある第三者が同じ手法を悪用できる下地になります。
特にAIが生成するCTAボタン周辺のHTML/CSSは、コンバージョン率を上げるデザインパターンを模倣しているためz-indexを高く設定しがちです。社外共有時にボタンの裏に別の要素が重なっていると、受け取った相手が意図せず何かを実行させられるリスクがあります。公開前に構造を必ず確認してください。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
ソースで見る場所
生成されたHTMLのCSSブロックを開き、`opacity: 0`と`pointer-events: none`の組み合わせ、または`visibility: hidden`を解除しているJavaScriptがないか確認します。特にクリックイベントリスナーを要素に後付けしているコードは、視覚的に見えない要素に対してイベントを発火させる可能性があります。
`document.createElement('iframe')` や `innerHTML`でiframeを動的に挿入しているJavaScriptも要注意です。静的なHTMLソースにはiframeが見当たらなくても、スクリプト実行後にDOMに挿入される場合があります。ブラウザの開発者ツールで「要素」タブを開き、ページ読み込み後のDOMツリーを目視確認してください。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
安全に共有する設定
生成したHTMLをCDNにアップする前に、レスポンスヘッダーに`Content-Security-Policy: frame-ancestors 'none'`を付与するよう設定します。Cloudflare PagesやNetlifyならHTTPSヘッダーをtomlやyamlで一行追記するだけで適用でき、実装コストがほぼゼロです。
社外レビューには特定のメールアドレスまたは会社ドメインでのみ閲覧できる認証付きURLを利用してください。ギガサイト便のような仕組みを使うと、URLが流出してもドメイン認証を通らない人は中身を見られないため、クリックジャッキングのための埋め込みURLとして悪用される経路を断てます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止ルール
AIへのプロンプト末尾に「セキュリティ制約: iframeの使用禁止、z-indexは100以下、外部scriptタグの読み込み禁止、全画面オーバーレイ禁止」という定型文を必ず付け加えます。この制約を外部サービスのシステムプロンプトに設定すれば、チームメンバーが意識しなくても自動で適用されます。
生成後のスキャンとして `grep -Ein '(opacity\s*:\s*0|z-index\s*:\s*[0-9]{4,}|<iframe)' *.html` をMakefileのターゲットに登録しておきます。警告が出たらレビュー必須とするルールをチームの開発規約に明記すれば、個人の注意力に依存しない仕組みが作れます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
プロンプトに「セキュリティに気をつけて」と書くだけでは不十分ですか？
抽象的な指示はAIが解釈を省略しやすく効果が不安定です。「iframeを使わない」「z-indexは100以下」のように具体的な制約を列挙すると生成コードへの反映率が上がります。
スキャンコマンドで何も検出されなければ絶対に安全ですか？
grepによる静的スキャンはJavaScriptで動的生成される要素を検出できません。スキャン後にブラウザの開発者ツールでDOMを確認する手順を必ず組み合わせてください。
外部のCDN（jQueryなど）を読み込む場合はどうすればよいですか？
使用するCDN URLをCSPのscript-srcホワイトリストに明示的に追記してください。ワイルドカードの'*'を指定すると任意の外部スクリプトが実行可能になり、XSSとクリックジャッキングのリスクを高めます。