noBlankTarget

JSX and TSX

摘要

¥Summary

规则生效日期：v1.0.0

¥Rule available since: v1.0.0
诊断类别：lint/security/noBlankTarget

¥Diagnostic Category: lint/security/noBlankTarget
此规则为推荐规则，默认启用。

¥This rule is recommended, which means is enabled by default.
此规则包含 safe 修复程序。

¥This rule has a safe fix.
此规则的默认严重级别为 error。

¥The default severity of this rule is error.
来源：

¥Sources:
- 灵感来自 react/jsx-no-target-blank
  
  ¥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

禁止在没有 rel="noopener" 的情况下使用 target="_blank" 属性。

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

创建锚点 a 元素时，有时需要通过 target="_blank" 属性在新浏览器标签页中打开其链接。此属性必须与 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.

请参阅 noopener 文档。

¥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`

默认情况下，noBlankTarget 接受带有 target="_blank" 前缀的链接，并且同时接受 rel="noopener" 和 rel="noreferrer" 前缀。这是因为后者蕴含前者，因此两者之一就足以降低安全风险。

¥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.

然而，允许使用 rel="noreferrer" 可能仍然不理想，因为它可能会破坏跟踪功能，这可能是一个不希望出现的副作用。因此，你可以将 allowNoReferrer: false 设置为仅接受 rel="noopener"。

¥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".

请参阅 noreferrer 文档。

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

默认：true

¥Default: true

`allowDomains`

选项 allowDomains 允许特定域使用 target="_blank" 而不使用 rel="noopener"。在以下配置中，允许使用域 https://example.com 和 example.org：

¥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 不会检查列表是否包含有效的 URL。

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

noBlankTarget

摘要

如何配置

描述

示例

无效

有效

选项

allowNoReferrer

allowDomains

相关链接

`allowNoReferrer`

`allowDomains`