こんにちは、@koga1020です。

完全にタイトルの通りですが、知識として抜け落ちていたので備忘録として書いておきます。

外部リンクへ飛ばしたいときには、<a href="XXX" target="_blank"> のようにaタグを記述しますよね?

実はこれだけだとセキュリティ上NGで、target=_blank"に加えて、rel="noopener"が必要です。

これがないと、target=_blankで開いたページからwindow.openerで参照されてしまい、「window.opener.location = <別のURL> を実行し、別ページへ飛ばす」といったことをされてしまうとのこと。

また、"noopener"に対応していないブラウザのため、noreferrerも記述しておくのが吉。

まとめ

target=”_blank” を書くときにはrel="noopener noreferrer" を合わせて書きましょう

おまけ

ElixirでDOMを扱う場合、以下のようなview関数を噛ませるとaタグにtarget="_blank" rel="noopener noreferrer"を付与できます


  def add_blank(html) do
    Regex.replace(
      ~r/<a href="([^\"]+)"/,
      html,
      ~s(<a href="\\1" target="_blank" rel="noopener noreferrer")
    )
  end

参考