647
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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" の危険性

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
647
Help us understand the problem. What are the problem?