target="_blank"には気をつけよう

target="_blank"には気をつけよう:

経緯

aタグにtarget="_blank"をつけると危険だよと言われたので、忘れないうちにメモメモ。

危険な理由

「リンクを開いた先のページでのJavaScriptによって、開いた元のページを操作できてしまう」

大抵のブラウザでは、 target=blank_によって"別タブで開かれたページ"が手前に表示され、 "元のページ"は裏に残る。

"別タブで開かれたページ"にて、

window.opener.location="./hogehoge.html" 

が実行されると、裏で"元のページ"が画面遷移される。

オリジンが違ったとしても、リンクをたどってきたユーザを任意のサイトに誘導することが可能。

※ window.openerは、"別タブで開かれたページ"を開いた"元のページ"への参照を返すらしい。。。
window.opener

フィッシング詐欺攻撃の例

リンクのへの rel=noopener 付与による Tabnabbing 対策

ESLint(eslint-plugin-react)でもエラーになるみたい

reactでaタグの中にtarget='_blank'を書いたらESLintに怒られた話

対策

「target="_blank"に対してrel="noopener noreferrer"を付与」

noopenerとは

"元のページ"のtarget="_blank"に対してrel="noopener"と付与することで、

"別タブで開かれたページ"にて、window.openerで参照できなくなり、"元のページ"のlocationの変更などを抑止することが可能である。

これにより、"別タブで開かれたページ"では、以下のようなJavaScriptのエラーが表示される。

Uncaught TypeError: Cannot set property 'location' of null 

現在、未対応のブラウザもある
https://caniuse.com/#feat=rel-noopener

noreferrerとは

現在、noopener未対応のブラウザもあるので、

その代替として noreferrerを指定することで同じ挙動が実現できる。
https://caniuse.com/#feat=rel-noreferrer

Babelで自動付与

毎回記述するのも面倒だし忘れそうなので、自動付与するのもあり。

BabelPluginによりリンクへrel=noopenerを自動的に付与する

Google Analyticsへの影響

現状では、クロスドメイン対応していても問題なし。_gaパラメータも問題なく付与されている。

参考

リンクを作る時の target="_blank" の危険性

かなり参考になりました。