HTML rel='noopener noreferrer' Tag. What does it mean?

html
The rel attribute (short for "relation") in HTML is used to define the relationship between the current document and the linked document specified by the anchor (<a>) tag. The rel="noopener noreferrer" is used to enhance security and privacy when opening links in a browsers tab or a new window.

rel noopener noreferrer tag and why use it

noopener and noreferrer are two very important values for the "rel" attribute. Let me expain both in detail.

noopener

This keyword prevents the new page from being able to access the "window.opener" property. This is important because it stops the new page from potentially manipulating the original page, which can be a security risk.

Security

When you open a link in a new tab using target="_blank", the new page can access the original page through the "window.opener" property. This can be a security risk because the new page can potentially manipulate the original page (it can change its location to a phishing site). The noopener prevents this by ensuring the new page does not have access to the window.opener property.

So, whenever you add an anchor tag to your web page with target='_blank', add rel='noopener' to the link for an added security. It is also considered best practice.

➡️ Learn more about noopener

Note: According to MDN, the attribute target='_blank' provides "rel" behavior as "noopener" implicitly. However, make sure that you define it explicitly with in all external links as a precaution.

Example:

<a href="https://www.encodedna.com" target="_blank" rel='noopener'>Visit my WebSite</a>

noreferrer

This keyword ensures that no referrer information is sent when the link is clicked. This means the new page won't know where the user came from, which can help protect user privacy.

Privacy

When you click on a link, the browser usually sends the URL of the current page (the referrer) to the new page. This can be a privacy concern because the new page can see where the user came from. The noreferrer attribute prevents the browser from sending this referrer information, thus protecting user privacy.

Example:

<a href="https://www.encodedna.com" target="_blank" rel='noreferrer'>Visit my WebSite</a>

Why use noopener noreferrer together?

Using rel="noopener noreferrer" together is a best practice because it covers both security and privacy concerns. While noopener alone is sufficient for security, adding noreferrer ensures that no referrer information is leaked, providing an extra layer of privacy.

Example:

<a href="https://www.encodedna.com" target="_blank" rel='noopener noreferrer'>Visit my WebSite</a>

Browser Support:

Chrome - Yes | Firefox - Yes | Edge - Yes | Safari - Yes