noBlankTarget

JSX and TSX

Summary

Section titled 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

Description

Section titled 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

Section titled Examples

Invalid

Section titled Invalid

<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>
      │                                               +++++++++++++++          

<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 │   
  

<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

Section titled Valid

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

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

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

Options

Section titled Options

allowNoReferrer

Section titled 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.

{
    "options": {
        "allowNoReferrer": false
    }
}

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

Default: true

allowDomains

Section titled 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:

{
    "options": {
        "allowDomains": ["https://example.com", "example.org"]
    }
}

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

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

{
    "options": {
        "allowDomains": ["https://example.com"]
    }
}

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

code-block.jsx:2: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 │ </>
  
  ℹ 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.
  
    2 │ ··<a·target=’_blank’·testme·href=‘https://example.com’·rel=“noopener”></a>
      │                                                       +++++++++++++++     
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.

How to configure

Section titled How to configure

biome.json

{
  "linter": {
    "rules": {
      "security": {
        "noBlankTarget": "error"
      }
    }
  }
}

Related links

Section titled Related links

• Disable a rule
• Configure the rule fix
• Rule options