こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
HTMLでリンクを作るとき、たとえばこんなコード、よく使いますよね？
<a href="https://example.com" target="_blank">外部サイトへ</a>
この target="_blank" を使うと、クリックしたリンク先が新しいタブで開かれるので、ユーザーが元のページに戻りやすくて便利です。
ですが実はこの書き方、あるセキュリティリスクを含んでいるってご存知でしょうか？
それを防ぐために絶対に入れておきたいのが、今回ご紹介する rel="noopener" という属性です。
この記事ではその意味と使い方、そしてなぜ「target=_blank」とセットで必須なのかをわかりやすく解説します！
rel="noopener"とは？
rel="noopener" は、簡単に言うと「リンク先に、今開いているページの情報を渡さない」ための設定です。
どういうことかというと、target="_blank" でリンクを開くと、リンク先のページは window.opener を使って、元のページを操作できてしまうんです。
実際に起こるリスク：元ページの書き換え
例えば、以下のようなコードで外部リンクを開いたとしましょう。
<a href="https://malicious-site.com" target="_blank">クリックしてね</a>
このリンク先（悪意あるサイト）では、次のようなJavaScriptが仕込まれているかもしれません。
window.opener.location = "https://偽のログインページ.com";
するとどうなるかというと……
ユーザーが開いていた元のサイトが、偽サイトに勝手に書き換えられてしまうというわけです！
これは「タブナビゲーション攻撃（Tabnabbing）」と呼ばれる手法で、フィッシング詐欺やなりすましに悪用される危険な攻撃のひとつなんです。
rel="noopener" をつけるとどうなる？
この攻撃を防ぐ方法がこれです！
<a href="https://example.com" target="_blank" rel="noopener">安全な外部リンク</a>
rel="noopener" を付けることで、リンク先から window.opener が使えなくなります。
つまり、元ページを操作する手段がなくなるので、不正なリダイレクトや書き換えが起こりません。
rel="noreferrer" との違いは？
よくセットで見かけるのが rel="noreferrer" ですが、
- noopener の効果を含む（openerを無効にする）
- さらに、リファラー情報（どのページから来たか）も送信しない
という意味があります。
Google Analyticsや広告のトラッキングなど、リファラー情報を使っている場合は noreferrer だと情報が届かないことがあるため、基本は noopener のみでOKです。
実務でのベストプラクティス
現在のHTML実装では、外部リンクを新しいタブで開くときは、次のように書くのがベストです。
<a href="https://外部サイト.com" target="_blank" rel="noopener">外部サイトを見る</a>
一部のCMSやWordPressでも、最近では target="_blank" を指定すると自動で rel="noopener" が付くケースが増えてきましたが、手動で書く場合は忘れずに追加しましょう！
まとめ：「小さな属性」で大きなセキュリティを
たった一つの属性、rel="noopener"。
でもこれがあるかないかで、ユーザーを危険な攻撃から守れるかどうかが決まると言っても過言ではありません！
- target="_blank" を使うときは、必ず rel="noopener" をセットで
- rel="noreferrer" は必要な場合だけ慎重に
- WordPressやCMSでも自動付加を確認しよう
あなたのサイトが安心して使える場所であるために、こうした細かな配慮がとても大切です。
今日からぜひ、「リンクを開くときにはnoopener！」を習慣にしていきましょう！
