【HTML Living Standard】noopener属性値の使い方
noopener属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
noopener定数は、HTMLの<a>タグや<area>タグなどのリンク要素のrel属性に指定することで、新しいタブやウィンドウで開かれるリンクのセキュリティを強化する振る舞いを表す定数です。特に、target="_blank"属性と組み合わせて使用される際に重要となります。
この定数を指定しない場合、新しく開かれたページはwindow.openerプロパティを通じて元のページへの参照を持つことができ、悪意のあるスクリプトによって元のページのURLを変更したり、フィッシング詐欺に利用したりする「タブナビング」と呼ばれるセキュリティ脆弱性が発生する可能性があります。
noopener定数をrel="noopener"のように設定すると、新しく開かれたウィンドウのwindow.openerプロパティが強制的にnullに設定されます。これにより、新しいページから元のページへのJavaScriptによるアクセスや操作が完全にブロックされ、上記のようなセキュリティリスクを効果的に防止します。
システムエンジニアを目指す初心者の方にとって、ウェブサイトやアプリケーションを開発する際に、外部サイトへのリンクを安全に扱うための基本的な知識として、このnoopener定数の理解と適切な使用は非常に重要です。ユーザーのセキュリティとプライバシー保護のため、target="_blank"を使用する際は常にrel="noopener"を併用することが推奨されます。
構文(syntax)
1<a href="https://example.com" target="_blank" rel="noopener">リンク</a>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML noopener noreferrer でリンクを安全にする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>外部リンクのセキュリティ対策</title> 7</head> 8<body> 9 <h1>外部リンクの安全な実装</h1> 10 11 <!-- 12 target="_blank" を使用して新しいタブで外部サイトへリンクする場合、 13 セキュリティとプライバシー保護のために rel="noopener noreferrer" を設定することを強く推奨します。 14 15 - noopener: 新しいタブ (開かれたページ) から元のタブ (開いたページ) への悪意のあるアクセスを防ぎます。 16 - noreferrer: リンク先へ元のページのリファラー情報 (どのページから来たか) が送信されるのを防ぎます。 17 --> 18 <p> 19 <a href="https://example.com" target="_blank" rel="noopener noreferrer"> 20 安全な外部リンクの例 (新しいタブで開く) 21 </a> 22 </p> 23</body> 24</html>
このサンプルコードは、HTMLで外部サイトへリンクを張る際のセキュリティ対策について説明しています。特に、target="_blank"属性を使用してリンクを新しいタブで開く場合に重要となるrel="noopener noreferrer"属性の適切な使用方法を示しています。
target="_blank"を使って新しいタブで外部リンクを開くと、開かれた新しいタブのJavaScriptから、元のタブの情報を操作されたり、悪意のあるサイトへ誘導されるといったセキュリティリスクが生じる可能性があります。
このようなセキュリティリスクとプライバシーの保護のために、rel="noopener noreferrer"を設定することが強く推奨されます。この属性は引数や戻り値を持たず、設定するだけで特定のセキュリティ機能を有効にします。
noopenerは、新しいタブから元のタブへの悪意のあるアクセスを防ぐ役割を担います。これにより、開いたページが元のページを操作するのを防ぎ、セキュリティを向上させます。
一方、noreferrerは、リンク先のウェブサイトへ、ユーザーがどのページから来たかというリファラー情報が送信されるのを防ぎます。これにより、ユーザーのプライバシー保護に貢献します。
このように、rel="noopener noreferrer"を組み合わせることで、ユーザーが安全かつプライベートに外部サイトへアクセスできるようになります。
target="_blank" を使って新しいタブで外部リンクを開く際は、セキュリティとプライバシー保護のため、rel="noopener noreferrer" の設定が非常に重要です。noopener は、開かれた新しいタブから元のページ（あなたのサイト）への悪意あるアクセスや操作を防ぐためのセキュリティ対策です。これにより、フィッシングなどのリスクからユーザーを守ります。また、noreferrer は、リンク先へ元のページがどこだったかという情報（リファラー）が送信されることを防ぎ、ユーザーのプライバシーを保護します。この二つの属性を併用することで、安全でプライバシーに配慮したWebサイトを提供できますので、常に記述するように心がけましょう。
HTMLで外部リンクのセキュリティとSEO対策を行う
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>外部リンクのセキュリティとSEO対策</title> 7</head> 8<body> 9 <h1>外部リンクのセキュリティとSEO対策</h1> 10 11 <p> 12 以下のリンクは、新しいタブで開く外部サイトへのリンクです。<br> 13 <code>rel="noopener noreferrer nofollow"</code> を設定することで、セキュリティ向上とSEO対策を行います。 14 </p> 15 16 <!-- 17 target="_blank" を使用する場合、新しいタブが開かれ、元のタブへのアクセスを防ぐために noopener を推奨します。 18 noopener: 新しいタブから元のタブへのアクセス（window.opener）を無効にし、セキュリティ上の脆弱性（tabnabbing）を防ぎます。 19 noreferrer: リンク先へリファラー情報（どのページから来たか）を送信しません。 20 nofollow: 検索エンジンがこのリンクをたどらず、SEO評価に影響を与えないようにします。 21 --> 22 <p> 23 <a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow"> 24 新しいタブで開く安全な外部サイトへのリンク 25 </a> 26 </p> 27</body> 28</html>
HTMLの<a>タグに設定するrel属性にnoopenerを指定することは、target="_blank"で新しいタブを開く外部リンクにおいて、セキュリティを強化するための重要な役割を果たします。このnoopener属性は、新しいタブで開かれたページがJavaScriptを使って元のタブを操作する（window.opener経由）ことを防ぎます。これにより、「tabnabbing」と呼ばれる、元のタブを悪意のあるページに置き換えてユーザーを騙すフィッシング攻撃から、訪問者を守ることが可能になります。noopener自体は引数や戻り値を持たず、設定するだけでこのセキュリティ機能が有効になります。
さらに、rel属性にはnoreferrerやnofollowといった値も指定できます。noreferrerは、リンク先のウェブサイトへ、ユーザーがどのページから来たかというリファラー情報を送信しないようにするものです。これはユーザーのプライバシー保護に役立ちます。nofollowは、検索エンジンに対してこのリンクをたどらず、リンク先のページのSEO評価に影響を与えないように指示するものです。例えば、広告リンクや信頼できないコンテンツへのリンクに設定することで、ウェブサイトのSEO評価を適切に管理できます。これらnoopener、noreferrer、nofollowを適切に組み合わせることで、ウェブサイトのセキュリティとSEO対策の両面から、安全で信頼性の高い外部リンクを提供できます。
target="_blank"で新しいタブやウィンドウを開くリンクでは、必ずrel="noopener"を含めてください。これは、新しいタブから元のタブへの不正なアクセスを防ぎ、タブナビングと呼ばれるセキュリティリスクからユーザーを保護するための重要な対策です。また、rel="noreferrer"を追加すると、リンク先のサイトへ「どのページから来たか」という情報（リファラー情報）が送信されなくなり、ユーザーのプライバシー保護に役立ちます。さらに、rel="nofollow"は、検索エンジンに対し、そのリンクをたどらず、SEO評価に影響を与えないように指示するものです。信頼できないサイトへのリンクや広告リンクなどに適用し、自身のサイトのSEO品質を保つために利用します。これらの属性を適切に設定することで、安全で信頼性の高いウェブページを提供できます。