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.

A malicious website opened through target="_blank" can change the window.opener.location to a phishing page, potentially misleading users.

This rule enforces using rel="noreferrer" with on links that have the target="_blank" attribute. It might not be needed if you target modern browsers, but is still recommended to follow it as a best practice.

Known Limitations

This rule does not support custom link components without an href, target and rel properties.

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>

Seamless integrations. Try Datadog Code Analysis

Datadog Code Analysis