リンクのtarget=_blankには「rel=noopener」でセキュリティ対策

2018/01/17 更新
リンクのtarget=_blankにはrel=noopenerをつけておくのがベター

リンクを新規ウィンドウ（タブ）で開く「target=”_blank”」のセキュリティ対策としての「rel=”noopener”」についてメモしておきます。

外部サイトへリンクする際に便利なtarget=”_blank”ですが、フィッシング詐欺に利用されてしまう可能性があるということで、そのセキュリティ面での脆弱性対策としてリンクに「rel=”noopener”」を追記するとよいようです。 リンクへの実装はとても簡単で、以下のようにa要素に追記するだけでOKです。 
<a href="https://www.hoge.com" target="_blank" rel="noopener">〜</a>
Can I useによると、PC版ではChrome、Firefox、Safariの各最新版、スマホではChrome for Android、iOS10.3以降に搭載のSafariなど多くのシェアを持つブラウザで対応済みですが、IE11、Edgeなどでは未対応となっている点に注意が必要です。

target=”_blank”の何が怖いのか

では何が問題なのかというと、新しく開かれたウィンドウでJavaScriptのwindow.openerを使用し、親ウィンドウ（リンク元）を操作できてしまう点です。 以下のようなたった1行があるだけで、target=”_blank”で新しく開かれたウィンドウから親ウィンドウを「hoge.com」へ遷移させることもできてしまいます。それだけでなく、親ウィンドウのオブジェクトにアクセスすることさえ可能だということです。 
window.opener.location="https://www.adc.com/"
例えば、親ウィンドウexample.comからtarget=”_blank”で任意のサイトを別ウィンドウで開いたとします。 その際、新しく開かれた別ウィンドウに仕込まれたwindow.opener.locationによって、気づかない内に親ウィンドウが不正にexample.comにそっくりな「exanple.com」へ移動していたら…。 親ウィンドウに戻った時に「タイムアウトによりログアウトしましたので再ログインしてください」とログイン画面を表示したら…。そもそも偽サイトだと気づけるでしょうか。
Demo

まとめ

自分（あるいは社内）で管理しているサイトへのリンクの際には比較的リスクが低いとは思いますが、外部サイトへのリンクに「target=”_blank”」を使用する際には、セキュリティ対策として「rel=”noopener”」を書くことを忘れないようにしましょう。The performance benefits of rel=noopenerによると、rel=”noopener”を書いておくことでパフォーマンスの向上も期待できるということです。