noBlankTarget

JSX and TSX

Summary

Rule available since: v1.0.0
Diagnostic Category: lint/security/noBlankTarget
This rule is recommended, which means is enabled by default.
This rule has a safe fix.
The default severity of this rule is error.
Sources:
- Inspired from react/jsx-no-target-blank

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "security": {
5
        "noBlankTarget": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow target="_blank" attribute without rel="noopener".

When creating an anchor a element, there are times when its link has to be opened in a new browser tab via the target="_blank" attribute. This attribute has to be paired with rel="noopener" or you may run into security issues.

See to the noopener documentation.

Examples

Invalid

1
<a href='http://external.link' target='_blank'>child</a>

code-block.jsx:1:32 lint/security/noBlankTarget  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using target=“_blank” without rel=“noopener” or rel=“noreferrer”.
  
  > 1 │ <a href=‘http://external.link’ target=’_blank’>child</a>
      │                                ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Opening external links in new tabs without rel=“noopener” is a security risk. See the explanation for more details.
  
  ℹ Safe fix: Add the rel=“noopener” attribute.
  
    1 │ <a·href=‘http://external.link’·target=’_blank’·rel=“noopener”>child</a>
      │                                               +++++++++++++++

1
<a href='http://external.link' target='_blank' rel='nofollow'>child</a>

code-block.jsx:1:32 lint/security/noBlankTarget  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using target=“_blank” without rel=“noopener” or rel=“noreferrer”.
  
  > 1 │ <a href=‘http://external.link’ target=’_blank’ rel=‘nofollow’>child</a>
      │                                ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Opening external links in new tabs without rel=“noopener” is a security risk. See the explanation for more details.
  
  ℹ Safe fix: Add the “noopener” to the existing attribute.
  
    1   │ - <a·href=‘http://external.link’·target=’_blank’·rel=‘nofollow’>child</a>
      1 │ + <a·href=‘http://external.link’·target=’_blank’·rel=“noopener·nofollow”>child</a>
    2 2 │

1
<a {...props} href='http://external.link' target='_blank' rel='nofollow'>child</a>

code-block.jsx:1:43 lint/security/noBlankTarget  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using target=“_blank” without rel=“noopener” or rel=“noreferrer”.
  
  > 1 │ <a {…props} href=‘http://external.link’ target=’_blank’ rel=‘nofollow’>child</a>
      │                                           ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Opening external links in new tabs without rel=“noopener” is a security risk. See the explanation for more details.
  
  ℹ Safe fix: Add the “noopener” to the existing attribute.
  
    1   │ - <a·{...props}·href=‘http://external.link’·target=’_blank’·rel=‘nofollow’>child</a>
      1 │ + <a·{...props}·href=‘http://external.link’·target=’_blank’·rel=“noopener·nofollow”>child</a>
    2 2 │

Valid

1
<a href='http://external.link' rel='noopener' target='_blank'>child</a>

1
<a href='http://external.link' rel='noreferrer' target='_blank'>child</a>

1
// The rule accepts elements with spread props, because the required
2
// attribute may be injected dynamically:
3
<a href='http://external.link' target='_blank' {...props}>child</a>

Options

`allowNoReferrer`

By default, noBlankTarget accepts both rel="noopener" and rel="noreferrer" with links that have target="_blank". This is because the latter implies the former, so either one is sufficient to mitigate the security risk.

However, allowing rel="noreferrer" may still be undesirable, because it can break tracking, which may be an undesirable side-effect. As such, you can set allowNoReferrer: false to only accept rel="noopener".

See to the noreferrer documentation.

1
{
2
  "linter": {
3
    "rules": {
4
      "security": {
5
        "noBlankTarget": {
6
          "options": {
7
            "allowNoReferrer": false
8
          }
9
        }
10
      }
11
    }
12
  }
13
}

1
<a href='http://external.link' rel='noreferrer' target='_blank'>child</a>

code-block.jsx:1:49 lint/security/noBlankTarget  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using target=“_blank” without rel=“noopener”.
  
  > 1 │ <a href=‘http://external.link’ rel=‘noreferrer’ target=’_blank’>child</a>
      │                                                 ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Opening external links in new tabs without rel=“noopener” is a security risk. See the explanation for more details.
  
  ℹ Safe fix: Add the “noopener” to the existing attribute.
  
    1   │ - <a·href=‘http://external.link’·rel=‘noreferrer’·target=’_blank’>child</a>
      1 │ + <a·href=‘http://external.link’·rel=“noopener·noreferrer”·target=’_blank’>child</a>
    2 2 │

Default: true

`allowDomains`

The option allowDomains allows specific domains to use target="_blank" without rel="noopener". In the following configuration, it’s allowed to use the domains https://example.com and example.org:

1
{
2
  "linter": {
3
    "rules": {
4
      "security": {
5
        "noBlankTarget": {
6
          "options": {
7
            "allowDomains": [
8
              "https://example.com",
9
              "example.org"
10
            ]
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

1
<>
2
  <a target='_blank' testme href='https://example.com'></a>
3
  <a target='_blank' href='example.org'></a>
4
</>

The diagnostic is applied to all domains not in the allow list:

1
{
2
  "linter": {
3
    "rules": {
4
      "security": {
5
        "noBlankTarget": {
6
          "options": {
7
            "allowDomains": [
8
              "https://example.com"
9
            ]
10
          }
11
        }
12
      }
13
    }
14
  }
15
}

1
<>
2
  <a target='_blank' testme href='https://example.com'></a>
3
  <a target='_blank' href='example.org'></a>
4
</>

code-block.jsx:3:6 lint/security/noBlankTarget  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using target=“_blank” without rel=“noopener” or rel=“noreferrer”.
  
    1 │ <>
    2 │   <a target=’_blank’ testme href=‘https://example.com’&gt;&lt;/a>
  > 3 │   <a target=’_blank’ href=‘example.org’></a>
      │      ^^^^^^^^^^^^^^^
    4 │ </>
    5 │ 
  
  ℹ Opening external links in new tabs without rel=“noopener” is a security risk. See the explanation for more details.
  
  ℹ Safe fix: Add the rel=“noopener” attribute.
  
    3 │ ··<a·target=’_blank’·href=‘example.org’·rel=“noopener”></a>
      │                                        +++++++++++++++

Biome doesn’t check if the list contains valid URLs.