html の iframe（インラインフレーム）とは、一つのページ内に小窓を作ってその内部に別ページや別サイトを表示させるタグです。iframe 内のページは自分で作る事もありますが、他の人が作る事もあります。どういう事かと言うと、ページ内に Google マップを埋め込む時、Youtube のプレイヤーを埋め込む際に使われるのも iframe なのです。iframe 内を自分で作った場合は自由に弄る事ができますが、他人（別サイト）が作った場合は内部を自由に触る事はできません。
という事で本題ですが、iframe 内で動作する javascript を無効にしたいという必要性が出てきました。iframe 内は別サイトだったので自由に触る事はできません。ブラウザでは閲覧者が自由に javascript のオンオフを切り替える事ができます。それと同様にウェブサイトでも iframe 内の javascript のオンオフを切り替えられないだろうか？と考えました。
実はそんな方法がありました。
iframeのsandbox属性
<iframe src="URL" sandbox />
iframe タグに html5 から新しく追加された sandbox 属性を使用します。sandbox 属性を追加すると、その iframe 内のコンテンツは全てのスクリプトが無効化され、フォームやリンクすらも無効化されます。
sandbox 属性は iframe 内の悪意のあるコンテンツからの攻撃を避ける為に作られたものです。サイト制作者の判断で、iframe 内の javascript を無効にする事が可能になります。
しかし、javascript もリンクすらも無効化されてしまうのでこのままでは使いにくいかもしれません。sandbox 属性にはこの iframe 内の制限を緩める方法があります。
iframeの制限を緩める方法
- allow-forms：スクリプトの実行を許可
- allow-forms：フォームの実行を許可
- allow-top-navigation：同ウィンドウで開くリンクを許可
- allow-popups：別窓で開くリンクを許可
制限を緩める項目はいくつかありますが、使いそうなものだけ列挙してみました。これは以下のように指定して使います。
<iframe src="URL" sandbox="allow-top-navigation" />
これで iframe 内の javascript は無効にするけどリンクは許可するというような柔軟な制限方法が実現できます。
<iframe src="URL" sandbox="allow-top-navigation allow-popups" />
このように複数の属性を指定する事も可能です。
ただし、この sandbox 属性は Internet Explorer 9 以下では対応していません。