なぜ危ないのか
クリックジャッキングは攻撃者が透明なiframeで正規ページを覆い、被害者に見えないボタンをクリックさせる手法です。AI生成のHTMLが透明度を変更するCSSやオーバーレイのスタイルを含んでいると、それ自体が攻撃に使われる素材になりえます。特に`opacity:0`や`z-index`が高い要素が存在する場合は意図を確認する必要があります。
自社のHTMLが攻撃者のサイトにiframeで埋め込まれた場合、ボタンクリックが乗っ取られ、予期しないフォーム送信・SNS操作・設定変更が実行されます。AI生成の管理画面HTMLや設定フォームのHTMLが被害を受けやすいパターンです。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
ソースで見る場所
HTMLのCSSで`opacity:0`・`visibility:hidden`と組み合わせて`position:absolute`が設定されている要素を確認します。AIが透明なオーバーレイを意図せず生成することはまれですが、レイアウト調整の過程でそのような構造が残る場合があります。`<style>`タグ内とインラインスタイルの両方を検索してください。
HTTPレスポンスヘッダーを確認します。ギガサイト便のURLに対してcurlを実行し、`X-Frame-Options`や`Content-Security-Policy: frame-ancestors`が設定されているか確認します。`curl -I https://your-preview-url.gigasite.com`でヘッダー一覧が表示されます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
安全に共有する設定
HTMLのheadタグ内に`<meta http-equiv='X-Frame-Options' content='DENY'>`を追加します。これはHTTPヘッダーと同等の効果を持つわけではありませんが（ブラウザによっては無視される）、サーバー設定と合わせて多層防御の一環として有効です。
ギガサイト便では配信時に`X-Frame-Options: SAMEORIGIN`ヘッダーが設定されるかどうかを確認します。設定されている場合は、外部サイトにiframeで埋め込まれることを防げます。プレビューURLを発行する際の設定オプションで確認してください。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止ルール
AIプロンプトに「透明なオーバーレイ要素・opacity:0の要素・pointer-events操作を含めないこと。フォームや操作可能なUIはすべてユーザーに可視の状態で実装すること」と追記します。UIの意図的な透明化は用途が限られるため、禁止しても機能に支障が出ることは少ないです。
公開前チェックリストに「DevToolsのElements検査でopacity:0またはvisibility:hiddenの要素が存在しないこと」を追加します。DevToolsのConsoleで`document.querySelectorAll('[style*="opacity: 0"],[style*="opacity:0"]').length`を実行すると件数が即確認できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
X-Frame-Optionsヘッダーが設定されていないとどんな被害が起きますか？
攻撃者が自分のサイトにiframeで自社ページを読み込み、透明なレイヤーを重ねてユーザーのクリックを乗っ取れます。フォーム送信・SNS操作・設定変更が被害者の意図なく実行されます。
opacity:0の要素はクリックジャッキング以外の用途でも使いますが、全部禁止すべきですか？
アニメーションの初期状態やアクセシビリティ用の非表示ラベルでopacity:0が使われるケースは正常です。問題なのはクリック可能なボタン・フォームに重ねる形で使われる場合です。用途に応じて判断してください。
クリックジャッキング対策はHTMLだけで完結しますか？
HTMLのmetaタグだけでは不十分なケースがあります。最も確実なのはサーバー（またはCDN・ギガサイト便）がHTTPヘッダーでX-Frame-OptionsやCSP frame-ancestorsを設定する方法です。両方を組み合わせることをお勧めします。