rel=”noopener”リンクの意味や問題点、実装方法について

rel=”noopener”とは？

rel="noopener"は、HTMLの<a>要素（ハイパーリンクを定義するための要素）で使用される属性の一つです。この属性は、セキュリティ上の理由から追加されることがあります。

この属性は、target="_blank"を使用してリンクを新しいウィンドウまたはタブで開く場合に関連します。通常、外部のサイトや別のドメインに対するリンクを新しいウィンドウで開く場合にtarget="_blank"を使用します。しかし、この方法だと、開いた新しいウィンドウが元のウィンドウ（オープンした元のページ）に対してwindow.openerを介してアクセスできてしまう可能性があり、これはセキュリティ上の問題を引き起こすことがあります。

rel="noopener"を使用することで、開かれた新しいウィンドウが元のウィンドウに対してwindow.openerを持たないようにします。これにより、クロスウィンドウスクリプティング（XSS）攻撃やセキュリティ上の問題を軽減することができます。

具体的には、以下のように使用します：

<a href="https://example.com" target="_blank" rel="noopener">外部サイトへのリンク</a>

このようにすることで、セキュリティ上の問題を回避できます。

セキュリティ上の問題とは

先ほど説明した部分

>>開いた新しいウィンドウが元のウィンドウ（オープンした元のページ）に対してwindow.openerを介してアクセスできてしまう可能性があり、これはセキュリティ上の問題を引き起こすことがあります。

とありますがどのような問題が起こるのでしょうか？それに着いて回答していきます。

window.openerを介してアクセスできると、以下のようなセキュリティ上の問題が引き起こされる可能性があります：

1. 情報漏洩: オープンした新しいウィンドウが元のウィンドウにアクセスできるため、個人情報やセッション情報などの敏感な情報が漏洩する可能性があります。
2. CSRF (Cross-Site Request Forgery) 攻撃: 攻撃者が新しいウィンドウを開いて元のページに対して操作を行うことができるため、CSRF攻撃に悪用される可能性があります。
3. 悪意のあるリダイレクト: 新しいウィンドウが元のウィンドウを操作できる場合、悪意のあるリダイレクトが行われ、ユーザーが意図しないページに誘導される可能性があります。

これらの問題を回避するために、rel="noopener"を使用することが推奨されています。この属性を使用することで、新しいウィンドウが元のウィンドウにアクセスできなくなり、セキュリティ上のリスクが軽減されます。

基本的に外部リンクにはrel=”noopener”をつけておくのが無難

基本的には外部リンクにrel="noopener"を付けることが推奨されています。これにより、セキュリティ上のリスクを軽減し、前述のような問題を回避できます。特にtarget="_blank"を使用して新しいウィンドウやタブで外部リンクを開く場合に、この対策が重要です。

以下は例です：

<a href="https://example.com" target="_blank" rel="noopener">外部サイトへのリンク</a>

このように設定することで、新しいウィンドウが元のウィンドウに対してセキュリティ上の問題を抱えにくくなります。セキュリティに対する意識が高まっている現代では、このようなベストプラクティスを導入することが一般的となっています。

SEO的に問題はあるのか？

rel="noopener"を使用することによるSEO上の問題は通常ほとんどありません。SEO（Search Engine Optimization）は主にコンテンツの品質、構造、ページの速度、リンクの正確性などに焦点を当てています。rel="noopener"はセキュリティ上の問題を軽減するためのものであり、検索エンジンは通常、この属性の有無に関してペナルティを与えることはありません。

ただし、SEOの観点から考えるならば、外部リンクを開く際にrel="noopener"を追加することで、ユーザーエクスペリエンスが向上し、ページの信頼性が高まる可能性があります。これがユーザーエクスペリエンス向上につながり、間接的にSEOに影響を与える可能性がありますがSEO対策を意識して導入するというよりはセキュリティの観点から導入するのが望ましいです。

実際は使われている主な事例

一般的なウェブサイトやサービスでこの属性が使用される例です：

1. ブログプラットフォーム:
   • WordPressやBloggerなどのブログプラットフォームでは、投稿された外部リンクが新しいウィンドウで開く際にrel="noopener"が使用されることがあります。
2. フォーラム:
   • オンラインフォーラムやコミュニティプラットフォームでは、ユーザーが投稿した外部リンクが新しいウィンドウで開く際にrel="noopener"が使用されることがあります。
3. ニュースサイト:
   • ニュースサイトやオンラインメディアでは、記事内の外部リンクが新しいウィンドウで開く際にrel="noopener"が使用されることがあります。
4. ウェブアプリケーション:
   • ウェブアプリケーションやオンラインサービスでも、ユーザーが別のサイトにリンクする場合にrel="noopener"が利用されることがあります。

これらの例では、セキュリティ上の配慮から外部リンクを新しいウィンドウで開くときにrel="noopener"を使用しています。

まとめ

SEO対策の観点から見ると効果はないですが、外部リンクを多用するブログ機能を使う場合では覚えておいた方が良いスキルだと思います。