Rel noopener
Learn to pair target="_blank" with rel="noopener noreferrer".
Open an external link in a new tab
The bank's help center lives on another domain. When leaving the sign-in page, we want to open it in a new tab so the sign-in form stays open.
To do that, add a target="_blank" attribute to the anchor tag. target decides where the link opens; _blank means a new tab.
But target="_blank" alone creates a security issue. The next step shows why.
Why is rel="noopener" needed?
A page opened in a new tab can reach back to the old tab via window.opener. A malicious page can use this to silently change the sign-in form (this is called reverse tabnabbing).
To prevent it, add rel="noopener"; it cuts the opener reference. rel="noreferrer" sends no referrer to the destination page; it's added for privacy.
Modern browsers usually combine both: rel="noopener noreferrer".
Exercise Add the external help link
Take the previous lesson's skeleton. Inside <body>, after the instruction paragraph, add an external help link inside a <p>:
- href:
https://help.securebank.example/signing-in - target="_blank" (new tab)
- rel="noopener noreferrer" (security + privacy)
- Link text: Help center
Show example solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Secure Bank - Sign in</title>
</head>
<body>
<h1>Secure Bank</h1>
<p>Please sign in with your user code.</p>
<p><a href="https://help.securebank.example/signing-in" target="_blank" rel="noopener noreferrer">Help center</a></p>
</body>
</html>Test yourself
-
What does target="_blank" do on an <a> tag?
<a href="..." target="_blank">...</a>- Opens the link in the same tab
- Clears the link's href value
- Opens the link in a new tab
- Resets the link's rel value
Show answer
Opens the link in a new tab — Correct. _blank tells the link to open in a new tab.
-
Complete the secure rel value
<a href="https://help.securebank.example/signing-in" target="_blank" rel="____">Help center</a>Show answer
<a href="https://help.securebank.example/signing-in" target="_blank" rel="noopener noreferrer">Help center</a> -
Match each rel value to its meaning
- noopener
- cuts the opener reference
- noreferrer
- sends no referrer info
- _blank
- opens in a new tab
- nofollow
- search engine won't follow