development_creative

この記事は1年以上経過しています。

【これからWeb制作を目指す方へ!】aタグの「noopener」「noreferrer」って何?

君は答えられる?「noopener」「noreferrer」

こんなコードを見たことないでしょうか?

<a href="/somewhere" target="_blank" rel="noopener noreferrer">

hrefはわかるとして、rel属性ってなんとなくつけていたけど、
具体的にどんな役割があるんだろうか?って気になったことないですか?

そちらについて解説していきます!

rel=”noopener”とは

まずは「noopener」に関してまとめます!

主な役割は以下です。

  • セキュリティ強化
  • パフォーマンス低下を防ぐ
  • クロスオリジン制約の回避

1.セキュリティ強化

“noopener”は、リンク先のウェブページが
展開しているウィンドウやタブにアクセスできないようにします。
リンク先のサイトが悪意のあるサイトや、ハッキングされているサイトだった場合に、
自分の見ていたリンク元ページにアクセス・操作される可能性があるとのこと。
また、フィッシング詐欺に利用されるリスクも。

つまり、リンク先の悪いwebページがscript的なもので、
遷移元のページなどにアクセスできないようにするってことですね。

2.パフォーマンス低下を防ぐ

target=”_blank”で開かれたページと元リンクのページでは、同じJavaScriptが使われています。
したがって、開かれたリンク先の動作が重いと、元ページの動作も重くなる可能性があるようです。rel=”noopener”を設定することで、リンク先で負荷の大きいJavaScript処理が行われても、リンク元ページが影響を受けることを防げます。

つまり、なんというか、メモリを極力圧迫しないって感じで覚えておけばいいのかもですね。

3.クロスオリジン制約の回避

“noopener”を使用すると、リンク先のウェブページとの間で、情報共有が制限されます。
これにより、クロスオリジン制約によるセキュリティの問題を回避します。

⇨クロスオリジン制約(Cross-Origin Restriction)は、ブラウザのセキュリティメカニズムの一部。
異なるオリジン(例えばドメインなど)間でのリソースのアクセスを制限する仕組み。

要するに、違うドメインのサイトなどには、むやみやたらに情報を渡さないってことですね。

rel=”noreferrer”とは?

noreferrerには、「参照元のリンク情報を渡さないようにする」という役割があります。
また、noopenerに対応していないブラウザ対策として使用する場合もあります。
リンク先に対して参照元のリンク情報を渡さないようにすることができます。

パソコンお役立ちブログ
https://prorautatie.net/noopener-noreferrer/#toc12

まとめるとこんな感じ

  • リンクをクリックした際に遷移先に対して、リファラ情報(遷移元URL)を伝えない
  • リンク元URLが遷移先に伝わることなく、ユーザーのプライバシーを保護
  • リファラ情報を利用した悪質な行為を防ぐ

【結論】両方記述する必要はあるか?

「noopener」のみでほぼ大丈夫。

理由としては、「noopener」がほとんどのブラウザーに対応しているから。

しかしながら、サポートの終了したIE(Internet Explorer)で見られることが多いサイトには
「rel=”noopener noreferrer”」とつけておいた方が無難
なようです。

Related ariticle

関連記事

TOP