Lint Rules

useBlankTarget (since v10.0.0)

This rule is recommended by Rome.

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

Invalid

<a href='http://external.link' target='_blank'>child</a>
a11y/useBlankTarget.js:1:32 lint/a11y/useBlankTarget  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>
a11y/useBlankTarget.js:1:32 lint/a11y/useBlankTarget  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="noreferrer·noopener">child</a>
                                                      +++++++++++                   
<a {...props} href='http://external.link' target='_blank' rel="noopener">child</a>
a11y/useBlankTarget.js:1:43 lint/a11y/useBlankTarget  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="noreferrer·noopener">child</a>
                                                                 +++++++++++                   
// case-insensitive
<a href='http://external.link' target='_BlaNk'>child</a>
a11y/useBlankTarget.js:2:32 lint/a11y/useBlankTarget  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   Avoid using target="_blank" without rel="noreferrer".
  
    1 │ // case-insensitive
  > 2 │ <a href='http://external.link' target='_BlaNk'>child</a>
                                  ^^^^^^^^^^^^^^^
    3 │ 
  
   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.
  
    2 │ <a·href='http://external.link'·target='_BlaNk'·rel="noreferrer">child</a>
                                                +++++++++++++++++          

Valid

let a = <a href='http://external.link' rel='noreferrer' target='_blank'>child</a>;
let a = <a href='http://external.link' target='_blank' rel="noopener" {...props}>child</a>;