*

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

おすすめトピックス

関連記事

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

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

動く炭酸
飲み物の写真がリアルに動き出す!フリーソフトSizzTassの使い方

知り合いに聞いたのですが、「料理の写真からぐつぐつと煮えたぎる写真を作れるソフトがあるらしいよ。テレビでやってた。」と。最初は何だそれは?と思って意味がよく理解できませんでした。 ソフト名を聞いて調べてみたのですが、確か […]

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

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

videoタグのmp4動画にもサムネイル画像を表示させるには

ニコニコ動画や Youtube を始め、インターネット上で動画を見たり配信する機会が珍しくない時代となりました。むしろ毎日アップロードされる動画が多すぎて見てもらう為の競争となっていると言っても過言ではありません。 そこ […]

画像のALT属性に文字を入れる気にならないのは画面に表示されないからだと思う

画像の ALT 属性って知っていますか?ALT 属性とは画像に付加するテキスト情報で、画像について手短に説明したテキストを入力する事が望ましいです。画像が表示されない時に何の画像かわかる為の代替テキストとして、音声読み上 […]

MP3ダウンロード
MP3を1クリックだけでストリーミングせずにダウンロードする方法

私はこのサイトとは別に、効果音や BGM の素材サイトを運営しています。ふとそのサイト名で google 検索をしてみた所、驚くべき光景を目にしました。 ポケットサウンドというのがそのサイト名なのですが、Google の […]

著者について

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

フォローはこちら

       

       
梱包用ppバンドのストッパーのはさみを使わない外し方

ダンボールで荷物を梱包する時、より強固にする為に pp バンド

ローチョコレート
彦根市に生カカオが活きたローチョコレート専門店「ハレトケト」

滋賀県彦根市、彦根城周辺の古き町並みが残る地に滋賀県初のローチ

アサシンクリードオデッセイ
アサシンクリードオデッセイPC版をGeforce GTX 1070でプレイした感想

2018年10月5日に発売されたアサシンクリードオデッセイの

大垣市のお洒落なビストロ「洋食もくれん」でディナー

岐阜県大垣市の大垣駅近くに「洋食もくれん(洋食 MOQLEN)

Youtubeライブ(生放送)をタイムシフトのように後で見る事はできるか?

インターネット上で生放送ができるウェブサービスは色々ありますが

→もっと見る