HTML
🔒 iframe の sandbox で JS が動かない
iframeのsandbox属性でJSが動かない
😰 こんな症状
iframeにsandbox属性をつけたら中のJavaScriptが動かなくなった。allow-scriptsを追加しよう。
🔍 原因
sandbox属性を指定すると、デフォルトでスクリプト実行・フォーム送信・ポップアップなどすべてが制限されるよ。必要な権限を個別にallow-xxxで許可する必要がある。
❌ エラーが起きるコード
<iframe src="page.html" sandbox></iframe>
<!-- sandbox単体だとJS実行が禁止される -->✅ 直し方
1. sandbox='allow-scripts'を追加する。 2. 必要に応じてallow-same-origin、allow-formsも追加。 3. sandbox属性自体を外す（セキュリティが不要な場合）。
✅ 修正後のコード
<iframe src="page.html" sandbox="allow-scripts allow-same-origin"></iframe>
<!-- 必要な権限を明示的に許可 -->この解決法は役立ちましたか？
🔗 関連するエラー
- リンクをクリックしても何も起きない — href 属性の書き忘れ
- フォームの送信ボタンが動かない — type="submit" の書き忘れ
- iframeが表示されない — 埋め込み先がiframeを拒否している
- iframeの高さが合わない — iframe の高さが固定されている
- 画像が表示されない — 画像パスが間違っている
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説