Skip to content
Biome
Docs Blog Playground

noBlankTarget

Diagnostic Category: lint/a11y/noBlankTarget

Since: v1.0.0

Sources:

Disallow target="_blank" attribute without rel="noreferrer"

When creating anchor a element, there are times when its link has to be opened in a new browser tab via target="_blank" attribute. This attribute has to paired with rel="noreferrer" or you’re incur in a security issue.

Refer to the noreferrer documentation and the 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/a11y/noBlankTarget  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

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

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

Valid

Section titled Valid
<a href='http://external.link' rel='noreferrer' target='_blank'>child</a>
<a href='http://external.link' target='_blank' rel='noopener' {...props}>child</a>

Options

Section titled Options

The option allowDomains allows specific domains to use target="_blank" without rel="noreferrer". 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>
</>

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

Section titled Related links