Skip to content
← Back to rules

react/jsx-no-target-blank 細かい

An auto-fix is available for this rule.

何を実行するか

このルールは、外部リンクの href およびフォームのアクションがセキュリティ上の脆弱性を引き起こすことを防ぐことを目的としています。外部リンクの href およびフォームのアクションに対して rel='noreferrer' を要求し、オプションで動的に生成されたリンクの href およびフォームのアクションもチェックします。

なぜ問題なのか

a タグを含む JSX 要素を作成する際、target='_blank' 属性を使って新しいタブでリンクを開きたい場合が多いです。しかし、rel='noreferrer' を伴わない target='_blank' の使用は、深刻なセキュリティ上の脆弱性となります(詳細は 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

リファラーの許可を有効にするかどうか。

type: "always" | "never"

default: "always"

動的リンクを強制するか、静的リンクを強制するか。

forms

type: boolean

default: false

フォーム要素のチェックを有効にするかどうか。

type: boolean

default: true

リンク要素のチェックを有効にするかどうか。

warnOnSpreadAttributes

type: boolean

default: false

展開属性が使用されたときに警告するかどうか。

使用方法

設定ファイルまたは CLI でこのルールを 有効化 するには、次のようにします:

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

参照