他サイトからのiframe埋め込みを拒否する方法

クリエイター丙

自分のサイトが他のサイトからiframe埋め込みされるのを拒否する方法を説明します。WordPressでの設定方法も。

他サイトからiframeの埋め込みを拒否する

ウェブサイトやブログを運営しているクリエイターさんへ。
SNSのウィジェットや動画を読み込むのによく使うiframeですが、悪意を持って使われることがあります。他人のサイトを丸ごと読み込んで盗用したり、クリックジャッキングに使われたり。そこで、自分のウェブサイトがiframe埋め込みをされないようにする設定方法を書きました。

目次

iframe埋め込みとは?

iframeとはhtmlのタグのひとつです。次のような記述をすることで、他のページの中身をそのまま呼び出すことができます。

<iframe src="https://----.com/somepage"></iframe>

iframeがよく使われる場面には、ウィジェットの埋め込みがあります。例えばTwitterのタイムライン、Youtubeの動画、Google Mapなどを自分のウェブサイトに掲載するときに、iframeを使ったタグが発行されることが多いでしょう。

iframe自体が悪者というわけではありませんが、悪意のある使い方もできるので取り扱いには注意が必要です。

iframe埋め込み拒否の概要

iframeでの埋め込みを拒否するには、HTTPレスポンスヘッダーに指示を書き込むことです。

HTTPレスポンスヘッダーというのは、私たちがブラウザでウェブページを見るときに、ウェブサーバーから最初に送られてくる情報の一部です。ふつうは目にはふれません。

「このページはiframeからの呼び出しを許可するか」という設定があります。「X-Frame-Options」という設定で、取れる値は3つ。

  • deny……全て拒否
  • sameorigin……同じサイトからだけ許可
  • allow-from https://example.com/……指定のドメインからだけ許可
X-Frame-Options – HTTP | MDN

その設定を書いておく方法はいくつかあります。

.htaccessに書く場合

お使いのサーバーで.htaccessが扱える場合、またはサーバールートあたりにあるApacheの設定ファイル(httpd.confなど)が扱える場合、このような記述をするとiframeからの埋め込みを制御できます。

Header always append X-Frame-Options DENY

WordPressの場合

WordPressの場合、HTTPヘッダーを扱う関数に訴えかける方法もあります。テーマファイル内のfunctions.phpなどに次のような記述をします。

function myname_http_headers() {
	header('X-FRAME-OPTIONS: SAMEORIGIN');
}
add_action( 'send_headers', 'myname_http_headers' );

iframe拒否をできない場合

レンタルブログサービスなどを利用している場合、前述したような設定を自分ですることはふつうできないので、iframe埋め込みの拒否はできないものと考えたほうがいいでしょう。ブログサービスが対応してくれるのを待っているしかありません。

また、htmlファイルの<head>内に書き込む方法は使えません。

<!--意味のない例-->
<meta http-equiv="X-Frame-Options" content="deny">

なぜならhtmlに先んじて送られるHTTPヘッダーのなかで拒否を伝えないといけないから、ってとこですね。

「クリックジャッキング」とは

iframeは「クリックジャッキング」というスパム手法に使われることがあります。

ユーザーが見慣れたウェブサイトだと思っていたら、それは実はiframeで別のところから呼び出されたもので、そこに透明なしかけがかぶせられていて、ユーザーは意図しない操作をさせられる、というものです。

ようするに、善意のウェブサイトが知らないうちに何かの悪事に使われる、というタイプのスパムです。迷惑ですね。

クリックジャッキングを防ぐためにも、前述のX-FRAME-OPTIONSの設定は有効です。

クリックジャッキング – Wikipedia

ウェブサイト運営者はできれば自衛を

iframe埋め込みでコンテンツを丸ごと流用
これは再現ですが、わりとマジでこんな感じでした

当ブログでも、iframeを使った丸パクリに逢ったことがあります。ある日、地方のデザイン会社か何かから「おたくのブログ記事にリンクしました」と連絡がきました。

で記載のウェブページを見に行ってみたら、当ブログの一記事をiframeで丸々読み込んであり、自分とこのコンテンツかのように見せてあった。うわびっくりした。

それはリンクではなくて丸パクリっていうんだけど。
なぜそれが許されると思ったのか不思議すぎるけど、紹介したようなサーバー設定をきちんとせねばなーと思ったできごとでした。

ただこのように連絡が来るのはレアケースであって、たいていは黙ってやってく。どんな低俗なウェブサイトから丸パクリ埋め込みされるかわかったもんじゃありません。海外のスパムサイトからやられたって人もいて、そうなると連絡して取り下げてもらうなんてもうやってられませんよね。

なので、クリックジャッキング対策も含めて、HTTPヘッダーの設定でいつも自衛するようにしておくのがよいのではないかなあと、思います。

関連記事