---
title: "X-Frame-Optionsとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "X-Frame-Optionsの仕組みをHTML共有・AI生成ページの埋め込み場面に絞って解説します。iframe表示ができない原因の特定方法と、安全な埋め込みを実現するための設定判断を提供します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-x-frame-options-html-share"
markdown: "https://giga-site.com/articles/what-is-x-frame-options-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# X-Frame-Optionsとは？HTML共有・AI生成サイトでの意味をやさしく解説
AIが作ったページを別のサイトのiframeに埋め込んで使おうとしたら表示されなかった、という経験はないでしょうか。この制限を制御しているのが X-Frame-Options ヘッダーです。共有サービスの配信設定との関係を理解しておくと、埋め込みトラブルを迷わず解決できます。
> Source HTML: https://giga-site.com/articles/what-is-x-frame-options-html-share
> Article index: https://giga-site.com/articles/index.md
## ひとことで言うと
X-Frame-Options とは、そのページを iframe・frame・embed タグで別のページに埋め込むことを許可するかどうかを指示するHTTPレスポンスヘッダーです。`DENY` を指定するとどこからも埋め込み不可、`SAMEORIGIN` を指定すると同じオリジンのページからのみ埋め込みを許可し、異なるドメインからは拒否します。
このヘッダーはクリックジャッキング攻撃（透明なiframeをページ上に重ね、ユーザーに気づかせずクリックさせる攻撃）を防ぐためのセキュリティ対策です。共有サービスが `X-Frame-Options: DENY` を設定している場合、そのプレビューURLを自社サイトのiframeで表示しようとしても、ブラウザが拒否して空白になります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
## HTML共有で関係する場面
社内ポータルや自社サービスのダッシュボードにAI生成ページをiframeで埋め込みたい場合、共有サービスが X-Frame-Options または CSP の `frame-ancestors` ディレクティブで埋め込みを制限していると表示できません。この場合は埋め込みではなくリンクで誘導する方法に切り替えるか、埋め込みに対応した別のサービスを選択してください。
ギガサイト便のようなプレビュー専用サービスでは、アップロードしたHTMLを表示するために独自のiframe構成を使っていることがあります。この場合、アップロードコンテンツ自体に `X-Frame-Options: DENY` を返す設定があると、サービスのUIがコンテンツを表示できなくなる可能性があります。独自設定でヘッダーを追加する場合は埋め込み表示への影響を確認してください。
## よくある誤解
「X-Frame-Options はすでに古い仕様で使われていない」という誤解があります。CSP の `frame-ancestors` が推奨される新しい方法ですが、Internet Explorer など古いブラウザは `frame-ancestors` に対応しておらず、後方互換性のために X-Frame-Options も併用されています。現時点では両方を設定することが推奨されます。
「SAMEORIGIN にすれば自分のドメインからは自由に埋め込める」と思われがちですが、共有サービスが自分のドメインとは別のドメインでプレビューURLを発行している場合、自社サイトから見ると「別オリジン」になります。この場合 SAMEORIGIN では不十分で、特定ドメインを許可するには CSP の `frame-ancestors 'https://yourdomain.com'` を使う必要があります。
## 安全に使うための注意点
AI生成ページを自社サービスに埋め込む予定がある場合、共有URLを発行する前にサービスの仕様として「iframe埋め込みに対応しているか」を確認してください。対応していない場合は埋め込みをあきらめてリンク方式にするか、コンテンツを自社サーバーから直接配信する方法を検討してください。
独自に X-Frame-Options を設定できる環境では、共有コンテンツを特定の社内ドメインのみに許可する場合に `frame-ancestors` を活用してください。ただし frame-ancestors は X-Frame-Options より細かく制御できる一方、古いブラウザでは動作しない点を考慮し、必要に応じて両方のヘッダーを設定してください。
## よくある質問
### 共有サービスのプレビューURLをiframeで埋め込もうとしたら表示されません。確認方法は？
ブラウザの開発者ツールのコンソールに 'X-Frame-Options' や 'frame-ancestors' を含むエラーが出ていれば、埋め込みが禁止されています。同じプレビューURLを新しいタブで直接開けば表示されるかで切り分けができます。
### X-Frame-Options と CSP の frame-ancestors はどちらを優先すべきですか？
両方設定が推奨です。モダンブラウザは frame-ancestors を優先しますが、IEなど古い環境では X-Frame-Options のみ認識します。新規設定では frame-ancestors でより細かい制御を行い、後方互換のために X-Frame-Options も付与してください。
### AI生成ページに X-Frame-Options: DENY を設定する必要はありますか？
クリックジャッキングのリスクがある認証ページやボタン操作が重要なページには設定を推奨します。読み取り専用のHTMLプレビューページで第三者による埋め込みを許容するなら DENY は不要ですが、共有サービス側の設定に従うのが基本です。
## 関連記事
- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "X-Frame-Optionsとは？HTML共有・AI生成サイトでの意味をやさしく解説",
"description": "X-Frame-Optionsの仕組みをHTML共有・AI生成ページの埋め込み場面に絞って解説します。iframe表示ができない原因の特定方法と、安全な埋め込みを実現するための設定判断を提供します。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/what-is-x-frame-options-html-share",
"url": "https://giga-site.com/articles/what-is-x-frame-options-html-share",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "用語解説",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "共有サービスのプレビューURLをiframeで埋め込もうとしたら表示されません。確認方法は？",
"acceptedAnswer": {
"@type": "Answer",
"text": "ブラウザの開発者ツールのコンソールに 'X-Frame-Options' や 'frame-ancestors' を含むエラーが出ていれば、埋め込みが禁止されています。同じプレビューURLを新しいタブで直接開けば表示されるかで切り分けができます。"
}
},
{
"@type": "Question",
"name": "X-Frame-Options と CSP の frame-ancestors はどちらを優先すべきですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "両方設定が推奨です。モダンブラウザは frame-ancestors を優先しますが、IEなど古い環境では X-Frame-Options のみ認識します。新規設定では frame-ancestors でより細かい制御を行い、後方互換のために X-Frame-Options も付与してください。"
}
},
{
"@type": "Question",
"name": "AI生成ページに X-Frame-Options: DENY を設定する必要はありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "クリックジャッキングのリスクがある認証ページやボタン操作が重要なページには設定を推奨します。読み取り専用のHTMLプレビューページで第三者による埋め込みを許容するなら DENY は不要ですが、共有サービス側の設定に従うのが基本です。"
}
}
]
}
```