HTMLでの「別タブで開く」処理に潜むワナ?

知ってる人からすると「何をいまさら」だと思いますが・・・

最近話題となっていますが、
 「別タブで開く」処理【target="_blank"】に関する注意
がGoogle エンジニアから発信されました。
詳しくは以下原文をお読みください(英文)
 https://web.dev/external-anchors-use-rel-noopener/
要約すると
---------
【target="_blank"】にはセキュリティ上の脆弱性があり、【target="_blank"】で指定したリンク先のページに悪意のあるJavaScriptなどが組み込まれていた場合、呼び出し元のページも攻撃対象になってしまう
---------
ということです。
ではどうするか?
いつも書いている【target="_blank"】と一緒に
 【rel="noopener"】
および
 【rel="noreferrer"】
を指定します。
それぞれ意味を簡単に書くと
  • 【rel="noopener"】:
    信頼できない(信頼できるとは思えない)サイトに対しリンクを貼る場合に指定

  • 【rel="noreferrer"】:
    社内システムから外部サイトへのリンクを貼る場合に指定

となります。
(ちゃんと説明しているサイトもありますので、詳細を知りたい方は調べていただければ。)
例えば、
社内システムから外部サイトへリンクを貼る場合は
 <a href="https://www.yahoo.co.jp/" target="_blank" rel="noopener noreferrer">Yahoo!Japan</a>
と書けば大丈夫です。

あと、【rel="noopener"】には、パフォーマンス改善も期待できるようです。
(私は確認できていませんが。。)
使い慣れた【<a href>】タグですが、少し気を付けて使う必要がありますね。

本ブログで使用しているイラストはなのなのなさんによるイラストACからのイラストを使用しています。

    前の記事

    在宅勤務時のストレス