External Links

Learn how to create external links in HTML and understand why the rel="noopener" attribute is critical for security when using target="_blank".

What it is

An external link directs users from your website to a different domain. In HTML, this is achieved using the anchor tag <a> with an absolute URL in the href attribute. When you want the link to open in a new browser tab or window, you add target="_blank". However, opening a new context introduces potential security risks related to how the new page interacts with the original one.

Why it matters

• User Experience: Keeping users on your site while allowing them to explore references prevents accidental navigation away from your content.
• Security: Without proper attributes, malicious sites can manipulate the original window's location, leading to phishing attacks.
• Performance: Properly configured links prevent unnecessary memory usage by severing the reference between windows.
• Accessibility: Clear indication that a link opens externally helps screen reader users understand what will happen upon activation.

Syntax or steps

The basic syntax for an external link is simple, but adding security measures requires specific attributes. The key pattern involves combining target="_blank" with rel="noopener noreferrer".

1. Create an anchor tag: <a>.
2. Set the destination: href="https://example.com".
3. Open in new tab: target="_blank".
4. Secure the connection: rel="noopener noreferrer".

Example

<!-- Basic External Link -->
<a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer">
  Visit Wikipedia (opens in new tab)
</a>

<!-- Explanation of Attributes -->
<!-- 
  href: The absolute URL to the external resource.
  target="_blank": Opens the linked document in a new window/tab.
  rel="noopener": Prevents the new page from accessing the window.opener property.
  rel="noreferrer": Prevents sending the Referer header to the new page.
-->

In this example, rel="noopener" ensures that the newly opened Wikipedia page cannot access the JavaScript object representing your original page via window.opener. This is crucial because if the external site were malicious, it could redirect your user's original tab to a phishing site without their knowledge.

Common mistakes

• Omitting rel="noopener": Using only target="_blank" leaves the original window vulnerable to manipulation by the new window.
• Using relative paths for external sites: Writing href="/wikipedia" instead of href="https://www.wikipedia.org" will result in a broken link on your own server.
• Forgetting protocol: Omitting https:// can cause browsers to interpret the link as a file path or fail to load securely.
• Assuming modern defaults: While some modern browsers automatically apply noopener when target="_blank" is used, relying on this is unsafe for older browsers and inconsistent across environments.

When to use it

Use external links with target="_blank" sparingly. It is best reserved for citations, documentation, or resources where leaving the current workflow is acceptable. For internal navigation, always use standard links without target="_blank".

Practice

Guided Exercise: Create a link to "https://developer.mozilla.org" that opens in a new tab and includes both security attributes.

Challenge: Modify the link so that it also indicates to search engines that the link is not endorsed by your site (hint: look up rel="nofollow"). Combine all necessary attributes into one tag.

Solution Hint: Your final tag should include href, target="_blank", and a rel attribute containing multiple values separated by spaces, such as rel="noopener noreferrer nofollow".

Quick check

Question: What specific security vulnerability does rel="noopener" mitigate when using target="_blank"?

Answer: It prevents the newly opened window from accessing the window.opener object, which stops malicious scripts on the external site from manipulating the original page's location (tab-napping).

Summary

External links are essential for referencing outside resources, but they require careful handling to maintain security. Always pair target="_blank" with rel="noopener noreferrer" to protect your users from potential cross-window attacks and ensure robust compatibility across browsers.