Skip to content
← Back to rules

react/jsx-no-target-blank 严格

An auto-fix is available for this rule.

它的作用

此规则旨在通过要求外部链接的 href 以及表单操作中使用 rel='noreferrer',防止用户生成的链接 href 和表单操作产生安全漏洞。同时可选择性地对任何动态生成的链接 href 及表单操作进行检查。

为什么这是个问题?

当创建一个带有 a 标签的 JSX 元素时,通常希望使用 target='_blank' 属性使链接在新标签页中打开。然而,如果不伴随 rel='noreferrer' 使用该属性,则会造成严重的安全漏洞(详见 noreferrer 文档noopener 文档 获取更多信息)。此规则要求您在使用 target='_blank' 时必须同时添加 rel='noreferrer'

示例

此规则的错误代码示例:

jsx
var Hello = <a target="_blank" href="https://example.com/"></a>;
var Hello = <a target="_blank" href={dynamicLink}></a>;

此规则的正确代码示例:

jsx
/// 正确
var Hello = <p target="_blank"></p>;
var Hello = <a target="_blank" rel="noreferrer" href="https://example.com"></a>;
var Hello = <a target="_blank" rel="noopener noreferrer" href="https://example.com"></a>;
var Hello = <a target="_blank" href="relative/path/in/the/host"></a>;
var Hello = <a target="_blank" href="/absolute/path/in/the/host"></a>;
var Hello = <a></a>;

配置

此规则接受一个配置对象,包含以下属性:

allowReferrer

type: boolean

default: false

是否允许引用来源(referrer)。

type: "always" | "never"

default: "always"

是否强制检查动态链接,或强制检查静态链接。

forms

type: boolean

default: false

是否检查表单元素。

type: boolean

default: true

是否检查链接元素。

warnOnSpreadAttributes

type: boolean

default: false

当使用展开属性(spread attributes)时是否发出警告。

如何使用

要通过配置文件或 CLI 启用此规则,可以使用:

json
{
  "plugins": ["react"],
  "rules": {
    "react/jsx-no-target-blank": "error"
  }
}
bash
oxlint --deny react/jsx-no-target-blank --react-plugin

参考资料