- 外部リンクにrel属性を設定することは「ユーザーと自サイトを外部ページから守るための小さくて重要な防御線」です
- なぜ外部リンクにrel属性が必要なのか（危険な挙動をイメージする）
- ステップ1：rel="noopener" で「元タブへの参照」を切る
- ステップ2：rel="noreferrer" で「参照元情報（Referer）」も隠す
- ステップ3：業務システムでの基本ルール「外部リンク＋target="_blank" には必ず rel="noopener noreferrer"」
- ステップ4：JavaScriptで外部リンクに自動的にrel属性を付与するユーティリティ
- ステップ5：テンプレートやコンポーネントレベルで「安全な外部リンク」を標準化する
- ステップ6：rel 属性の他の値との関係も軽く押さえておく
- ステップ7：絶対に避けるべき危険な書き方を明確にしておく
- ステップ8：外部リンクとユーザー信頼の関係を理解しておく（重要な深掘り）
- ステップ9：チームで共有するための「外部リンク設計ルール」をコードとドキュメントに刻む
- まとめ：外部リンクにrel属性を設定することは「小さな属性で大きなリスクを減らす実務的なセキュリティ技術」です
外部リンクにrel属性を設定することは「ユーザーと自サイトを外部ページから守るための小さくて重要な防御線」です
業務システムやWebサービスでは、外部サイトへのリンクを設置する場面が多くあります。
- ヘルプページやドキュメントサイトへのリンク
- パートナー企業サイトへのリンク
- SNSやブログ記事へのリンク
- 外部サービスのダッシュボードや管理画面へのリンク
このとき、単に <a href="..."> だけを書くのではなく、 rel 属性を適切に設定することがセキュリティ上とても重要になります。
特に、
target="_blank"で新しいタブを開く外部リンク- 信頼度が未知の外部サイトへのリンク
では、rel 属性の有無が 「攻撃者に自サイトのウィンドウ操作権限を渡してしまうかどうか」 に直結します。
ここでは、初心者向けに、
- なぜ
rel属性が必要なのか - どの値をどう使うべきか
- 業務で使えるJavaScriptユーティリティ
をステップバイステップで解説していきます。
なぜ外部リンクにrel属性が必要なのか（危険な挙動をイメージする）
危険なパターン：target="_blank" だけの外部リンク
次のようなリンクを考えます。
<a href="https://external.example.com" target="_blank">外部サイトへ</a>
ユーザーがこのリンクをクリックすると、 新しいタブ（またはウィンドウ）で https://external.example.com が開きます。
ここまでは普通ですが、 この外部サイトは window.opener を通じて「元のタブ（あなたのサイト）」を操作できてしまいます。
攻撃者が用意した外部サイトが次のようなJavaScriptを実行するとします。
// 攻撃者の外部サイト側コード
if (window.opener) {
window.opener.location = "https://evil-phishing.com";
}
すると、元のタブ（あなたのサイト）が https://evil-phishing.com に書き換えられてしまいます。
ユーザーから見ると、
「さっきまで正規サイトを見ていたタブが、いつの間にか別のログイン画面になっている」
という状態になり、フィッシング攻撃が成立しやすくなります。
ここで重要なのは、「target="_blank" だけだと、外部サイトに自サイトのウィンドウ操作権限を渡してしまう」という点です。