---
title: "クリックジャッキングを含むHTMLを共有するときのリスクと対策"
description: "AI生成HTMLのクリックジャッキングリスクを理解して対策したい担当者向け。攻撃の仕組み・ヘッダー設定・CSSチェック・ギガサイト便での対処法を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/clickjacking-risk-risk-countermeasure"
markdown: "https://giga-site.com/articles/clickjacking-risk-risk-countermeasure/index.md"
category: "セキュリティ"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# クリックジャッキングを含むHTMLを共有するときのリスクと対策
自社のHTMLが攻撃者にiframeで悪用されるクリックジャッキングリスクは、適切なHTTPヘッダーとCSS設計の見直しで大幅に軽減できます。リスクの仕組みを理解した上で、AI生成HTMLに特有の注意点と具体的な対策を整理しました。
> Source HTML: https://giga-site.com/articles/clickjacking-risk-risk-countermeasure
> Article index: https://giga-site.com/articles/index.md
## なぜ危ないのか
クリックジャッキング攻撃は「UIレッドレッシング」とも呼ばれ、正規のウェブページを透明なiframeで覆い、ユーザーが別のものをクリックしていると思い込ませます。AI生成HTMLが社内の承認フォームや設定画面の場合、攻撃者はそのページを透明にして自分のサイトに重ね、被害者に無意識に承認・設定変更をさせます。
AI生成HTMLには時折、レイアウト調整のためのオーバーレイ要素が含まれます。これらが意図せずクリックジャッキングの構造を作り出すことがあります。見た目では判断できないため、CSSの検査とHTTPヘッダーの確認が必要です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
## ソースで見る場所
CSSで`position:fixed`または`position:absolute`が設定された要素のうち、`width:100%`・`height:100%`・`top:0`・`left:0`を持つものを探します。これらがフルスクリーンオーバーレイになっていないか確認します。AIが生成するモーダルやローディング画面がこのパターンに当てはまることが多いです。
JavaScriptに`document.body.style.pointerEvents`や特定要素の`pointerEvents`をmanipulateするコードがある場合も確認します。pointer-eventsをoffにした要素は視覚的に存在するのにクリックが素通りするため、意図しないUXや攻撃の素地になりえます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## 安全に共有する設定
ギガサイト便でHTMLを共有する際は、管理画面でセキュリティヘッダーの設定を確認します。`X-Frame-Options: DENY`が設定されていれば、共有したHTMLが第三者のサイトにiframeで埋め込まれることを防げます。この設定はHTMLの中身に関わらず有効です。
パスワード認証に加えて会社ドメイン認証を使うと、そもそも認証を通過した社員・パートナー以外にはコンテンツが見えないため、クリックジャッキングの対象となる不特定多数へのアクセスを遮断できます。認証の多重化はクリックジャッキング以外の脅威にも有効な多層防御です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## 再発防止ルール
AI生成コードのCSSレビューで「フルスクリーンオーバーレイの有無」を確認するステップを設けます。正規の用途（モーダル・ドロワー）か、不要な残存物かを判断し、不要なオーバーレイはコードから削除します。特にローディングスピナーが除去されずに残ることが多いです。
本番公開のためのHTMLを生成する際は、AIへのプロンプトに「X-Frame-Options対策のためのframe-busterスクリプト（`if(top !== self) top.location = self.location`）をheadに追加すること」と指示します。これはHTTPヘッダーの代替手段として機能し、古いブラウザ環境でも有効です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## よくある質問
### frame-busterスクリプトとX-Frame-Optionsヘッダー、どちらを優先すべきですか？
HTTPヘッダーのX-Frame-Optionsをサーバー側で設定するのが第一選択です。frame-busterスクリプトはJavaScriptが無効な環境では動作しないため補助的な手段です。可能であれば両方を設定することをお勧めします。
### 自社のHTMLがクリックジャッキングに使われているか発見する方法はありますか？
完全な検出は難しいですが、Google Search Consoleで自社URLへの外部からの埋め込み参照を確認できる場合があります。また`Referer`ヘッダーのログを解析すると、iframeで読み込んでいる外部サイトのURLが記録されているケースがあります。
### モーダルやサイドドロワーを使うHTMLでもクリックジャッキング対策は必要ですか？
モーダルを含むページが攻撃対象になりやすいです。特に「確認」「送信」「承認」のようなボタンがあるページはクリックジャッキングの標的になりやすいため、X-Frame-Optionsの設定は必須と考えてください。
## 関連記事
- [http混在を含むHTMLを共有するときのリスクと対策](https://giga-site.com/articles/mixed-content-risk-risk-countermeasure/index.md)
- [XSSを含むHTMLを共有するときのリスクと対策](https://giga-site.com/articles/xss-risk-risk-countermeasure/index.md)
- [オープンリダイレクトを含むHTMLを共有するときのリスクと対策](https://giga-site.com/articles/open-redirect-risk-risk-countermeasure/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)
- [クリックジャッキングを防ぐAIプロンプトと公開前スキャン](https://giga-site.com/articles/clickjacking-risk-prompt-scan/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "クリックジャッキングを含むHTMLを共有するときのリスクと対策",
"description": "AI生成HTMLのクリックジャッキングリスクを理解して対策したい担当者向け。攻撃の仕組み・ヘッダー設定・CSSチェック・ギガサイト便での対処法を解説します。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/clickjacking-risk-risk-countermeasure",
"url": "https://giga-site.com/articles/clickjacking-risk-risk-countermeasure",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "セキュリティ",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "frame-busterスクリプトとX-Frame-Optionsヘッダー、どちらを優先すべきですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "HTTPヘッダーのX-Frame-Optionsをサーバー側で設定するのが第一選択です。frame-busterスクリプトはJavaScriptが無効な環境では動作しないため補助的な手段です。可能であれば両方を設定することをお勧めします。"
}
},
{
"@type": "Question",
"name": "自社のHTMLがクリックジャッキングに使われているか発見する方法はありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "完全な検出は難しいですが、Google Search Consoleで自社URLへの外部からの埋め込み参照を確認できる場合があります。また`Referer`ヘッダーのログを解析すると、iframeで読み込んでいる外部サイトのURLが記録されているケースがあります。"
}
},
{
"@type": "Question",
"name": "モーダルやサイドドロワーを使うHTMLでもクリックジャッキング対策は必要ですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "モーダルを含むページが攻撃対象になりやすいです。特に「確認」「送信」「承認」のようなボタンがあるページはクリックジャッキングの標的になりやすいため、X-Frame-Optionsの設定は必須と考えてください。"
}
}
]
}
```