【要注意】target=”_blank” 問題

こんにちは。ウェブ解析士の佐藤佳です。

Webをやっている人にはおなじみの「target=”_blank”」 、
これは指定リンクを別タブで開くという指示です。

しかし「セキュリティとパフォーマンスの点で問題がある」ため、
「rel=”noopener” 属性または rel=”noreferrer” 属性と併用したほうがいい」という情報を、
グーグルのエンジニアが注意を促しているのをご存じでしょうか。

問題点を簡単に言うと、外部リンクを貼る際の記述が「target=”_blank”」だけだと、
リンク先ページのJavaScriptによって、開いた元のページを操作できてしまう、というもの。

マジか！って感じですよね。

一番分かりやすいのはWeb担の記事かなと思いますので、
セキュリティとパフォーマンスという２つの観点について紹介します。

target=”_blank” にはセキュリティ上の脆弱性もあります。リンク先のページでは window.opener を使用して親ウィンドウのオブジェクトにアクセスしたり、window.opener.location = newURL によって親ページの URL を変更したりできます。

https://webtan.impress.co.jp/e/2020/03/13/35510

target=”_blank” を使用して任意のページから別のページにリンクしている場合、リンク元のページとリンク先のページは同じプロセスで動作します。 そのため、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。

https://webtan.impress.co.jp/e/2020/03/13/35510

■結論どうすればいいの？
「rel=”noopener” 属性または rel=”noreferrer” 属性と併用」する対策をしましょう。

noopenerとは？
“元のページ”のtarget=”_blank”に対してrel=”noopener”と付与することで、 “別タブで開かれたページ”にて、window.openerで参照できなくなり、”元のページ”のlocationの変更などを抑止することが可能である。これにより、”別タブで開かれたページ”では、以下のようなJavaScriptのエラーが表示される。

https://qiita.com/Apprentice_engineer/items/5db19a6d9bd4e7978aec

noreferrerとは
現在、noopener未対応のブラウザもあるので、その代替として noreferrerを指定することで同じ挙動が実現できる。

https://qiita.com/Apprentice_engineer/items/5db19a6d9bd4e7978aec

ちなみにこのブログを書いている今日時点の話ですが、
WordPressでは 「target=”_blank”」 をすると自動的に 「rel=”noopener” 」がついています。
※私のブログもそうなっています。

もし、自社サイトが 「target=”_blank”」 だけと言う方は、
制作会社さんに相談して対応も検討しましょう。

今回はここまでです。
また次回のブログでお会いしましょう。