aタグのtarget="_blank"には脆弱性があった【新規ウィンドウで開く】

aタグのtarget=“_blank”とは、リンク作成時に新規ウィンドウで開くときに使用する属性です。 実際に書いてみると、こんな感じ

<a href="https://took.jp" target="_blank">リンク</a>

これを実装し、クリックすると、新規ウィンドウでtook.jpのサイトが開かれます。 では、問題点についてみていきましょう。

問題点

1.パフォーマンスの低下 リンク先サイト  と リンク元サイトは同じプロセスで動作しているため、リンク先サイトで高負荷のjavascriptが実行された場合、リンク元のパフォーマンスも落ちてしまう。 2.リンク元サイトのURLを書き換えられる これは、わかりにくいので、実際に試してみましょう。 ここをクリック ※ごめんなさい。現在は非公開にしています。 クリックすることで、新規タブでSampleページが開き、現在のタブは、took.jpのトップページに変わったはずです。 これは、リンク先サイトで、

<script>
window.onload = function() {
　window.opener.location = 'https://took.jp';
}
</script>

というスクリプトを実行させているからです。 リンク先が信用できるサイトなら良いですが、信用できないサイトの場合は、リンク元のサイトを操られる可能性があるので、危険です。

解決法

rel=”noopener”をつける。 これだけです。 実際に書くと、こんな感じ。

<a href="https://took.jp" target="_blank" rel="noopener">リンク</a>

以下のサイトを参考にしました。 https://developers.google.com/web/tools/lighthouse/audits/noopener?hl=ja