MOの気になることを適当に伝えるブログ

moNote

WordPress

target=”_blank” は危険?

投稿日:

以前は、外部サイトのインクを設定するときは、「target=”_blank”」を使うのが好きだった。

ただ、スマホの普及で それもどうかな?? ってのが 感想。

で 最近の 主流を調べてみると、
「target=”_blank”」が 危険との記事か 結構。。。。

まじか!(汗

“target=”_blank” にはセキュリティ上の脆弱性

Google エンジニアの 警告を 一部抜粋 & 翻訳

target="_blank"属性を使用して別のサイトのページにリンクすると、サイトをパフォーマンスとセキュリティの問題にさらすことになります。

  • リンク先のページは、元のページと同じプロセスで実行される場合があります。リンク先のページが多くのJavaScriptを実行している場合、元のページのパフォーマンスが低下する可能性があります。
  • リンク先のページはwindowwindow.openerプロパティを使用してオブジェクトにアクセスできます。これにより、リンク先のページが悪意のあるURLに元のページをリダイレクトする可能性があります。

rel="noopener"またはrel="noreferrer" をリンクに追加すると、target="_blank"の問題を回避できます。

参:https://developers.google.com/web/tools/lighthouse/audits/noopener?hl=ja

要約

  • 飛んだ先のページのパフォーマンスが元のページに影響
  • 飛んだ先のページから元のページにリダイレクトできる

対策

“target=”_blank” を使う時は

  • noopenerの指定
  • noreferrerの指定

<a href="https://examplepetstore.com" target="_blank" rel="noopener">
          Example Pet Store
</a>

実際は、ブラウザによっては、noopenerがサポートされていないため、noreferrer と 一緒に 指定するのが好ましいようです。

<a href="https://examplepetstore.com" 
			target="_blank" rel="noreferrer noopener">
	Example Pet Store
</a>

WordPressでは

では WordPress の リンク設定では どうなっているのか?

リンクの設定で「新しいタブを開く」をONにすると ちゃんと 「 rel="noreferrer noopener"  」 が 追加されていました!!

素晴らしい。。。

補足

これは 別窓で開く 設定の “target=”_blank” で 問題があるのであって、 「Ctrl + クリック」 や 「 Ctrl + Shift + クリック」 などで ユーザが 故意に 別窓で 開くのには 問題ないです。

つまり、通常は どうリンクを開くかは ユーザに 任せておくのが 一番 理想的??

-WordPress
-,

Copyright© moNote , 2020 All Rights Reserved Powered by STINGER.