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

Next lesson: CSP meta

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies