Unsafe Cross-Origin Links and rel noopener noreferrer

What does rel noopener noreferrer do on a link?

When a link uses target="_blank", the browser opens the destination in a new browsing context. In older browsers that new page received window.opener, a live reference to the tab that opened it. Under the same-origin policy a cross-origin page cannot read your DOM, but it can still set window.opener.location, and that single assignment is the whole attack.

The rel attribute takes a space separated list of link types, and the order of the values does not matter. The WHATWG HTML Standard says noreferrer has the same effect as noopener, so the pair is a double safeguard rather than two separate protections. The MDN rel noopener reference adds that the value applies to a, area and form elements.

What noopener does

It sets window.opener to null in the page that opens, so the destination cannot read your tab or change its location. It also lets the browser run that page in a separate process, away from your main thread.

What noreferrer adds

Everything noopener does, plus the browser leaves out the Referer header. The destination then logs the visit as direct traffic.

The reverse tabnabbing risk

A visitor clicks a link, and the new page runs window.opener.location = "https://lookalike.example/login". Your original tab quietly becomes a phishing page that looks like your login screen, and whatever a visitor types goes to the attacker.

Do you still need rel noopener noreferrer today?

Mostly not. Browsers began treating target="_blank" as if noopener were present between 2019 and 2021: Safari 12.1 first, then Mozilla Firefox 79, then Google Chrome and Microsoft Edge 88, according to the MDN Web Docs compatibility data.

Rule of thumb: noopener is the default now, so write it for clarity and old browsers. Add noreferrer only when you want to hide the referrer.

Two reasons remain to keep typing it. Older and embedded browsers predate the change, and the retired Edge Legacy ignores noopener but does honor noreferrer. The Lighthouse unsafe links audit, a best practices check titled "Links to cross-origin destinations are unsafe", still flags new tab anchors that have neither value.

Be selective with noreferrer, because it hides referral data from partners, and WordPress core stopped adding it automatically in version 5.6. For that effect on every link at once, the Referrer-Policy header applies it site wide. The Cross-Origin-Opener-Policy header can isolate a whole site too, but it affects popups and OAuth sign in, so treat it as a second layer.

No direct ranking effect is documented either. Google Search Central describes nofollow, sponsored and ugc for qualifying outbound links and says nothing about noopener or noreferrer there. For link equity questions, see our guide to nofollow, sponsored and ugc.

How SEO Site Checker tests unsafe cross-origin links

The name of this line and its behavior part ways. Our report loads your URL in headless Chromium through Playwright, waits for the page to finish loading and parses the rendered DOM with BeautifulSoup. Links added by JavaScript are therefore seen.

The exact rule: every img src, script src, iframe src and link href that begins with the lowercase text http:// adds one to the count. Same site and third party URLs both count, and a URL repeated ten times counts ten times.

What the check looks at

Four tag and attribute pairs in the rendered DOM, matched on the lowercase http:// prefix. This line is a close cousin of our Mixed Content check, which holds the deeper HTTPS migration advice.

Pass and fail in your report

Zero is the only green state, and there is no warning in between: the row jumps straight to red, prints the total in its message and reveals the How to Fix button. The example list for signed in users is capped at 10 and its badge counts the listed examples, so it can read 10 while the message above it reports a bigger total.

What this line does not test

Anchors, target and rel values are not read here. The rel test is a separate line, Noopener and Noreferrer Attributes, which fails any external anchor without noopener or noreferrer, with or without target="_blank". That line has its own fix guidance on our nofollow page.

• Pass: the count of http:// resource URLs is 0.
• Fail: the count is 1 or more.
• Not tested: anchors, target, rel, srcset, media tags, CSS url() values and uppercase or protocol relative URLs.

Run my free audit

How to fix the unsafe cross-origin links in your report

1. Collect the URLs. Sign in, expand the Unsafe Cross-Origin Links row and copy the examples. The report shows at most 10, so also search the page source or Chrome DevTools for http:// in src and href values.
2. Test each https address. Open it in a browser first. If the host does not serve it, host the file yourself or swap the provider. Check certificates with the SSL checker and HTTPS test.
3. Change the scheme. Replace http:// with https:// in each reference. Browsers treat passive mixed content such as images differently from active content such as scripts, as web.dev explains in what mixed content is, but this check counts all of them.
4. Look in the head. Every link tag with an http:// href counts, even rel="canonical" and alternate links that browsers never fetch.
5. Fix the source. Edit the theme template or page builder field. In WordPress, stored content needs a serialization safe search and replace on the database, after a backup.
6. Add a safety net if you like. A 301 from http to https handles page requests, not the URLs written inside your markup, and this check reads the markup. The Content-Security-Policy directive upgrade-insecure-requests goes further, because browsers then fetch insecure subresources over https at load time. Neither edits your HTML, so the check still counts stale http:// URLs.
7. Run the audit again. Clear any page cache first, then confirm the count is 0.

The header goes in server config: the first line is Apache, the second Nginx.

Header always set Content-Security-Policy "upgrade-insecure-requests"
add_header Content-Security-Policy "upgrade-insecure-requests" always;

How to add rel noopener noreferrer to target _blank links

Decide per link. An external link that opens a new tab through the target attribute gets noopener, noreferrer is added only when hiding the referrer is intended, and internal links need neither.

<!-- Before -->
<a href="https://example.com" target="_blank">Partner site</a>

<!-- After -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Partner site</a>

Both values share one rel attribute, separated by a space, and relationship values join them the same way: rel="noopener nofollow" for untrusted destinations and rel="noopener sponsored" for paid or affiliate links.

To find offenders on a live page, paste this into the console. It prints the href of every anchor tag that opens a new tab, points to another origin and has neither value, which is close to the set Lighthouse reports. Links to your own origin are skipped.

document.querySelectorAll('a[target="_blank"]').forEach(function (a) {
  var rel = (a.getAttribute('rel') || '').toLowerCase();
  var external = false;
  try {
    var u = new URL(a.href, location.href);
    external = /^https?:$/.test(u.protocol) && u.origin !== location.origin;
  } catch (e) {}
  if (external && !rel.includes('noopener') && !rel.includes('noreferrer')) {
    console.log(a.href);
  }
});

A patch script can loop over the same selector, skip your own hostname and set rel, but treat it as a stopgap and fix the templates. Once every external anchor carries a value, the Noopener and Noreferrer Attributes line in our report turns green.

rel noopener noreferrer in WordPress, React and other platforms

Platforms differ, so verify the rel value in the page source.

Common rel noopener noreferrer mistakes

• Noreferrer on every link. A partner dashboard then shows your clicks as direct traffic. Keep noreferrer for links where hiding the source is the point.
• Noopener as an SEO lever. It carries no ranking signal and cannot stand in for nofollow, sponsored or ugc.
• Fixing anchors only. The rel line turns green while this row stays red, because the http:// image, script and iframe URLs it counts sit in other tags.
• A stale head tag. One leftover http:// canonical or icon link keeps the count at 1 after the body is clean.
• Late widgets. Chat, social and ad scripts inject links after load and our crawler sees them, so change them in the widget settings.
• Trusting a pass too far. Uppercase HTTP://, srcset and media tags are not read, so confirm in the DevTools Issues panel.

Unsafe cross-origin links checklist

• Resource URLs. Every src and href in img, script, iframe and link tags starts with https://, canonical and icon tags included.
• New tab links. Every external link that opens a new tab carries rel="noopener" or rel="noreferrer".
• Referrer choice. noreferrer appears only where hiding the referrer is intended.
• Third party tags. Check embedded widgets after they load.
• Regular re-tests. Run the audit again after each template or plugin change.