HtmlConceptBeginner · 3 min read

What is noopener noreferrer in HTML and Why Use It

In HTML, noopener and noreferrer are values for the rel attribute on links that open in a new tab. noopener stops the new page from controlling the original page, improving security, while noreferrer prevents the browser from sending the original page's address to the new page, protecting privacy.

⚙️

How It Works

When you click a link that opens in a new tab using target="_blank", the new page can access the original page through a special connection called window.opener. This is like giving the new page a remote control to the original page, which can be risky if the new page is untrusted.

Adding rel="noopener" cuts this connection, so the new page cannot control or change the original page. Think of it as closing the remote control so the new page can’t press any buttons on your original page.

rel="noreferrer" goes a step further by also stopping the browser from sending the original page’s address (the "referrer") to the new page. This helps keep your browsing history private, like not telling the new page where you came from.

💻

Example

This example shows a link that opens a new tab safely using both noopener and noreferrer. The new page cannot access or control the original page, and it won’t know where the visitor came from.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Noopener Noreferrer Example</title>
</head>
<body>
  <a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example.com safely</a>
</body>
</html>

Output

A clickable link labeled 'Visit Example.com safely' that opens https://example.com in a new tab without giving control or referrer info to the new page.

🎯

When to Use

Use rel="noopener noreferrer" whenever you create links that open in a new tab with target="_blank". This is important for security and privacy, especially when linking to websites you don’t control.

For example, if you link to an external site, adding these attributes prevents that site from potentially manipulating your page or seeing your URL. It’s a simple way to protect your users and your website from common web risks.

✅

Key Points

noopener stops the new tab from controlling the original page.
noreferrer hides the original page’s address from the new tab.
Both improve security and privacy when opening links in new tabs.
Always add rel="noopener noreferrer" with target="_blank" links.

✅

Key Takeaways

Always use rel="noopener noreferrer" with target="_blank" links to improve security.

noopener prevents the new page from controlling the original page.

noreferrer stops the browser from sending the original page’s URL to the new page.

These attributes protect users from malicious or privacy-invading websites.

Adding them is a simple best practice for safe external links.