What is Noopener?
Definition
Noopener is an HTML attribute used in hyperlinks (<a> tags) to enhance security and performance when linking to external pages. When added to a link with target="_blank", which opens the link in a new tab or window, the noopener attribute prevents the newly opened page from having control over the original page. This is crucial for preventing malicious websites from exploiting the relationship between the pages to run potentially harmful scripts on the original page or to redirect the original page to phishing or malware sites without the user’s knowledge.
Types
While noopener itself is not categorized into types, it’s often discussed in conjunction with similar attributes that control the behavior of <a> tags, specifically regarding how the browser handles links and their relation to the originating site. These include:
noreferrer: This attribute also enhances security and privacy by instructing the browser not to send the HTTP Referer header to the new page. It also impliesnoopenerbehavior in modern browsers.nofollow: Used to tell search engines not to follow a particular link or count it towards the ranking of the link’s target, affecting SEO.
Examples
- Basic Usage in HTML:
<a href="http://example.com" target="_blank" rel="noopener">Visit Example</a>
This code snippet creates a link that, when clicked, opens “http://example.com” in a new tab without allowing the new page to access the originating page’s window object.
- Combining with
noreferrer:<a href="http://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>
This link not only prevents the new page from accessing the original page’s context but also ensures that the HTTP Referer header is not sent, increasing privacy.
- Impact on SEO and Security: Including
noopenerin links to external sites can indirectly benefit SEO by ensuring that your site is not linked to malicious content through tabnabbing attacks. Moreover, it improves site performance by preventing the opened page from using the original page’s resources.
The use of noopener is a best practice in web development for ensuring that external links do not compromise security or performance. It is particularly relevant for websites that link to a large number of external sites, such as blogs, news aggregators, or social networks.