iframeのsandbox属性の動的設定

sandbox属性とは

sandbox属性とはiframe内の要素に対し制約を設定する機能です。
iframe内でjavascriptの実行を無効などすることができます。
属性は以下のような形式で設定することができます。

<iframe sandbox="allow-forms allow-scripts"></iframe>

※設定できる属性についてはMDNを参照。

動的設定方法

sandbox属性は属性を変更するだけでは反映されません。sandbox属性の変更を反映させるには、フレームを再読み込みする必要があります。

<iframe src="frame"></iframe>

const iframe = document.getElementById('frame');
iframe.sandbox.add("allow-top-navigation");     // この段階では反映されない。
iframe.contentWindow.location.reload();         // ここで反映される。

まとめ

如何でしたでしょうか？今回はiframeのsandbox属性の動的設定方法についてまとめて見ました。
今回この記事を作成した理由ですが、sandbox属性を使用する機会があり、属性値を変更したにも関らす、反映され無くてつまったことがあったので作成しました。

記事に間違いや追加してほしい事がありましたら、コメントにご記入ください。