Skip to content
← Back to rules

react/jsx-no-target-blank Pedantic

🚧 An auto-fix is planned for this rule, but not implemented at this time.

它的作用

此规则旨在通过要求外部链接 href 和表单 action 使用 rel='noreferrer',从而防止用户生成的链接 href 和表单 action 造成安全漏洞,并可选地对任何动态生成的链接 href 和表单 action 进行同样的限制。

为什么这不好?

在创建一个包含 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"

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

"always"

始终强制检查动态链接。

"never"

始终强制检查静态链接。

forms

type: boolean

default: false

是否检查表单元素。

type: boolean

default: true

是否检查链接元素。

warnOnSpreadAttributes

type: boolean

default: false

在使用展开属性时是否发出警告。

如何使用

To enable this rule using the config file or in the CLI, you can use:

json
{
  "plugins": ["react"],
  "rules": {
    "react/jsx-no-target-blank": "error"
  }
}
ts
import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/jsx-no-target-blank": "error",
  },
});
bash
oxlint --deny react/jsx-no-target-blank --react-plugin

Version

此规则在 v0.2.5 中添加。

References