react/jsx-no-target-blank 严格
它的作用
此规则旨在通过要求外部链接的 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)。
enforceDynamicLinks
type: "always" | "never"
default: "always"
是否强制检查动态链接,或强制检查静态链接。
forms
type: boolean
default: false
是否检查表单元素。
links
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