Prevent target='_blank' security risks

This page is not yet available in Spanish. We are working on its translation.
If you have any questions or feedback about our current translation project, feel free to reach out to us!

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>
https://static.datadoghq.com/static/images/logos/github_avatar.svg https://static.datadoghq.com/static/images/logos/vscode_avatar.svg jetbrains

Seamless integrations. Try Datadog Code Analysis