この記事で分かること
sandbox属性とは何か（iframeの権限を制限する仕組み）- 各
allow-*オプションの意味と使い方 - 同一オリジン制限との関係
- 実務での安全な
iframe埋め込み方法
iframe を安全に埋め込むためには、権限を細かく制御できる sandbox 属性の仕組みを理解することが欠かせません。
この記事では、sandbox の基本ルールから各 allow-* オプションの意味、同一オリジン制限との関係、そして実務での安全な使い方まで分かりやすく解説します。
sandbox 属性とは？
sandbox 属性 は、iframe 内のページに対して
権限を細かく制限するための仕組み です。
sandbox を付けると、iframe 内は「ほぼ何もできない状態」になります。
デフォルトの sandbox（何も許可しない）
<iframe src="page.html" sandbox></iframe>
この状態では以下が禁止されます。
- JavaScript の実行
- フォーム送信
- ポップアップ（
window.open） - 同一オリジン扱い
- トップレベルナビゲーション（親ページの遷移）
つまり、iframe 内は完全に隔離された安全な環境になります。
権限を追加するには allow-* を使う
sandbox は「制限を強める」仕組みなので、
必要な権限だけを allow-* で追加していきます。
allow-scripts（JavaScript を許可）
<iframe src="page.html" sandbox="allow-scripts"></iframe>
ただし、同一オリジンにはなりません。
allow-forms（フォーム送信を許可）
<iframe src="page.html" sandbox="allow-forms"></iframe>
allow-same-origin（同一オリジン扱いにする）
<iframe src="page.html" sandbox="allow-same-origin"></iframe>
これを付けると、iframe 内のページが
同じドメインであるかのように扱われます。
ただし、allow-scripts と組み合わせると
iframe 内のページが完全に自由になるため注意が必要です。
allow-popups（window.open を許可）
<iframe src="page.html" sandbox="allow-popups"></iframe>
allow-top-navigation（親ページの遷移を許可）
<iframe src="page.html" sandbox="allow-top-navigation"></iframe>
悪意あるページに許可すると危険なので、
実務ではほとんど使いません。
よく使われる組み合わせ例
① JavaScript だけ許可したい場合
<iframe src="widget.html" sandbox="allow-scripts"></iframe>
② 同一オリジン扱いにしたい場合
<iframe src="local.html" sandbox="allow-same-origin allow-scripts"></iframe>
※この組み合わせは iframe 内が「ほぼ通常ページ」と同じ権限になるため注意。
③ 外部サービスを安全に埋め込む場合
<iframe src="https://example.com" sandbox="allow-scripts allow-popups"></iframe>
外部サービスの埋め込みでは
allow-same-origin を付けない のが安全です。
sandbox と同一オリジン制限の関係
sandbox を付けると、
allow-same-origin を付けない限り、iframe は別オリジン扱い になります。
つまり、contentDocument や contentWindow にアクセスできません。
実務で sandbox が使われる場面
- 外部サービスの埋め込み（広告・SNS・チャット）
- ユーザー投稿 HTML の安全な表示
- サードパーティウィジェットの隔離
- 安全なプレビュー機能の実装
特に「ユーザーが自由に HTML を書けるサービス」では
sandbox が必須です。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
sandbox属性の仕組みを体系的に理解したいallow-*オプションの意味を正しく把握したい- 同一オリジン制限と
sandboxの関係を整理して学びたい - ネット記事だけだと情報が断片的に感じる
sandbox 属性は、iframe の権限を細かく制御するための重要な仕組みです。
書籍では、ブラウザのセキュリティモデルやオリジンの概念を順序立てて学べるため、
「なぜ sandbox が必要なのか」 を深く理解できます。
いちばんやさしい JavaScript の教本
図解が多く、JavaScript の基本文法やブラウザの動作を視覚的に理解できる入門書です。
iframe の仕組みや、Web セキュリティの基礎となる
「オリジン」「権限」「ブラウザの制限」なども自然に身につきます。
この本で解決できること：
- オリジン（プロトコル・ドメイン・ポート）の概念が理解できる
sandboxがなぜ必要なのかが分かる- 安全な
iframe埋め込みの基礎が身につく
確かな力が身につく JavaScript「超」入門
実務で必要なブラウザ操作・イベント処理・セキュリティの基礎をしっかり学べる入門書です。
sandbox の制限内容や、allow-* の使い方、
外部サービスを安全に埋め込む際の注意点なども理解できます。
この本で解決できること：
allow-scripts・allow-formsなどの意味を体系的に理解できるallow-same-originの危険性を正しく把握できる- 実務で使える安全な
iframe埋め込み方法が身につく
動画で理解を深めたい方へ（Udemy講座）
sandbox の動作は文章だけではイメージしづらく、
実際に「どの権限が禁止されるのか」「allow-* を付けるとどう変わるのか」を
画面で確認すると理解が一気に深まります。
初心者のためのJavaScript 完全入門
JavaScript の基本文法からブラウザの仕組みまで体系的に学べる人気講座です。
iframe の制限や、同一オリジンの概念など、
sandbox を理解するための基礎がしっかり身につきます。
この講座で解決できること：
sandboxのデフォルト制限を視覚的に理解できるallow-scriptsやallow-formsの動作を確認できる- 同一オリジン制限との関係が明確になる
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
実務で必要なブラウザ操作・イベント制御・セキュリティを深く理解したい方に最適な講座です。
allow-same-origin と allow-scripts の
危険な組み合わせなど、実務で役立つ知識も学べます。
この講座で解決できること：
sandboxの各オプションの使いどころが分かる- 外部サービスを安全に埋め込む方法を実例で理解できる
- 現代の Web セキュリティの基礎をまとめて習得できる
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
sandboxの制限内容が曖昧なままになるallow-*の意味を正しく理解できない- 同一オリジン制限との関係が整理できない
- 安全な
iframe埋め込みの判断に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、
sandbox の仕組みや
allow-* の安全な使い方を体系的に理解できるようサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
iframeの権限設計やセキュリティの理解を深めるアドバイスがもらえる- 効率的な学習方法をプロが提案
- エンジニア転職を視野に入れたキャリア相談も可能
Web セキュリティやブラウザの仕組みをしっかり学びたい方には、
DMM WEBCAMP の学習コースも選択肢のひとつです。
sandbox 属性に関するよくある質問（FAQ）
sandbox を付けると何が禁止されますか？
JavaScript、フォーム送信、ポップアップ、同一オリジン扱いなど、ほぼすべての権限が禁止されます。
allow-same-origin を付けるとどうなりますか？
iframe 内が同一オリジン扱いになり、contentDocument などにアクセスできるようになります。
外部サービスを安全に埋め込むにはどうすればいいですか？
allow-scripts や allow-popups を必要に応じて付け、allow-same-origin は付けないのが一般的です。
sandbox は同一オリジン制限を解除できますか？
いいえ。sandbox は制限を強める仕組みであり、解除するものではありません。
まとめ
iframe の sandbox 属性は、
権限を細かく制御して安全に埋め込むための重要な仕組み です。
sandbox→ すべての権限を禁止allow-*→ 必要な権限だけ追加allow-same-origin+allow-scriptsは強力なので注意
外部サービスの埋め込みや安全なコンテンツ表示には
sandbox を正しく使うことが欠かせません。
