写真イメージ

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

投稿者:

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

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

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

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

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

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

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”」 だけと言う方は、
制作会社さんに相談して対応も検討しましょう。


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

Follow me!

この記事を書いた人

Kei Sato
面白いと思ったモノ・コトを解析し、広く報せることに喜びと生きがいを感じる人です。広報やウェブマーケティングの仕事が大好き。個人ではウェブ解析士、キャリアトランプ ダイバーシティ ナビゲーターとしても活動中。ブログでウェブ解析×キャリア支援に役立つお話や、日々の気づきを綴っています。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください