EN/CH Mode

BRUCE_FE CSS Interview Notes - How to Properly Open External Links

Master the complete guide to safely opening external links in new tabs, understand the correct use of target and rel attributes, and how to prevent security risks and improve user experience.

EN/CH Mode

Lazy to read articles? Then watch videos!

Basic Methods for Opening External Links

In HTML, using the target="_blank" attribute can open links in a new tab or window. When users click such links, the browser keeps the current page and loads the target URL in a new tab.

<a href="https://example.com" target="_blank">Visit Example Website</a>

Possible Values for target Attribute

_blank: Open in new tab or window
_self: Open in current window (default behavior)
_parent: Open in parent frame
_top: Open in the entire window, canceling all frames
framename: Open in the specified named frame

Security Concerns and Solutions

Using only target="_blank" to open external links poses security risks. The newly opened page can access the original page's window object through window.opener, which may lead to tabnabbing attacks.

Potential Risk Example

// Code that might be executed on a malicious website
if (window.opener) {
  // Can access the original page's window object
  window.opener.location = 'https://malicious-site.com/fake-login.html';
  
  // When user returns to the original tab, they may have been redirected to a phishing page
}

To prevent this, you should always add the rel="noopener noreferrer" attribute when opening external links:

<a 
  href="https://example.com" 
  target="_blank" 
  rel="noopener noreferrer"
>
  Safely Visit External Website
</a>

rel="noopener"

1. Prevents newly opened windows from accessing window.opener
2. Prevents tabnabbing attacks
3. Modern browsers add this by default when using target="_blank"

rel="noreferrer"

1. Prevents sending Referer information in request headers
2. Enhances privacy protection, doesn't reveal source website
3. Provides backward compatibility for older browsers

🔥 Common Interview Questions

(1) What security risks exist with target="_blank"? How to solve them?

Answer: When using target="_blank" to open links, the following security risks exist:

1. Window Reference Vulnerability: The new page can access the original page through window.opener and even modify the original page's URL.
2. Performance Issues: The new page shares processes with the original page, which may affect the original page's performance.
3. Referer Information Leakage: May leak user's source website information.

Solution: Add the rel="noopener noreferrer" attribute

<!-- Unsafe approach -->
<a href="https://example.com" target="_blank">Visit External Website</a>

<!-- Safe approach -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit External Website</a>

Explanation:

noopener: Makes window.opener return null, preventing tabnabbing.
noreferrer: Prevents sending Referer header information, protecting privacy.