タグ noopener とはどういう意味ですか? noreferrer 属性/nofollow 効果

ハイパーリンク ラベル <a>コードは通常、noopener、noreferrer、および nofollow 属性とともに使用されます。この記事では、noopener、noreferrer、および nofollow コード属性の使用方法を共有します。

タグ noopener とはどういう意味ですか?

ウィル target="_blank" リンクに追加すると、対象のページが新しいタブで開きます。

新しく開いたページでは、window.opener を介してソース ページ ウィンドウ オブジェクトを取得できるため、潜在的なセキュリティ リスクが埋もれています。

• 具体的には、自分のウェブページ A リンク、別のサードパーティのアドレスを開くことができるウェブページ B リンクがあります。
• Web ページ B は、window.opener を通じて Web ページ A のウィンドウ オブジェクトを取得します。
• 次に、ページ A を使用してフィッシング ページ window.opener.location.href=”abc.com” にジャンプすると、ユーザーは気付かない
• アドレスが飛び出し、このページでユーザー名とパスワードを入力したところ、情報漏えいが発生しました。
• 上記の問題を回避するために、rel を導入し、="noopener" 属性を設定して、新しく開いたページがソース ページのウィンドウ オブジェクトを取得できないようにします。
• このとき、window.opener の値は null です。

そのため、サードパーティのアドレスを新しいタブで開きたい場合は、タグ コードを追加することをお勧めします rel="noopener"属性。

noreferrer 属性の役割

ノーオープナーに似ています。

セットアップrel="noreferrer"その後、新しく開いたページは、ソース ページのウィンドウを攻撃することができなくなります。

同時に、新しく開いたページから document.referrer 情報を取得できません。この情報には、ソース ページのアドレスが含まれます。

通常は noopener と noreferrer を同時に設定しますが、rel="noopener noreferrer"。

後者はwindow.openerへのアクセスを同時に制限する前者の機能を持っているのに、なぜ同時に設定する必要があるのでしょうか。

一部の古いブラウザーは noopener をサポートしていないため、互換性のために。

ノーフォローの役割

検索エンジンによるページの重みの計算には、ページ参照 (バックリンク) の数が含まれます。つまり、ページが他の多くの Web ページからリンクされている場合、そのページは高品質のページと判断されます。

検索結果のランキングが上がります。

rel="nofollow" を設定すると、上記のランキングにリンクが貢献しないことを検索エンジンに伝えることを意味します。

• 通常、リンクなしでリンクするために使用されますSEOランク付けされた内部アドレス (登録ページやログイン ページのリンクなど)、エクスポートの重みを無駄にしたくない、または品質の低いページ。