PlusOne Blog

【HTML】target=”_blank”だけだと危ないらしい。

リンクを別タブで開かせたいとき、target=”_blank”だけだと危険らしい という記事。
 

 

通常の target=”_blank” だけを使う記述


  <a href="リンク先URL" target="_blank">別タブで開く</a>

こちらの通常の記述では、パフォーマンスとセキュリティ上に問題があると Google デベロッパーの記事があった。
https://web.dev/external-anchors-use-rel-noopener/
============================
・他のページは、あなたのページと同じプロセスで実行される場合があります。他のページが多くのJavaScriptを実行している場合、ページのパフォーマンスが低下する可能性があります。
・他のページは window、window.opener プロパティを使用してオブジェクトにアクセスできます。これにより、他のページがページを悪意のある URL にリダイレクトする可能性があります。
============================
 

改善した記述

target=”_blank” と併用して、rel=”noopener” または rel=”noreferrer” を記述する。


  <a href="リンク先URL" target="_blank" rel="noopener">別タブで開く</a>
または
  <a href="リンク先URL" target="_blank" rel="noreferrer">別タブで開く</a>

デモページを見つけたので、こちらを見ると分かりやすい。
https://blog.jxck.io/entries/2016-06-12/noopener.html 
 
実際、wordpress の投稿ページで link を設定すると、この「rel=”noopener”」が記述される
 

 

この記事を読む
記事一覧に戻る