Tweet
The rel="noopener noreferrer" attribute is a security and privacy measure you add to HTML links, particularly those that open in a new tab or window using target="_blank" .
Here’s a breakdown of why it matters.
The Security Risk It Solves
When you use target="_blank" to open a link in a new tab, the newly opened page gains access to the original page's window.opener object via JavaScript. This can be a serious security vulnerability.
The rel="noopener noreferrer" attribute prevents these issues through two parts :
You can add it to any link that opens in a new tab.
HTML Example:
html<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>
Many modern Content Management Systems (CMS), such as WordPress, automatically add these attributes to external links that open in a new tab. When to Use It
In short, rel="noopener noreferrer" is a simple addition that significantly enhances the safety and privacy of your site.
Here’s a breakdown of why it matters.
The Security Risk It Solves
When you use target="_blank" to open a link in a new tab, the newly opened page gains access to the original page's window.opener object via JavaScript. This can be a serious security vulnerability.
- The window.opener Access: This object provides the new page with a reference to the page that opened it.
- "Tabnabbing" Attack: A malicious site opened this way can use window.opener to silently redirect your original page to a fake website, such as a phishing page designed to steal login credentials. This attack is known as "tabnabbing" .
The rel="noopener noreferrer" attribute prevents these issues through two parts :
- noopener (Security): This is the primary fix. It severs the connection between the new tab and the original one by setting the window. opener property to null. This prevents the new page from controlling or redirecting the original page, protecting your users from malicious attacks.
- noreferrer (Privacy): This directive instructs the browser not to send the Referer HTTP header to the destination website. This keeps your site's URL private from the site you are linking to, which can be important for user privacy. It also has a secondary effect of providing the same security protection as noopener in older browsers that didn't support it .
You can add it to any link that opens in a new tab.
HTML Example:
html<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>
Many modern Content Management Systems (CMS), such as WordPress, automatically add these attributes to external links that open in a new tab. When to Use It
- ✅ Recommended: Always use it for external links that open in a new tab to protect your users and site .
- ❌ Often Unnecessary: For internal links within the same website, as the security risk doesn't apply, and you generally want to p*** referral data for analytics.
- Not SEO Related: This attribute is for security and privacy, not for SEO. It is different from rel="nofollow", which tells search engines not to p*** ranking credit to a link.
In short, rel="noopener noreferrer" is a simple addition that significantly enhances the safety and privacy of your site.
Comment