rel=noopener noreferrer: 外部リンクのセキュリティ対策
多くのWordPressユーザーは、自分のブログに謎のコードスニペットが表示されることに気付くかもしれません。 外部リンク サイトの HTML を調べたところ、「rel=”noopener noreferrer”」というコードが、サイト所有者の直接的なアクションなしに頻繁に表示されるため、その目的と SEO への潜在的な影響について疑問が生じます。
自動的に追加されたこれらのタグは、SEO の観点からは心配する必要はありません。WordPress は、特定の状況下で、標準的な方法として外部リンクにこれらの属性を実装します。検索エンジンはこれらの属性を完全に理解しており、サイトのインデックス作成や検索結果でのランク付けに悪影響を与えることはありません。
何が rel="noopener noreferrer" ですか?
その rel="noopener noreferrer" は、Web サイト上の外部リンク専用に設計された HTML 属性です。この属性は実際には、独立して動作する 2 つの個別のコンポーネントで構成されています。
- rel="noopener"
- rel="noreferrer"
これらのコンポーネントはそれぞれ異なる目的を果たしますが、外部 Web サイトがサイトとやり取りする方法に影響します。
この属性を実装すると、HTML コードに次のように表示されます。
<a href="https://externalsite.com" target="_blank" rel="noopener noreferrer">
リンクにこのコードが含まれているかどうかを確認するのは簡単です。 ウェブサイトのコードエディタ ブラウザの「検索」機能を使って検索してください rel="noopener noreferrer"、または任意の Web ページを表示し、右クリックして [検査] を選択し、開発者コンソールでコードを検索します。
2 番目の方法は、自分が所有または管理していない Web サイトを調べる場合に特に便利です。これにより、開発者やサイト所有者は、Web ページ全体の外部リンクのセキュリティ属性が適切に実装されているかどうかを確認できます。
何が rel="noreferrer" ですか?
rel=”noreferrer” 属性は HTML リンクのプライバシー メカニズムとして機能し、訪問者がサイトから別のサイトに移動するときにリファラー情報が転送されるのを防ぎます。この HTML 属性を実装すると、宛先サイトの分析ツールでトラフィック ソースとして自分の Web サイトが隠されます。
通常、誰かがウェブサイトのリンクをクリックすると、リンク先のサイトはトラフィックのソースとしてあなたのドメインを識別します。リンクに rel=”noreferrer” を追加すると、この識別はブロックされます。これらの訪問者は、Google Analytics などの分析プラットフォームで参照トラフィックとして表示されるのではなく、直接トラフィックとして登録されます。
この属性は 2 つの方法で実装できます。
<a href="https://examplesite.com" target="_blank" rel="noreferrer">
または、新しいタブで開かずに:
<a href="https://examplesite.com" rel="noreferrer">
この隠されたリファラー情報は、一部のウェブサイト所有者が分析で気づく直接トラフィックの不可解な急増を説明するかもしれません。
外部リンクにrel=”noreferrer”を使用する場合
発信リンクに rel=”noreferrer” 属性を実装する戦略的な理由はいくつかあります。
- 競合他社のリンク: 競合他社へのリンクを張る際に、自社の 紹介データ プライベート
- 信頼できないウェブサイト: 完全に信頼できないサイトにリンクする場合
- プライバシーに対する懸念: トラフィックソース情報を共有せずにユーザーのプライバシーを維持したい場合
この属性を追加するのは簡単です。上記のように、リンク HTML に rel=”noreferrer” を追加するだけです。すでに外部リンクを新しいタブで開いている場合は、このコードを組み込むのに追加の作業は最小限で済みます。
何が rel="noopener" ですか?
rel=”noopener” 属性は、外部リンクを使用する Web サイトにとって重要なセキュリティ対策として機能します。この HTML 属性は、リンクされたページを通じてユーザーを狙う高度な攻撃ベクトルからサイトを保護するのに役立ちます。正しく実装すると、悪意のある Web サイトが window.opener JavaScript プロパティを通じてページにアクセスするのを防ぐことができます。
リバースタブナッピングからサイトを保護する
リバース タブナッピングは、リンクが新しいタブで開かれるときに発生する重大なセキュリティ脅威です。適切な保護がなければ、攻撃者は window.opener 関係を悪用して、元のページを情報を盗むために設計された不正なサイトにリダイレクトする可能性があります。
この攻撃は、ユーザーがすでにアクセスしたページを信頼することが多いため、特に危険です。ユーザーが正当なサイトだと信じて再びアクセスすると、知らないうちに機密情報を攻撃者に提供してしまう可能性があります。
攻撃の仕組み:
- ユーザーがサイト上の外部リンクをクリックすると、新しいタブで開きます
- 新しいタブの内容には悪意のあるコードが含まれています
- このコードはwindow.openerを使用して元のページをリダイレクトします
- ユーザーが元のタブに戻ると、フィッシングサイトが見つかる
幸いなことに、外部リンクに rel=”noopener” を追加すると、この接続が切断され、新しいページが元のページを操作することを防ぐことができます。
内部リンクにrel=”noopener”を使用する場合
独自のドメイン内のページへのリンクの場合、rel=”noopener” は通常不要です。内部リンクは、ソース ページとリンク先ページの両方を制御できるため、セキュリティ リスクは最小限に抑えられます。
重要な考慮事項:
- WordPressは新しいタブで開く外部リンクにrel=”noopener”を自動的に追加します
- WordPress以外のプラットフォームでは手動での実装が必要です
- rel=”noreferrer”属性は別の目的があり、アナリティクストラッキングに影響を与える可能性があります。
内部リンクは管理された環境内を移動するため、これらのセキュリティ属性は必要ないことに留意してください。外部リンク、特に完全に信頼または管理していないサイトを指すリンクに rel=”noopener” を適用することに重点を置いてください。
rel="noopener noreferrer"の使用 WordPress
WordPressでは、外部リンクにセキュリティ属性を設定すると自動的に追加されます。 新しいタブで開くこの動作は、優れたユーザー エクスペリエンスを維持しながら Web サイトを保護するのに役立ちます。訪問者がこれらのリンクをクリックすると、新しいコンテンツが個別に読み込まれる間もサイトに留まります。
コードの違いは重要です。標準的な外部リンクは次のようになります。
<a href="https://examplesite.com">Example Link</a>
しかし、「新しいタブで開く」オプションを有効にすると、WordPress は次のように変更します。
<a href="https://examplesite.com" target="_blank" rel="noopener noreferrer">Example Link</a>
その target="_blank" 指示は新しいタブを開き、 rel 属性は重要なセキュリティ上の利点を提供します。公開されたページ上の外部リンクの HTML を調べることで、これらの属性を検証できます。
削除できますか?
リンクが同じタブで開かれることを気にしないのであれば、これらの属性を削除するのは簡単です。WordPress エディターで「新しいタブで開く」オプションのチェックを外すだけで、WordPress は追加属性のない標準リンクを生成します。
しかしながら、 リンクを新しいタブで開いたままコードの一部だけを削除するのはより困難ですWordPress はセキュリティ上の理由から、組み込みの切り替え機能なしでこれらの属性を自動的に追加します。
手動で削除することもできます noreferrer コード エディターでこの部分を編集すると、リンク先サイトのアナリティクスであなたのサイトがリファラーとして表示されるようになります。このプロセスには次の内容が含まれます。
- WordPressコードエディタを開く
- 特定のリンクHTMLを見つける
- 属性を直接編集する
その noopener しかし、この属性を永久に削除するのははるかに困難です。手動で削除した後でも、WordPressは通常、ページを公開または更新するとそれを再追加します。この永続性が存在するのは、 noopener 潜在的なセキュリティ上の脆弱性に対する重要な保護を提供します。
この場合、WordPress は完全なカスタマイズよりもセキュリティを優先します。
この動作を変更したい場合、高度なソリューションとしては、テーマ内のカスタム コードや特殊なプラグインを使用することになりますが、セキュリティ上の問題から、このアプローチはほとんどのユーザーには推奨されません。
ほとんどのブラウザに自動Noopener保護機能が搭載されるようになりました
2025 年現在、一般的な Web ブラウザの大半は外部リンクに対する自動「noopener」保護を実装しており、開発者による手動実装の緊急性は低下しています。このセキュリティの進化は 2018 年に Safari から始まり、他のブラウザが追随する先例となりました。
Firefoxは2020年2021月にこのセキュリティイニシアチブに参加し、潜在的なウィンドウ操作攻撃に対する自動保護を追加しました。最も大きな変化はXNUMX年初頭に起こり、Chrome、Edge、Braveを含むすべてのChromiumベースのブラウザがこの機能の標準機能に組み込んだことです。 セキュリティプロトコル.
自動 Noopener のブラウザ タイムライン:
- サファリ:2018
- Firefox: 2020 年 XNUMX 月
- Chromium ブラウザ (Chrome、Edge、Brave): 2021 年初頭
このブラウザレベルの保護は重要なセーフティネットとなり、悪質なサイトがブラウザを介して元のページを操作するのを防ぎます。 window.opener プロパティ。この進歩にもかかわらず、ウェブ開発者は実装を続ける必要があります rel="noopener" 手動で行う必要がある主な理由は 2 つあります。
- あまり一般的でないブラウザのユーザーを保護するため
- 多層防御のセキュリティ対策を維持する
代替ブラウザを使用するインターネット ユーザーのごく一部は、コードに明示的な保護がなければ脆弱なままです。
成功について話しましょう 🏆
まずは、1800 840 999 までお電話ください。
クラウディア先生のドイツ語クラスはとっても楽しく、時間を忘れるほど学習に夢中になります。