Reactで安心安全な開発を実現！react/no-unescaped-entitiesルールを理解してコードをクリーンアップ

2024-06-17

React/no-unescaped-entities ルール違反の修正方法

react/no-unescaped-entities ルールは、JSX コード内で誤ったエンティティ解釈を防ぐために、特定の文字列をエスケープすることを要求します。このルール違反は、意図せずエスケープ文字がテキストノードとして挿入される可能性を防ぎ、セキュリティ上の脆弱性を回避するために役立ちます。

問題点

以下の例のように、JSX コード内に >, ", ', } などの文字列が含まれている場合、react/no-unescaped-entities ルール違反が発生する可能性があります。

<div>
  {children}
</div>

上記の例では、children プロップに > 文字が含まれている場合、意図せず x="y"> Body Text のように解釈されてしまいます。これは、本来意図していた動作ではないため、問題となります。

解決策

react/no-unescaped-entities ルール違反を修正するには、以下のいずれかの方法で問題となる文字列をエスケープする必要があります。

HTML エスケープコードを使用する

<div>
  {children &amp;gt;}
</div>

上記の例では、> 文字を &gt; エスケープコードに置き換えることで、問題を解決できます。

変数を使用する

const escapedChildren = children.replace('>', '&gt;');

<div>
  {escapedChildren}
</div>

上記の例では、children プロップ内の > 文字を置換する関数を作成し、エスケープされた文字列を escapedChildren 変数に格納することで、問題を解決できます。

ルールを無効化する

稀に、どうしてもエスケープできない場合や、意図的にエスケープ文字を使用する必要がある場合などがあります。そのような場合は、react/no-unescaped-entities ルールを無効化することができます。

{
  "rules": {
    "react/no-unescaped-entities": "off"
  }
}

eslint-config-airbnb 設定

eslint-config-airbnb は、React 開発者向けに推奨される ESLint 設定セットです。react/no-unescaped-entities ルールは eslint-config-airbnb にデフォルトで有効化されています。

react/no-unescaped-entities ルールは、JSX コード内のセキュリティと整合性を保つために重要です。上記の解決策を参考に、ルール違反を修正し、安全で信頼性の高い React アプリケーションを開発してください。

補足

eslint-plugin-react プラグインが必要です。

問題のあるコード

<div>
  {children}
</div>

<div>
  {children &amp;gt;}
</div>

解決策 2：変数を使用する

const escapedChildren = children.replace('>', '&gt;');

<div>
  {escapedChildren}
</div>

解決策 3：ルールを無効化する

{
  "rules": {
    "react/no-unescaped-entities": "off"
  }
}

説明

上記の例では、children プロップに > 文字が含まれていると仮定します。
解決策 1 では、&gt; エスケープコードを使用して > 文字をエスケープします。
解決策 3 では、react/no-unescaped-entities ルールを無効化します。

上記の例はあくまで一例であり、状況に応じて適切な解決策を選択する必要があります。
ルールを無効化することは、最後の手段としてのみ行うことをお勧めします。

React/no-unescaped-entities ルール違反の修正方法：その他の方法

本記事では、react/no-unescaped-entities ルール違反を修正するための 2 つの主要な解決策 と 1 つの補足的な解決策 を紹介しました。

しかし、状況によっては、以下の 補足的な方法 も役立つ場合があります。

テンプレートリテラルを使用する

<div>
  {`This is a string with a > character`}
</div>

テンプレートリテラルを使用すると、バッククォート (```) で囲まれた文字列内に変数や式を埋め込むことができます。上記の例では、> 文字はエスケープ処理されることなく、そのまま出力されます。

利点

コードが簡潔で読みやすくなる
エスケープ処理を明示的に記述する必要がない

注意点

テンプレートリテラルは、ES6 以降の JavaScript エンジンでのみ使用できます。

dangerouslySetInnerHTML プロパティを使用する

<div dangerouslySetInnerHTML={{ __html: children }} />

dangerouslySetInnerHTML プロパティを使用すると、HTML 文字列を直接レンダリングできます。この方法は、動的に生成された HTML コンテンツをレンダリングする必要がある場合に役立ちます。

dangerouslySetInnerHTML プロパティを使用すると、クロスサイトスクリプティング (XSS) 攻撃などのセキュリティリスクが発生する可能性があります。
このプロパティは、信頼できるソースからの HTML コンテンツのみをレンダリングする場合にのみ使用してください。

カスタムエスケープ関数を作成する

function escapeHTML(str) {
  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');
}

<div>
  {escapeHTML(children)}
</div>