What is Noopener?
Noopener rel="noopener" is an HTML attribute that prevents a newly opened window from controlling the opening window using the window.opener property. The noopener attribute can be added to the anchor <a>, area <area>, or form <form> タグ。
To ensure the noopener attribute works as intended, the HTML tag should include a target="_blank" attribute, instructing the browser to open the link in a new window or tab.
<a href="https://yourdomain.com" rel="noopener" target="_blank">Your Domain</a>
The noopener attribute ensures that the newly opened tab or window cannot access, manipulate, or tamper with the URL or content of the opening window. This helps to enhance security and prevent potential malicious actions like reverse tab nabbing.
Reverse tab nabbing is a phishing scam in which a site replaces the last visited site with a fake lookalike. When visitors click the back button, they are redirected to the malicious lookalike site, where hackers can steal their banking and personal information.
Security Implication of the Noopener Attribute
When you click a link, it typically opens a new webpage in a new tab or window. Let us call this new window the “new window.” Similarly, the window or tab from which you clicked the link can be the “opening window.”
Now, suppose the HTML code of the link you clicked on does not contain a noopener attribute. In that case, the new window will be able to access the JavaScript properties and methods of the opening window. This includes the window.opener property, which the new window can use to change the URL of the opening window.
Browsers typically prevent this using the same-origin policy. That is, browsers only allow the new window to access the window.opener 財産 if both windows have the same protocol, port, and host.
However, some older browsers do not support the same-origin policy, leaving visitors vulnerable. The noopener property prevents that by setting the window.opener 財産 に null, regardless of whether the browser supports the same-origin policy.
As an extra security measure, browsers and content management systems (CMS) like WordPress automatically include the noopener attribute to links containing the target="_blank" 属性。
SEO Implications of the Noopener Attribute
The noopener attribute does not affect your search engine optimization or site performance. If anything, omitting the noopener attribute could be detrimental to your site performance, as the new window could access the window.opener property and run JavaScript processes on the opening window.
JavaScript is resource-intensive and can take up considerable resources on your visitor’s device. If the opening window runs a lot of JavaScript, it could slow down the current page, causing performance issues for your visitors.
Difference Between the Noopener, Noreferrer, and Nofollow Attributes
The noopener attribute (rel="noopener") prevents the new window from accessing the window.opener property of the opening window. The noreferrer attribute (rel="参照者なし"), on the other hand, instructs the browser to remove the Referer header when opening the new window.
The Referer header contains the URL of the previous page. So, including the noreferrer attribute ensures that the new window cannot access the URL of the opening window.
That said, the noreferrer attribute is an alternative to the noopener attribute. Both will prevent the new window from accessing the URL of the opening window. However, you should include the target=”_blank” attribute to the link.
However, the nofollow (rel="nofollow") attribute informs the search engine not to pass link equity to the site it links to. It has no security benefits, is unrelated to the noopener and noreferrar attributes, and is purely used for search engine optimization.
よくある質問
1. What Does Noopener Mean?
Noopener refers to the rel=”noopener” attribute. It is an HTML attribute that prevents a new window from gaining access to the URL of the opening window.
2. Is Noopener Still Needed?
Yes, the noopener is helpful for preventing malicious sites from manipulating the URL of your opening window. Without the noopener attribute, the new window could replace the opening window with a phishing site and steal your private information.
3. What is the Difference Between Nofollow and Noopener?
The nofollow rel=”nofollow” attribute informs search engines not to follow or pass link equity to the site the link points to. On the other hand, the noopener rel=”noopener” 属性 instructs the browser to prevent the new window from accessing or controlling the opening window through the window.opener property.