Chapter 68: Preventing XSS & Clickjacking

Securing External Links (rel="noopener noreferrer")

**Part 14: Security & Best Practices** — Chapter 68: Preventing XSS & Clickjacking in HTML

LEARNING OBJECTIVES ⌵
  • Understand the "Reverse Tabnabbing" phishing exploit on links with target="_blank".
  • Learn how window.opener.location allows an external page to hijack the opener tab.
  • Implement rel="noopener noreferrer" across all external anchor links.
  • Understand modern browser defaults (target="_blank" implicitly applies noopener in Chrome 88+, Safari 12.1+, Firefox 79+).
🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation
🌐
1. Input
Directives & Tags
⚙️
2. Parse
Tokenizer & AST
🌳
3. Layout
Box Model & Flow
🎨
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Reverse Tabnabbing Attack

When a user clicks a standard external link <a href="https://evil.com" target="_blank">:

  1. The new tab opens on evil.com.
  2. Because window.opener is attached, JavaScript on evil.com executes:
    window.opener.location = 'https://fake-login-screen.com';
  3. When the user returns to their original browser tab, they see a fake login screen and re-enter their password, unknowingly handing credentials to the attacker!

Adding rel="noopener" severs the window.opener object, setting it to null.

<!-- Secure External Link -->
<a href="https://external-resource.com" target="_blank" rel="noopener noreferrer">
  Read Full Whitepaper
</a>

📌 Key Takeaways

  • rel="noopener" prevents the destination page from hijacking the opener window via window.opener.
  • rel="noreferrer" prevents leaking the origin URL and sensitive query parameters in the HTTP Referer header.
  • --

❓ Knowledge Check

1. Which of the following is correct?

2. Which of the following is correct?