未分類

target="_blank"につけるべきrel属性は?【noopener / noreferrer】

aタグによるリンクで新しいタブでウィンドウを開いてほしいときはtarget="_blank"を設定するかと思いますが、セキュリティ的な観点などからrel="noopener"をつけることが推奨されています。
しかしながら、
rel="noopener"
rel="noreferrer"
rel="noopener noreferrer"
派がいて結局どうしたらいいのかわからない方もいるようなのでまとめです。

結論からいくともうつけなくても(ほぼ)大丈夫です。
普通にリンクを貼るだけなら気にしなくてもよいレベルかと思います。
しかしながら、ユーザーがリンクを生成できる仕組みなど、外部へのリンクで気になる場合は念の為rel="noreferrer"をつけておくとよいでしょう。

というのも、現状Firefox, Safari, Chromeなど主要ブラウザは指定がなければ自動でnoopenerがつくようになっています。
openerを取得したかったら明示的につけろ、という形です。デフォルト値の変更ですね。

もし主要ブラウザ以外の挙動不明なブラウザなどにも対応しておきたければrel="noopener"をつける、
既にサポートが切れているIEも対応したければrel="noreferrer"をつける、となります。
主要ではなくデフォルトがopenerを取得する設定でかつwindow.openerを使えるという限定的なブラウザを気にしてnoopenerをつけるくらいなら、
古くからあり対応範囲の広いnoreferrer(もしくは両方)をつける方がいいかと思います。
ただし、noreferrerについては遷移先でリファラを取れなくするといったものなので、一部アフィリエイトや分析に影響があります。
「うちのサイトから来てるんだよ」というアピールができなくなるのでその点は注意してください。

rel属性をつける理由などもっと詳しく知りたい場合は裏付け調査中に見つけたこちらの記事が詳しかったです。

参考までにnoopenerの指定が効くブラウザの一覧はこちらです。
https://caniuse.com/?search=noopener
Edgeもカバーされており、記事執筆時点でも95.54%のユーザーがカバーされています。

-未分類

Copyright© F27P , 2021 All Rights Reserved Powered by AFFINGER5.