rel="noopener noreferrer" の役割とセキュリティ上の重要性

こんにちは。ゆうせいです。

新人研修中に受講者から以下の質問をいただきました。

arget="_blank" 属性を使用する際に、セットで rel="noopener noreferrer"を記述するのはなぜですか?

今回はこの質問に答えたいと思います。

ウェブサイトのリンクを設定する際、新しいタブでページを開くために target="_blank" という属性を使用することがあります。この属性を使用する際に、セットで記述が推奨されるのが rel="noopener noreferrer" です。今回は、この記述がどのような役割を持ち、なぜ必要なのかを解説します。

rel="noopener" の役割と仕組み

rel="noopener" は、リンク先のページから元のページを操作できないように制限するための記述です。

通常、新しいタブで開かれたリンク先のページは、元のページの window.opener というオブジェクトにアクセスできる権限を持っています。これは、実家に遊びに来た友人が、実家の鍵を預かっているような状態に例えることができます。

もしリンク先のページが悪意のある構造になっていた場合、この window.opener を通じて、元のページを偽のログイン画面に書き換えるといった攻撃が可能です。rel="noopener" を記述することで、リンク先との親子関係を完全に切り離し、こうしたリスクを未然に防ぎます。

rel="noreferrer" の役割と仕組み

rel="noreferrer" は、リンクをクリックした際に「どのページから来たか」という情報(リファラ)を、リンク先のサーバーに送信しないように制御する記述です。

ウェブサイト間の移動は、郵便物のようなものです。通常、郵便物には差出人の住所が記載されていますが、rel="noreferrer" を指定することは、差出人を伏せて手紙を送ることに似ています。

これにより、自サイトの URL 構造などの内部情報が外部へ漏洩することを防ぐことができます。なお、rel="noreferrer" を記述すると rel="noopener" の機能も内包されるため、現代のブラウザでは両方を記述するか、セキュリティとプライバシーを重視して noreferrer のみを記述する場合もあります。

メリットとデメリット

この属性を適切に使用することによる事実関係を整理します。

メリット

  • フィッシング詐欺のリスク低減: window.opener を利用したページの改ざんを防ぐことができます。
  • ブラウザのパフォーマンス向上: 親子関係が切り離されることで、別々のプロセスでページが処理され、動作がスムーズになる場合があります。
  • プライバシー保護: リファラ情報を送信しないため、ユーザーの閲覧経路を秘匿できます。

デメリット

  • リファラ解析への影響: 自社で運営する別サイトへ送客する場合、解析ツール上で「どこから来たか」が計測できなくなります。
  • 一部の古いブラウザへの対応: 非常に古いブラウザでは機能しないことがありますが、現代の主要なブラウザでは標準的にサポートされています。

セキュリティ対策の実装例

HTML で記述する場合の標準的なコードは以下の通りです。

HTML

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

このように、target="_blank" を使用する場合は、セットで記述する習慣をつけることが推奨されます。

学習のステップ

rel="noopener noreferrer" について理解を深めるためには、以下の手順で学習を進めることをお勧めします。

  1. window.opener の仕組みを理解する: ブラウザ上で、開かれたページがどのように元のページを参照できるのか、JavaScript の基礎知識を確認してください。
  2. HTTP リファラの仕様を確認する: ブラウザがサーバーに送信するリクエストヘッダの内容を学び、情報の流れを把握してください。
  3. セキュリティポリシーの全体像を学ぶ: Content Security Policy(CSP)など、ウェブサイト全体の安全性を高める他の手法についても学習を広げてください。

これらのステップを踏むことで、個別の属性の意味だけでなく、ウェブセキュリティ全体の構造的な理解が可能になります。

グループでは新人エンジニア研修のアシスタント講師を募集しています。

投稿者プロフィール

山崎講師
山崎講師代表取締役
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します!
この記事に間違い等ありましたらぜひお知らせください。

学生時代は趣味と実益を兼ねてリゾートバイトにいそしむ。長野県白馬村に始まり、志賀高原でのスキーインストラクター、沖縄石垣島、北海道トマム。高じてオーストラリアのゴールドコーストでツアーガイドなど。現在は野菜作りにはまっている。