There's no answer pointing out a case when you would actually want to pass referrer just ignoring any "security risk" warnings: for instance, when you are linking your own external website, which is controlled by you/your org and which presumably has no described security vulnerabilities.
For instance, in my case, in I want to see in Google Analytics how many of my visitors read docs by clicking links inside the web app (which uses a separate domain from where docs are) and how many come from search engines, and hence I want to utilize the referrer header for distinguishing these user groups.
Here's how you can do it when linking websites like your own docs that are safe for sure:
{/* Safe link to the own website *//* eslint-disable-next-line react/jsx-no-target-blank */}
<a href="https://my-own-website.com" target="_blank">
Learn more
</a>
In React, I made a wrapper common component to avoid putting eslint-disable
everywhere in the code (an opposite to UnsafeExternalLink
component):
import React, { ReactNode } from 'react';
/* eslint-disable react/jsx-no-target-blank */
/**
* Safe link to own external websites only.
*/
const SafeExternalLink = ({
href,
children,
}: {
href: string;
children: ReactNode;
}) => (
<a href={href} target="_blank">
{children}
</a>
);
export default SafeExternalLink;
noopener
at least, but as pointed out below,noreferrer
is rendundant): hacks.mozilla.org/2020/07/firefox-79