---
title: "AI生成HTMLにクリックジャッキングが残っていないか確認する方法"
description: "AI生成HTMLのクリックジャッキングリスクを公開前に排除したい担当者向け。HTMLのソースとHTTPヘッダーで確認すべき箇所と、ギガサイト便での安全な共有設定を説明します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/clickjacking-risk-check"
markdown: "https://giga-site.com/articles/clickjacking-risk-check/index.md"
category: "セキュリティ"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# AI生成HTMLにクリックジャッキングが残っていないか確認する方法

AI生成のHTMLが第三者のサイトにiframeで埋め込まれてクリックジャッキング攻撃に使われないよう、公開前に確認すべきポイントを解説します。X-Frame-Optionsヘッダーの設定漏れや透明オーバーレイのコードが残っていないかを確認する方法をまとめました。

> Source HTML: https://giga-site.com/articles/clickjacking-risk-check
> Article index: https://giga-site.com/articles/index.md

## なぜ危ないのか

クリックジャッキングは攻撃者が透明な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を設定する方法です。両方を組み合わせることをお勧めします。

## 関連記事

- [クリックジャッキングを含むHTMLを共有するときのリスクと対策](https://giga-site.com/articles/clickjacking-risk-risk-countermeasure/index.md)
- [社外レビュー前にクリックジャッキングを検出するチェックリスト](https://giga-site.com/articles/clickjacking-risk-external-review-checklist/index.md)
- [クリックジャッキングを防ぐAIプロンプトと公開前スキャン](https://giga-site.com/articles/clickjacking-risk-prompt-scan/index.md)
- [AI生成HTMLにhttp混在が残っていないか確認する方法](https://giga-site.com/articles/mixed-content-risk-check/index.md)
- [http混在を含むHTMLを共有するときのリスクと対策](https://giga-site.com/articles/mixed-content-risk-risk-countermeasure/index.md)
- [AI生成HTMLにXSSが残っていないか確認する方法](https://giga-site.com/articles/xss-risk-check/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "AI生成HTMLにクリックジャッキングが残っていないか確認する方法",
  "description": "AI生成HTMLのクリックジャッキングリスクを公開前に排除したい担当者向け。HTMLのソースとHTTPヘッダーで確認すべき箇所と、ギガサイト便での安全な共有設定を説明します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/clickjacking-risk-check",
  "url": "https://giga-site.com/articles/clickjacking-risk-check",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "セキュリティ",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "X-Frame-Optionsヘッダーが設定されていないとどんな被害が起きますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "攻撃者が自分のサイトにiframeで自社ページを読み込み、透明なレイヤーを重ねてユーザーのクリックを乗っ取れます。フォーム送信・SNS操作・設定変更が被害者の意図なく実行されます。"
      }
    },
    {
      "@type": "Question",
      "name": "opacity:0の要素はクリックジャッキング以外の用途でも使いますが、全部禁止すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "アニメーションの初期状態やアクセシビリティ用の非表示ラベルでopacity:0が使われるケースは正常です。問題なのはクリック可能なボタン・フォームに重ねる形で使われる場合です。用途に応じて判断してください。"
      }
    },
    {
      "@type": "Question",
      "name": "クリックジャッキング対策はHTMLだけで完結しますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTMLのmetaタグだけでは不十分なケースがあります。最も確実なのはサーバー（またはCDN・ギガサイト便）がHTTPヘッダーでX-Frame-OptionsやCSP frame-ancestorsを設定する方法です。両方を組み合わせることをお勧めします。"
      }
    }
  ]
}
```