【備忘メモ】リンク設定にtarget=”_blank”を利用するときの注意点

※このエントリーは管理者のメモ用です。

外部サイトへリンクするときに、target=”_blank”を設定して別窓(タブ)遷移にする場合がありますが、それだけだと悪用されるケースがあるから注意が必要。

別窓(タブ)遷移させるリンク設定

通常、HTMLでリンク設定するときは aタグを以下のように記述する。
<a href="リンク先のURL" target="_blank">リンクテキスト</a>

これだけだと、別窓で開いたリンク先でJavaScriptを利用して悪用されるパターンもあるから注意が必要なんだそうな。

【問題】セキュリティ上の問題

target=”_blank”で開いたリンク先のページはJavaScriptの windowwindow.openerプロパティを使用してオブジェクトにアクセスが可能。これを利用されてリンク元ページを悪意のあるURLにリダイレクトされる可能性がある。この挙動はフィッシング詐欺に利用され、tabnabbingと呼ばれている。

よく海外の無料エロサイトで利用されているアレだ。

【対策】で、結局どうするのが良いの?

今後 target=”_blank” を利用する際は rel="noopener" を必須にする。

<a href="リンク先のURL" target="_blank" rel="noopener">リンクテキスト</a>

rel="noopener"を入れることでリンク先からリンク元ページをwindow.opner経由で参照できなくさせます。これでリンク元のlocationを変更させてしまうなど、フィッシング詐欺の手法を抑止することになります。

rel=”noreferrer”属性

リンク先に対してリンク元の情報を渡さないようにする。 通常はあまり意識しなくて問題ないと思うが、こちらを設定することでリファラーを渡さなくなるので、リンク先の管理者が「へ~このページからリンクされてるのか、ヒヒヒ。」「サーバーはあそこを利用してるのか、ヒヒヒ。」など出来なくなる。

<a href="リンク先のURL" target="_blank" rel="noopener noreferrer">リンクテキスト</a>

※メモ

同一ドメイン内は基本同窓で遷移させて、別ドメインにリンクさせるときに target=”_blank” で別窓で遷移させればいいのではないかと。

targe=”_blank”については、リンク元とリンク先が同じプロセスで処理されるため、リンク先の影響を受けてリンク元のパフォーマンスが低下するといった懸念もあるのですが、こちらについては未調査。

Googleからは target=”_blank”はあんまり利用しない方が良いよ、みたいなニュアンスのコメントは確認。