*

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

おすすめトピックス

関連記事

イメージマップ
mapのareaリンクにロールオーバーを実現する簡単な代替策

一つの画像内に複数のリンクを貼る事ができる html の map タグと area タグがあります。これをイメージマップと言います。このイメージマップを使ってとあるコンテンツを作っていたのですが、画像内のリンク領域にマウ […]

リファラーによってiframe内のリンク先をjavascriptで変更する

リファラーによってインラインフレーム内にあるリンクのリンク先を変えれたら便利になるなと思って javascript で自作してみました。こんな事したいと思う人は多分いないニッチなものだと思います。 どういう時に使いたかっ […]

縦の三点リーダー
縦の三点リーダーをウェブサイト上で表示する方法

三点リーダーという言葉をご存知でしょうか。日本語の世界では度々登場するもので、小説、雑誌、文書など様々な場面に登場するものです。三点リーダーとはすなわち「…」、点が3つ並んだものです。普段のメールなどの会話でも言葉を省略 […]

cssとjqueryでサイトのローディング画面を簡単に実現する作り方【プラグインなし】

現在ロード中を知らせるローディング画面(Now Loading)は今までにどこかのサイトで見たことがあるかと思います。かつて FLASH 動画全盛の時代にはこんなローディング画面を見る機会も多かったです。このようなローデ […]

画像付きリスト
関連記事などに画像付きリストをCSSで簡単に作るサンプル

画像つきリストとは上図のようなイメージです。しばしばブログなどでは関連記事や人気記事の表示などに使われている事が多いですし、インターネットショッピングサイトではサイドメニューの商品カテゴリリストに採用されています。 ポイ […]

CSSの擬似クラスnth-childは3の倍数以外というような否定条件も可能

CSS において偶数の要素だけ、奇数の要素だけ、何番目の要素だけというような細かな指定ができる擬似クラスがあります。 例えばリストの3番目の要素なら次のように指定します。 偶数番目の要素だけ指定したいなら… 奇数番目の要 […]

著者について

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

フォローはこちら

       

       
IoT時代に必要なスキルを徹底分析、必要な3つの事とは?

IoT と聞いて何を思い浮かべるでしょうか。スマートスピーカー

Photoshopでアルファベットが大文字しか打てない時に確認する事

Photohsop で作業中ある異変に気が付きました。それはア

松本市のクレープ専門店「クレープ工房」モチモチ食感がくせになる

長野県松本市にクレープ専門店の「クレープ工房」があります。クレ

中野市のうどん専門店「田りた麺之助」で美味しさに衝撃を受けた

長野県に行ったら食べたいものと想像するのはやはり信州そばではな

志賀高原の池めぐりコースをトレッキングする時の駐車場や帰りのバスについて

大自然の山々や湿原を散策するのが好きで長野県の志賀高原へ行って

→もっと見る