*

iframe内のjavascriptを無効にする方法

公開日: : ノウハウ

iframe-javascript

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 以下では対応していません。

上部広告

  • Pocket

おすすめトピックス

関連記事

スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。 そのスマートフォンサイトをちょっと思い出してみてください。 こ […]

マウス
CSSのみでマウスのロールオーバーでopacityだと背景が濃いと白くならない対処法

画像のロールオーバーと言えば、ウェブサイトでリンクが付いた画像やバナーにマウスを乗せた時に色が変わったり何かしら変化がある処理を言います。一昔前には画像のロールオーバー一つに javascript を使って大変面倒で h […]

オフィス画像モニタ
CSSのみでhtmlタグの中に文章を挿入する方法があります

ウェブサイトの中で html の編集が出来ない場所に文章を書くなど編集する事は出来ません。一見当たり前の事を言っているだけです。しかし、CSS なら出来てしまうかもしれません。 目次1 htmlの編集が出来ない場所とは2 […]

スマホを操作する手
スマホでWeb閲覧時代にスマホサイトでNGだと思う事3つ

ちょっと前まではインターネットを見るなら、通販するならパソコン!という時代でしたが、既にこれは終わった時代です。ここ2,3年は、インターネットを閲覧、通販においてもスマートフォン率がだんだん上昇しています。これは当サイト […]

css3
CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス

スタイルシート(CSS)はウェブサイトにデザインを適用するための言語。そのスタイルシートのバージョンは今では3になっており、かなり表現力豊かで優秀になっています。 例えば ul li タグのリストの場合、従来の CSS2 […]

https通信下でjavascriptが動かない場合の対処法

https 通信下で javascript が動かない!とお困りという事は、もしかしてあなたのページは特定のページだけ https 通信を行っているのではないでしょうか?例えばログインページ、決済ページのみ暗号化を行う […]

上部広告

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

上部広告

       
コンビニ受け取り
不在がちでもAmazonの注文の品をコンビニで受け取る事ができます【ファミリーマート編】

ネットショッピングは今では物を購入する手段としてメジャーな存在となりま

安全靴
カジュアルで疲れにくく痛くない!安くて履きやすいおすすめ安全靴【喜多】

倉庫や工場、建設業の方ならお馴染みの物かと思いますが、安全靴と

CapsLockキー
CapsLockキーにイライラ、いらないので無効化してさしあげた

キーボードの CapsLock キーって知ってますか?あなたの

AMP
WordPressを簡単にAMPに対応するテーマやテンプレートを紹介

ウェブサイトの SSL 対応と同様に、いずれ AMP にも対応

Photoshopで写真の一部の色を変える色の置き換え機能の使い方

この写真のこの部分だけ色を変えたい!この商品画像の色を変えたい

→もっと見る