【HTML Living Standard】noreferrer属性値の使い方
noreferrer属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
noreferrer定数は、HTMLの<a>要素や<area>要素といったハイパーリンクを生成する要素のrel属性に指定するキーワードを表す定数です。
この定数をrel属性に含めることで、リンクがクリックされた際に、元のページからリンク先のページへ「リファラー情報」が送信されるのを防ぎます。リファラー情報とは、訪問者がどのURLから来たかを示す情報であり、通常はHTTPヘッダーに含まれてリンク先に送られますが、noreferrerを指定するとこの情報が遮断されます。
主な用途として、ユーザーのプライバシー保護とセキュリティの向上が挙げられます。例えば、外部サイトへリンクする際に、自サイトのURLを相手に知られたくない場合に利用されます。
また、noreferrerは、新しいタブやウィンドウでリンクを開く（target="_blank"を使用する）際に特に重要です。この定数が指定されていると、リンク先のページからJavaScriptを通じて元のページ（window.opener）へのアクセスが不可能になります。これにより、リンク先の悪意あるページが元のページを操作したり、ユーザーをだますようなフィッシング攻撃を実行したりするリスクを軽減できます。したがって、target="_blank"と組み合わせて使用することが、多くのセキュリティガイドラインで推奨されています。
構文(syntax)
1<a href="https://example.com" rel="noreferrer">リンクテキスト</a>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML noreferrer/noopenerで安全にリンクする
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>HTML noreferrer/noopener サンプル</title> 7</head> 8<body> 9 10 <h1>外部サイトへの安全なリンクの例</h1> 11 12 <p> 13 このリンクは、<code>target="_blank"</code> を使用して新しいタブで外部サイトを開く際に、 14 セキュリティリスクを軽減するための <code>rel</code> 属性の活用例です。 15 </p> 16 17 <!-- 外部サイトへのリンクを作成します --> 18 <a 19 href="https://www.example.com" 20 target="_blank" 21 rel="noreferrer noopener" 22 > 23 安全な外部サイトへのリンク (新しいタブで開きます) 24 </a> 25 26 <!-- 27 [解説] 28 - href: リンク先のURLを指定します。 29 - target="_blank": リンクを新しいタブまたはウィンドウで開くように指定します。 30 ただし、この指定だけではセキュリティリスクが生じる可能性があります。 31 - rel="noreferrer noopener": `target="_blank"` を使用する際のセキュリティ対策です。 32 - noreferrer: クリックしたリンク先に対して、元のページの情報（参照元情報）を送信しないようにします。 33 これにより、プライバシー保護とセキュリティ向上が図られます。 34 - noopener: 新しいタブで開かれたページが、元のページへのアクセスや操作（`window.opener`）を 35 行うことを防ぎます。これにより、フィッシング攻撃などのセキュリティリスクを軽減します。 36 --> 37 38</body> 39</html>
このHTMLコードは、ウェブページから外部サイトへリンクを張る際に、新しいタブで安全に開くための重要な記述方法を示しています。具体的には、<a>タグのrel属性にnoreferrerとnoopenerを設定する例です。
通常、target="_blank"を指定してリンクを新しいタブで開くと、セキュリティ上の潜在的なリスクが発生する可能性があります。開かれた側のページが、元のページの情報にアクセスしたり、悪意のある操作を行ったりする危険性があるためです。
ここで登場するのが、rel="noreferrer noopener"です。
noreferrerは、リンクをクリックして新しいページに移動した際に、元のページがどこであったかという情報（参照元情報）を、リンク先のページに送信しないようにする役割を持っています。これにより、ユーザーのプライバシーが保護され、情報漏洩のリスクが軽減されます。
一方、noopenerは、新しいタブで開かれたページが、元のページ（つまり、このリンクが設置されたページ）をJavaScriptなどで操作することを防ぎます。これにより、フィッシング攻撃などのセキュリティ脅威から元のページを保護できます。
これらの属性は引数を取らず、特定の値（noreferrerやnoopener）を記述するだけで、ブラウザに対してセキュリティを高める挙動を指示します。戻り値もありません。システムエンジニアとしては、target="_blank"を使用する際には、セキュリティを考慮し、必ずrel="noreferrer noopener"を付加することを覚えておくことが重要です。
target="_blank"で新しいタブやウィンドウを開くリンクでは、セキュリティ対策としてrel="noreferrer noopener"の記述が非常に重要です。この属性がない場合、開いた新しいページから元のページが操作されたり、ユーザーの参照元情報が意図せず送信されたりするセキュリティリスクが生じます。
noreferrerはリンク先へ参照元情報を送信しないことでプライバシー保護に貢献します。また、noopenerは新しいタブがwindow.openerを通じて元のページにアクセスし、悪意のある操作を行うことを防ぎ、フィッシングなどの攻撃からユーザーを守ります。
新しいタブで外部サイトを開く際には、これら二つの属性を必ずセットで利用し、安全かつ信頼性の高いウェブサイトを構築してください。これはウェブサイトのセキュリティを確保するための基本的な推奨事項です。
rel="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>noreferrerとnoopenerのサンプル</title> 7</head> 8<body> 9 <h1>rel="noopener noreferrer" 属性のサンプル</h1> 10 <p> 11 以下のリンクをクリックすると、新しいタブでウェブサイトが開きます。 12 このとき、<code>rel="noopener noreferrer"</code> 属性によって、いくつかのセキュリティとプライバシー上の利点が得られます。 13 </p> 14 <!-- 15 rel="noopener": 新しいタブで開かれたページが、JavaScriptのwindow.openerを通じて 16 元のページ（このページ）にアクセスするのを防ぎます。 17 これにより、悪意のあるサイトが元のページを操作するのを防ぎます。 18 rel="noreferrer": 新しいタブで開かれたページに、HTTPリファラーヘッダー（元のページのURL情報）を 19 送信するのを防ぎます。これにより、プライバシーが保護されます。 20 --> 21 <a href="https://example.com" target="_blank" rel="noopener noreferrer"> 22 安全に外部サイトへリンクする例 (example.com) 23 </a> 24 25 <p> 26 <code>target="_blank"</code> と併用することで、セキュリティリスクを軽減し、 27 ユーザーのプライバシーを保護するのに役立ちます。 28 </p> 29</body> 30</html>
HTMLの<a>タグで使用されるrel属性の属性値であるnoopenerとnoreferrerは、リンク先のページが開かれる際のセキュリティとプライバシー保護を目的としています。これらの属性は、引数や戻り値を持たず、設定するだけでウェブブラウザの挙動を直接制御します。
rel="noopener"は、target="_blank"で新しいタブやウィンドウにリンクを開く際に、開かれた先のページがJavaScriptの機能を使って元のページ（リンク元）にアクセスしたり、悪意を持って操作したりするのを防ぎます。これにより、フィッシング詐欺などのセキュリティリスクを軽減します。
一方、rel="noreferrer"は、新しいタブやウィンドウで開かれたページに、元のページのURL情報を含む「HTTPリファラーヘッダー」を送信しないようにします。これにより、ユーザーのプライバシーが保護され、リンク先のウェブサイトが訪問者の参照元を追跡するのを防ぐことができます。
このように、rel="noopener noreferrer"をtarget="_blank"と組み合わせて使用することで、外部サイトへの安全なリンクを提供し、ユーザーのセキュリティとプライバシーを効果的に保護できます。これはウェブサイトを構築する上で、重要なセキュリティ対策の一つです。
target="_blank"で外部サイトを新しいタブで開くリンクには、必ずrel="noopener noreferrer"属性を追加してください。これはウェブサイトのセキュリティとユーザーのプライバシー保護に不可欠な対策です。noopenerは、新しいタブで開かれたページが元のページにアクセスし、悪意ある操作を行うリスクを防ぎます。一方、noreferrerは、リンク先のページに元のページのURL情報（リファラーヘッダー）が送信されるのを防ぎ、プライバシーの漏洩を防ぎます。これらの属性を組み合わせることで、安全なリンクを提供し、ユーザーとウェブサイトの双方を守る重要な役割を果たします。安全性を確保するために、常に記述するよう心がけましょう。