こんにちは。
毎度久しぶり みつ です。
さて、つい先ほど おやすみ前のネット徘徊をしていると
こんな記事を見つけてしまいました。
！？！？普通に使っている。
むしろ自分からディレクターに「これ別窓にしますか？ッ了解です！」
とか当たり前にやってましたよ。
でも、知らなかったものは仕方ない
眠くなってきたから寝ようと思ったのですが、
これからwebの世界に飛び込む方々に
「え？target_blank使ってるの」とドヤ顔をしてもらえるように筆をとりました。
（Qiitaでバズってたので、もうドヤ顔はできません。）
目次
target_blankは使っちゃいけないの？
結論、使ってOKです。
ただ、<a href=”hoge” target=”_blank”>ではダメ
<a href=”hoge” target=”_blank” rel=”noopener”>としてあげましょう！
rel=”noopener”って何？
これは「target_blank」の脆弱性の説明になるのですが、
少々ややこしいので、丁寧に説明します。
前置きとして以下のリンクを見てください
※target_blankは、遷移前のページを操作できるという予備知識をつけつつ読み進めてください。
例えば、以下の３つのサイトがあったとします。
通販サイト「Imazon.com」 ｜ 攻撃サイト「Virus.com」｜フィッシングサイト「Imazom.com」
「Imazon.com」で買い物中に、気になるリンクがあったのでクリックして、
「Virus.com」に別タブ遷移で飛びました。
「Virus.com」を見終えたので、「Imazon.com」のタブに戻ると、
タイムアウトしていたので、ログインし直した。
この時点で、フィッシング詐欺にかかってしまっています。
実は、「Virus.com」から戻った「Imazon.com」は、
「Imazon.com」に似せて作られた、フィッシングサイト「Imazom.com」だったのです。
「Virus.com」に遷移した時点で、
裏側で「Imazon.com」は「Imazom.com」に書き換えられてしまっていたのです。
URLが、「Imazon.com」から「Imazom.com」に変わってても、大抵気づかないですよね。
これが、target_blankの脆弱性で、
「遷移前のページを操作できる」ことが悪用されるリスクがあるのです。
まとめ
とりあえず悪いことは何にもないので「rel=”noopener”」つけときましょう。
セキュリティ対策ってフロント開発をしているとあまり意識機会は少ないと思いますが、
こういう一手間を理解して、実装できてる人ってかっこいいよね。
がんばろ
以上です。
