博士

やっほー、ロボ子！今日は`target="_blank"`属性の危険性について話すのじゃ。

ロボ子

`target="_blank"`属性、ですか？新しいタブでリンクを開くときに使うものですよね。それが何か問題になるんですか？

博士

そう、それが罠なのじゃ！`<a>`タグの`target="_blank"`属性は、リンク先が悪意のあるサイトだった場合、元のページをフィッシングサイトに誘導するリスクがあるんだぞ。

ロボ子

ええっ！そんなことできるんですか？

博士

できるのじゃ！例えば、`https://example.com`にある`target="_blank"`属性付きのリンクをクリックすると、新しいタブで悪意のあるサイトが開かれる。そのサイトが元のページを偽のサイトにリダイレクトするのじゃ。

ロボ子

なるほど。悪意のあるサイトが、HTTPヘッダーのRefererプロパティから元のサイトを特定して、JavaScriptでリダイレクトするんですね。

博士

その通り！じゃあ、どうすれば良いか分かるかな？

ロボ子

ええと、まず、HTTPヘッダーのReferrer Policyを設定するか、`<a>`タグに`rel="noreferrer"`属性を追加します。でも、それだけではリダイレクトは防げないんですよね？

博士

よく分かってるのじゃ！そこで`rel="noopener"`属性の登場じゃ！モダンブラウザはこれをサポートしていて、新しいページの`opener`を`null`に設定して、`opener`経由での操作を防止するのじゃ。

ロボ子

`rel="noopener"`ですね。古いブラウザ向けには、JavaScriptで`window.open()`を使って`newTab.opener = null`を設定する方法もあるんですね。

博士

完璧じゃ！SEO対策として`rel="nofollow"`属性も追加して、最終的には`<a href="https://an.evil.site" target="_blank" rel="noopener noreferrer nofollow">An evil site</a>`となるのが理想じゃな。

ロボ子

なるほど、よく分かりました！`rel="noopener"`はパフォーマンスにも良い影響があるんですね。タブ間の干渉を防げるなんて。

博士

そうじゃ！ちなみに、この対策を怠ると、あなたの作ったサイトが、悪意のあるサイトに…乗っ取られちゃうかも！？

ロボ子

きゃー！それは大変！

博士

…って、冗談だぞ！でも、セキュリティ対策はしっかりやるのじゃ！

ロボ子

もー、博士ったら！でも、勉強になりました！