target=”_blank” すると飛び先のサイトから情報取れるって知ってました?

  • 2019/2/11
  • target=”_blank” すると飛び先のサイトから情報取れるって知ってました? はコメントを受け付けていません。

target=”_blank” はリンク先を新しいタブで開くときの書き方ですが…

こんにちは、江嵜です。

みなさん、ブログ書いてますか?
私は書いてますよ。

…ジョークはさておき、皆さん、ブログなどを書くときに他のページにリンクを貼ったりしますよね?
そんな時に、普通にリンクを貼ってしまうと自分のブログから移動されてしまい、
そのまま帰ってきてくれない…みたいなことがあるんですね。
で、どうするかというと、リンクを新しいタブで開くように指定してあげるわけです。

<a href="http://example.com/" target="_blank">test</a>

test

上のリンクを押してもらうと分かるかと思いますが、
こんな感じで、 target="_blank" というものを、リンクタグに書いてあげることで
そのリンクは新しいタブで開いてもらえます。

こうすることで、元々の自分のページは別タブとして開いたままになるので、
リンク先を見た後にも帰ってきてもらいやすい、ということですね。

ちなみにこの target という属性ですが、
元々はフレームを使ったページで、よく使われていたようです。

2000 年くらいの HP なんかは左側にメニューだけのページが別枠として開いてたりしてましたよね?
フレームってアレのことです。
(ピンと来てない人は HTML フレーム とかで調べてみてください)

フレームはまぁいいとして、 target="_blank" なのですが、これちょっと面白いことができるんです。

別タブで開いた場合も、移動先のページはリンク元のページ情報が取得できる。

別のタブで開いた先のページは、大抵リンク元とは別のサイトですよね。
リンク元とリンク先、別のサイトなので全く関連がなさそうに見えますが…

ちょっとテストしてみます。

こんな感じで、 target="_blank" を設定してリンクをひらいてみます。
で、開いた先を見てみると…?

開いた先で、、console.log(window.opener); として、
window.opener というオブジェクトの中身をみています。
リンク元のアドレスが取得できているのが分かりますね。
これ実は、単純にアドレスが取れているわけではなくて、
リンク元のページそのものを取得できているんです!

実はコレ、ちょっと危険な話で…

これだけだと、「ほーん、開いた先でも、どこから来たか分かるんだ」くらいな感覚ですが、
実はページそのものが取得できているというのが問題でして…

https://mathiasbynens.github.io/rel-noopener/
こちらに、英語ですが今回の問題が分かりやすいように作られているページがありましたので
このページでちょっと動かしてみましょう。

上の画像は、先ほどの URL を開いて、一番上までスクロールしている状態です。

この状態から Click Me を押してみると…?

  • Click Me を押す
  • 新しいタブでリンク先のページが開く (これは target="_blank" の効果ですね)
  • 元のページに戻ると、ページが書き換えられている!

なんということでしょう!
誰がページを書き換えたのでしょうか?

これ実は、リンク先の新しいタブで開いたページが、
先程確認した、リンク元のページそのものが取得出来ることを利用して、
その取得したページを書き換えているのです!

まさか、新しく開いたページが元のページを書き換えできてしまうなんて、オドロキですよね。

rel=”noopener” で情報を渡さないようにしよう!

ただこれだけだとちょっと面白いだけなのですが、
ページが勝手に書き換わってしまうようでは困りますよね。

リンクを貼るときに、リンク先は確認しているから大丈夫!と思っても、
いつの間にかそのサイトを別の人に買い取られていて、
思っているのとは全然違うサイトにリンクを貼ってしまっているかもしれませんよ?

とりあえず、大抵の場合は渡す必要のない情報なので、渡さないようにしましょう。
とってもカンタンで、 target="_blank" と一緒に rel="noopener" を入れるだけです。

<a href="http://example.com/" rel="noopener" target="_blank">test</a>

これだけ。簡単ですね。先ほどのように、 window.opener の内容をみてみると…

先程色々と、 URL なんかが取れていたところが null (情報無し)になりました!
これでリンク先から操作されないので安心ですね。

まとめ

Web はセキュリティ的に色々意外な落とし穴があったりしますね。
今回も、まさかリンク先からページを書き換えられてしまう可能性があるなんて思いもしませんし…

とりあえず新タブでリンクを開くなら rel="noopener" 忘れずにつけましょうね。

Takato Ezaki

Takato Ezaki小中高の塾講師からエンジニア

投稿者プロフィール

福岡で Web 系のエンジニアをしています。

中高の理科教師免許を取り、起業に 2 年間トライした後エンジニアの道へ入りました。

化学反応の中では Belousov-Zhabotinsky 反応が大好きです。

この著者の最新の記事

関連記事

コメントは利用できません。

募集中!(o゜▽゜)o

エンジャパン
求む、社長!
follow us in feedly

コッチもヨロシク!





最近のネタ!

  1. 2019-8-23

    リーダーに興味がある人向け勉強会〜今月もやります&前回レポ〜

    こんにちは! さんどですよ(∩´∀`)∩ 前回開催からしばらく講師陣の都合がつかず開催できていなか…
  2. 2019-8-22

    第四回リアル脱出ゲーム部~人狼村からの脱出~

    はじめに 令和初リアル脱出ゲーム部の活動が8/3(土)にありました! というわけで活動報告をしま…
  3. 2019-8-19

    Web で物理アニメーション・その3 「簡単な物理法則に従うアニメーションを作ろう」

    前回の回答 前回の回答から行きましょう。 前回の宿題は 以下のように、近づいて右下に抜けてい…
  4. 2019-8-15

    2019年7月度社員総会&懇親会@Nagoya

    愛知は、わざいかぬっかど! 大田です。 さて!(笑) 今回は7/10(水)に行われた、名古屋社員総…
  5. 2019-8-13

    2019年7月度社員総会&懇親会@東京

    はじめに 今年もやってきました!みんな大好き、夏季休暇の季節! 40度近い気温が毎日どこかで計測さ…
ページ上部へ戻る

当サイトに掲載されているコンテンツ(文書、画像等)は、許可なく複製・転用等する事を禁じます。

「フェアネス方式®」(登録6150741)は、日本国内における株式会社エージェントグローの登録商標です。

当サイトでは最低限必要と考えられる場合において、会社名/サービス名/商品名などを記載している場合があります。
これらはあくまでも説明の必要性に応じて用いているものであり、各社の権利等を侵害を目的とするものではございません。
不適切と考えられる場合には、当社お問い合わせフォームよりご連絡ください。

当サイトでは®や™などの表記を省略させていただいております。