While building a WordPress website, you may have noticed the term “noopener” and wondered what it was for. In this article, we will discuss what noopener is in WordPress websites and its advantage in web design and development.
What is noopener?
Noopener is an HTML value that you can place in the rel=”” attribute. It helps block the window.opener JavaScript security gap, which effectively protects your website in case you may have unintentionally linked your content to malicious URLs.
In WordPress, the rel=”noopener” attribute automatically gets added when you create a link that opens in a new tab. Often, the noopener value gets paired with the noreferrer value in the rel=”” attribute.
What does noopener look like in WordPress?
Because noopener is a value of the rel=”” HTML attribute, it usually looks like this: rel=”noopener”. This value may be automatically or manually added to any outgoing links that you place on a WordPress page or post. Noopener is used for <area> and <form> elements in HTML. As such, we can see this most commonly used when implementing <a> elements or hyperlink anchors.
An <a href=””> hyperlink element lets you place hyperlinks on your WordPress page or post, including web pages and email addresses, which will open in the same tab where you are currently on. With WordPress, however, users have the option to tick a checkbox to open the hyperlink on a new tab. Ticking on the checkbox will insert target=”blank” in the code. This will then prompt the web browser to open the link on a new tab. In addition, this will add the rel=”noopener” value to the code, helping protect users from security threats.
Noopener in Traditional WordPress Editor
As you can see in the image below, in WordPress, you can highlight a bit of text (a word or a phrase) to place a link. The “Insert/edit link” pop-up will display, allowing you to place a URL and mark a checkbox to open the link in a new tab.
Try opening the Text Editor, and you will see a standard <a href=””> element generated for the hyperlink. Besides that, you will also notice that WordPress did not add the rel=”noopener” attribute.
However, if you tick the checkbox to open the link in a new tab, you should see in the Text Editor the rel=”noopener” attribute added towards the end of the <a href=> element.
You can also see that it added the target=”” attribute, the code responsible for forcing the link to open in a new tab.
Noopener in Gutenberg Visual Editor
We’re done explaining how noopener works in the traditional WordPress environment. Now, let us see what the noopener value looks like in the Gutenberg visual editor. As you can see in the image below, adding a hyperlink will show a switch that will let you “Open in new tab.”
If you do not turn the switch on, it will create a basic <a href=””> element, opening the hyperlink in the same tab. It will also not add the rel=”noopener” attribute to the code.
However, if you turn the switch on, it will activate the automated value insertion from WordPress.
As you can see below, the code shows that the link has the rel=”noopener” attribute paired with a noreferrer value.
What does noopener do for WordPress websites?
There are many ways to have a secure WordPress website. With noopener in WordPress, you can secure your site from vulnerabilities from websites that acquire partial access to your site through the link you placed on your page or post. This often happens when a link opens in a new tab, wherein the link provides access to your site using window.opener, a JavaScript property. As such, you may unknowingly link to another website containing malicious content, which can edit your page, install malware, and the like.
Because of these threats, WordPress automatically adds the rel=”noopener” attribute every time you create links that open in new tabs. This particular attribute stops the linked website from accessing window.opener, effectively removing the risk. In addition, when you insert links that open to new tabs using the Gutenberg visual editor, it will automatically add the noreferrer value. Doing so stops the linked site from seeing that you linked your site to theirs.
Should you use noopener in WordPress?
You now know what noopener looks like in WordPress and what it does for your website. Now, here are some key points as to why you should employ noopener in your WordPress website:
- First, noopener blocks linked (potentially malicious) websites from accessing the window.opener. It is a JavaScript feature that gives linked sites partial access to your website, thereby removing site security-related risks.
- Second, WordPress automatically adds noopener when you create a link that opens in a new tab. This removes the need to add code manually.
- Lastly, noopener helps create a positive user experience. It does this by improving site security while allowing users to open links in new tabs.
Got any more concerns regarding noopener in WordPress? Let a WordPress Developer from the Philippines hear them. Contact us today!
