Metadata

ID: tsx-react/tsx-no-target-blank

Language: TypeScript

Severity: Warning

Category: Security

Description

Using target="_blank" in an anchor (<a>) tag allows a link to be opened in a new browser tab or window. Without proper precautions, this can introduce a security vulnerability known as “tabnabbing.” A malicious page opened in the new tab can manipulate the window.opener object, potentially redirecting the original page to a phishing site or other unwanted content, misleading users into revealing sensitive information.

How to Remediate

To mitigate this risk, always include rel="noopener noreferrer" when using target="_blank". The noopener value prevents the new browsing context from accessing the window.opener property, thus isolating it from the original page. The noreferrer value has a similar effect while also preventing the new page from seeing the referrer HTTP header. This ensures that opening external links in a new tab does not expose your users to potential phishing attacks.

Non-Compliant Code Examples

var Hello = <a target='_blank' href="https://example.com/"></a>
var Hello = <a target={`_blank`} href={dynamicLink}></a>
var Nested = <Link target={'_blank'} href="https://example.com/" />
var Nested = <Link target="_blank" href="https://example.com/" />

Compliant Code Examples

var Hello = <p target={"_blank"}></p>
var Hello = <p target={`_blank`}></p>
var Hello = <a target="_blank" rel="noreferrer" href="https://example.com"></a>
var Hello = <a target="_blank" rel="noopener noreferrer" href="https://example.com"></a>
var Hello = <a target="_blank" href="relative/path/in/the/host"></a>
var Hello = <a target="_blank" href="/absolute/path/in/the/host"></a>
var Hello = <a></a>