Creative agency glossaryWeb, UX/UI, and Design

Noopener

Noopener is a value for a link's rel attribute that stops a page opened in a new tab from accessing or controlling the page that opened it.

What is noopener?

When a link opens in a new tab, using target="_blank", the new page used to receive a quiet connection back to the page that opened it, through a browser object called window.opener. Through that connection the new page could send the original tab to any address it liked. Adding rel="noopener" to the link cuts it: the new tab opens with no reference to where it came from, and the original page is left alone.

The attack it prevents is called reverse tabnabbing. A visitor clicks a link on a site they trust, reads the new page, and returns to the first tab to find it has turned into a fake login screen for the trusted site. Because they never typed the address, they have little reason to doubt it. Noopener closes that door, and as a side effect it lets the browser run the new page in a separate process, so a heavy page in one tab does not slow down the other.

Why it matters

Why noopener matters

Any site that links out to pages it does not control, which is almost every site, is exposed to the problem, and the people who pay for it are the visitors who trusted the brand enough to click. Modern browsers now treat links that open in a new tab as noopener by default, which has largely closed the gap for current visitors. The attribute still matters for older browsers, for windows opened by scripts with window.open, and as a clear statement in the code that the behavior was intended rather than assumed. It is a small piece of hygiene, and small pieces of hygiene are what separate a carefully built site from an assembled one.

In practice

How noopener works in practice

  1. 01

    In the markup it is one word. A link that opens a new tab gets rel="noopener", alongside other values such as noreferrer, nofollow or sponsored where they apply. Most content management systems add it automatically when an editor ticks the box to open a link in a new tab, and WordPress has done so for years. For windows opened by JavaScript, the same protection is passed as an option to window.open, or the script clears the opener itself.

  2. 02

    We check for it in audits rather than relying on defaults. Linters and security scanners flag new-tab links without it, and it costs nothing to add. The bigger question we ask is whether the link should open a new tab at all. Most should not: visitors expect links to open in place, and forcing a new tab breaks the back button and can disorient people using screen readers.

Watch out

What people get wrong about noopener

Thinking it affects search. Noopener is a security attribute; it does not change how search engines treat or credit the link, and adding it does not make a link nofollow. Second, confusing it with noreferrer, which also hides where the visitor came from and so changes what the destination's analytics see. Third, assuming the browser default makes it irrelevant. Defaults protect current browsers and ordinary links, but the code should still say what it means.

Questions

People also ask

Does rel=noopener affect SEO?

No. It only controls the connection between the two browser tabs. Search engines follow and credit the link exactly as they would without it.

Should I use noopener on internal links?

Only on internal links that open in a new tab, and most internal links should not. The risk it guards against comes from pages you do not control, which is why it matters most on external links.

Do I still need noopener if browsers add it automatically?

Modern browsers treat new-tab links as noopener by default, so current visitors are protected either way. Adding it explicitly covers older browsers and makes the intent clear in the code, at no cost.

Next to it in the glossary

  1. Mirror SiteA mirror site is an exact copy of a website hosted on a different server or address and kept in sync with the original, to share load, add redundancy or keep content reachable.
  2. Mobile-First DesignMobile-first design is the practice of designing a website or product for the smallest screen first, then expanding the layout for tablets and desktops.
  3. Mobile-ResponsiveA mobile-responsive website is one whose layout, images and controls adapt automatically to a phone screen, so it can be used fully without zooming or scrolling sideways.
  4. NoreferrerNoreferrer is a value for a link's rel attribute that tells the browser not to pass on the address of the page a visitor came from when they follow the link.
  5. Parallax ScrollingParallax scrolling is a web design technique in which background and foreground layers move at different speeds as a visitor scrolls, creating an illusion of depth.
  6. PersonaA persona is a fictional but research-based profile of a typical user or customer, used to keep a team's design and messaging decisions focused on real people.

Every Web, UX/UI, and Design term →

In the work

Where it shows up

All our creations →

From the journal

Read around it

The journal →

Talking the talk is one thing

We make the work.

RIOT is a creative agency and production studio in New York. Strategy, brand, film, photography, design and the campaigns that carry them, made by one team. A few lines is enough to start: we read every brief the same day.

    Footage