Review the way makeOutboundLink() handles rel noopener noreferrer

[afercia]

makeOutboundLink() is a component to render links that use target="_blank" which does a few things:

• renders the attribute target: "_blank" 🎉
• adds a visually hidden text (Opens in a new browser tab) for accessibility
• renders by default an attribute rel="noopener noreferrer" for security reasons (exploitation of the window.opener API)

Although the rel="noopener noreferrer" can be omitted passing a prop rel={ null } or changed passing a different value, we should consider to review the way makeOutboundLink() works.

As @jono-alderson pointed out, rel="noopener noreferrer" nukes tracking links, as some tracking services rely on JavaScript in addition to the Referer: HTTP header. See also https://github.com/Yoast/wordpress-seo/issues/10791

• noreferrer: Prevents the browser, when navigating to another page, to send this page address, or any other value, as referrer via the Referer: HTTP header
• noopener: ensures window.opener is null (more details

Most of the links handled by makeOutboundLink() point to yoast.com. In these cases, rel="noopener noreferrer" should be omitted, being aware that yoast.com should always be secure and trusted. For other external, non-trusted, links, rel="noopener noreferrer" should still be used.

Worth considering to automate this behavior or, at least, reverse the default behavior of makeOutboundLink().

[afercia]

Note: worth noting Gutenberg adds rel="noopener noreferrer" by default to all the links with a target="_blank" attribute, to match what TinyMCE does by default.

[afercia]

It was decided the new pattern to use is:

• use noopener for all the non-yoast.com external links
• omit it for the yoast.com links (including shortened links)

makeOutboundLink should be updated accordingly to make its usage easier.