---
title: "クリックジャッキングを防ぐAIプロンプトと公開前スキャン"
description: "AIプロンプトの書き方を工夫してクリックジャッキングの原因となるコードをそもそも生成させたくない方向け。プロンプト制約の具体文例と、生成済みHTMLを素早くスキャンするコマンドを組み合わせた二段構えの防止策を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/clickjacking-risk-prompt-scan"
markdown: "https://giga-site.com/articles/clickjacking-risk-prompt-scan/index.md"
category: "セキュリティ"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# クリックジャッキングを防ぐAIプロンプトと公開前スキャン

AIにHTMLを生成してもらう段階でクリックジャッキングの原因になる要素を作らせないようにすれば、公開前の修正コストを大幅に削減できます。この記事では、生成プロンプトへの制約追記と、生成後に1分で走らせられるコマンドラインスキャンの両面からクリックジャッキングを防ぐ方法を具体的に説明します。

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

## なぜ危ないのか

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とクリックジャッキングのリスクを高めます。

## 関連記事

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

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "クリックジャッキングを防ぐAIプロンプトと公開前スキャン",
  "description": "AIプロンプトの書き方を工夫してクリックジャッキングの原因となるコードをそもそも生成させたくない方向け。プロンプト制約の具体文例と、生成済みHTMLを素早くスキャンするコマンドを組み合わせた二段構えの防止策を解説します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/clickjacking-risk-prompt-scan",
  "url": "https://giga-site.com/articles/clickjacking-risk-prompt-scan",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "セキュリティ",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "プロンプトに「セキュリティに気をつけて」と書くだけでは不十分ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "抽象的な指示はAIが解釈を省略しやすく効果が不安定です。「iframeを使わない」「z-indexは100以下」のように具体的な制約を列挙すると生成コードへの反映率が上がります。"
      }
    },
    {
      "@type": "Question",
      "name": "スキャンコマンドで何も検出されなければ絶対に安全ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "grepによる静的スキャンはJavaScriptで動的生成される要素を検出できません。スキャン後にブラウザの開発者ツールでDOMを確認する手順を必ず組み合わせてください。"
      }
    },
    {
      "@type": "Question",
      "name": "外部のCDN（jQueryなど）を読み込む場合はどうすればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "使用するCDN URLをCSPのscript-srcホワイトリストに明示的に追記してください。ワイルドカードの'*'を指定すると任意の外部スクリプトが実行可能になり、XSSとクリックジャッキングのリスクを高めます。"
      }
    }
  ]
}
```