【危険】良い子のみんな「target=_blank」には「rel=noopener」をつけようね！

「target=_blank」とはリンクを新規タブで開くこと

HTMLの「target=_blank」というタグは、リンクをクリックしたときに新規タブ（新規ウインドウ）でリンク先を表示させるようにするタグです。

自分のブログやサイトのページを残して新たにタブを開けば、自分のページは残ったままになるという便利なタグなのです。

しかし、検索するとぞろぞろ出てくるように「target=_blank」には脆弱性が指摘されているのです。

例えば、あるサイトを閲覧していて、
リンクをクリックする→新規タブでリンク先が開く→ふふ～ん♬♫と見ているあいだに、元のページが書き換えられていることがあるのです。

これは「window.opener.location」というJavaScriptによって親ウィンドウを操作することができる技の一つでなのですが、

このリンク先が悪意あるサイトの場合、ウイルスに感染したりマルウェアを送りこまれたりする可能性があるのです。

または親ウインドウが書き換えられているのに気づかず、クレジットカード番号などを入力してしまうかもしれません。

危険を回避するために「rel=noopener」をつけよう

そういった危険を防ぐには、
・「target=_blank」を使用しない
・「target=_blank」に「rel=noopener」をつける

↓「rel=noopener」をつけるというのはこんな感じです
<a href=”https://yoshiyattemiru.com” target=”_blank” rel=”noopener”>よし！やってみる</a>

他に「rel=”noopener noreferrer”」というのもあります。

「noopener」（ノーオープナー）は現在では多くのブラウザに対応しているのですが、IEなど一部動作しないブラウザもあります。

その場合「noreferrer」（ノーリファラ）で対応します。

しかし、「referrer」はアクセス数のカウントに必要だったりする場合があるので、対応ブラウザが増やせる半面、影響をおよぼす範囲も広いということになるのだそうです。

まとめ

✔「target=_blank」には脆弱性が指摘されている。
✔「target=_blank」を使用しない、または
✔「target=_blank」を使うときは「rel=noopener」をつけよう。

リンクについての記事はこちら
【初心者向け】Cocoon リンクを別タブで開く・開かない設定

ads 楽天カードに「YOSHIKIデザイン」が登場！