以前は、外部サイトのインクを設定するときは、「target=”_blank”」を使うのが好きだった。
ただ、スマホの普及で それもどうかな？？ ってのが 感想。
で 最近の 主流を調べてみると、
「target=”_blank”」が 危険との記事か 結構。。。。
まじか！（汗
“target=”_blank” にはセキュリティ上の脆弱性
Google エンジニアの 警告を 一部抜粋 ＆ 翻訳
target="_blank"属性を使用して別のサイトのページにリンクすると、サイトをパフォーマンスとセキュリティの問題にさらすことになります。
- リンク先のページは、元のページと同じプロセスで実行される場合があります。リンク先のページが多くのJavaScriptを実行している場合、元のページのパフォーマンスが低下する可能性があります。
- リンク先のページは
window、window.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 + クリック」 などで ユーザが 故意に 別窓で 開くのには 問題ないです。
つまり、通常は どうリンクを開くかは ユーザに 任せておくのが 一番 理想的？？
コメント