aタグと別タブで開く方法！（target=”_blank”とrel=”noopener noreferrer”とは？？）

HTMLを少し勉強し始めるとaタグというものがあり、aタグは結構使うものというのが分かると思います

aタグはそのままページに飛んでしまいますが、別のページで開いてあげたい場合もありますよね

今回は別ページを開くための方法についての説明をしていきたいと思います！

1.リンクの指定方法

今回は別ページを開く方法の前におさらいとして

HTMLでリンクを貼る時のコードを整理したいと思います。

基本的にリンクを張る際はaタグを使い記述しますよね。一度下に記述してみますね

そしてここからなのですが、さらに、リンク元の表示先をtarget 属性を使用して設定することができ、その種類は大きく下記の２種類に分かれます。

1. 同じタブで開く　target=”_self”
2. 別タブで開く　target=”_blank”

それぞれ説明していきますね！

１．同じタブで開く

これがデフォルトの設定になるんですが

target 属性を付けてみるます

するとこんな感じになります

target=”_self”はHTMLリンクにおいてはデフォルトの値なので、省略することも可能です

２．別タブで開く

今回のテーマはこちらですね

” target=”_blank”が登場します。
下記のようなコードで新規タブを開くことができます。

” target=”_blank” を使用すること自体は、新規タブを開くという目的について言えば問題なく動作します。

しかしここで問題があるんです

では一体何が問題なのでしょうか？？

説明していきます

2.target=”_blank”の問題点

結論から言いますと、target=”_blank”の問題点とはセキュリティ上の脆弱性にあります。

target=”_blank” のセキュリティ上の脆弱性（セキュリティ上のリスク）について、グーグルのデベロッパー用のサイトで詳しく説明されています。

参考:https://developer.chrome.com/docs/

上記ページには、window.openerを使用することで、親ウィンドウのオブジェクトにアクセスを行ったり、window.opener.location = newURL によって親ページのURLを書き換えることができる問題があると記載されています。

target=”_blank”のリンクは別タブ（別ウィンドウ）で開かれるため、リンク元のページとリンク先のページの両方が一つのブラウザ内に存在していることになります。

そのように開かれたリンク先のページに、もし悪意をもったJavaScriptが記載されていたら、リンク元であるページを好き勝手に改ざんできてしまう可能性が考えられるのです。

例えば

仮にあなたが参考になる良い記事を見つけて、自分のサイト内のページに target=”_blank” でリンクを貼ったとします。

しかし、もしその参考記事が悪意のある第作者によって作られたページだった場合、開かれた新規タブ側で、リンク元のあなたのページのURLを操作できてしまうのです。

もし、リンク元のあなたのページが、大手通販サイトなどを装ったフィッシングサイトのURLに書き換えられてしまった場合、

あなたのページからユーザーが個人情報を誤って入力してしまい、「あなたのページでフィッシング被害にあった！」なんて責められてしまう可能性もあるのです。
（‥あなたに悪意はないにも関わらずそんなことを言われたら困ってしまいますよね）

またパフォーマンスに関してもデベロッパー用のサイトに記載があります。

それによると、target=”_blank” を使って別のページにリンクを貼っている場合、リンク元のページとリンク先のページは全く同じプロセスを通して実行され、リンク先のページで高い負荷を与えるJavaScriptが実行されていると、リンク元のページにも悪影響を及ぼしパフォーマンスが低下する問題が指摘されています。

3.target=”_blank”の問題への対処法

問題点が多すぎて使えないじゃないか。

と思ったあなた！もちろん対処法もありますよ！

それでは説明していきます

①noopenerの指定

noopener を指定することで、リンク先からwindow.openerを使ってリンク元が参照できなくなります。さらに、リンク先とリンク元が別のものとして扱われるためパフォーマンスに対しての対策にもなっているのです。

②noreffererの指定

ブラウザによっては、noopenerがサポートされていないため、noopenerと合わせてnoreffererを指定するのが好ましいと言えるでしょう。

noreffererを指定することで、リンク先にリンク元のリンク情報が送られないようになるため、 noopenerと同じくリンク先からの参照ができなくなります。

書き方としては

このように書いていただければOKです！

これでtarget=”_blank”の問題の対策になります！

まとめ

今回はtarget=”_blank” の問題点とその対策についてご紹介させてもらいました！

まとめると、target=”_blank”には、別ページで開くことができるのですがセキュリティーとパフォーマンスの2つの点で問題があり、それに対して、noopener noreferrerを加えるという一工夫を行うだけで、しっかりと対策ができるということでした！

今回の記事がtarget=”_blank”問題対策の参考になれば幸いです！