React で HTML 文字列を JSX として安全にレンダリングするにはどうすればよいですか?

React で HTML 文字列をレンダリング可能な JSX に変換する

React のジレンマの紹介

表示時開発者は、ReactJS の AJAX リクエストを介してデータを受信することがよくあります。データがレンダリングされた HTML ではなくプレーン テキストとして表示されるという一般的な問題が発生します。これは、クロスサイト スクリプティング (XSS) の脆弱性を防ぐために HTML コンテンツをエスケープするという React のデフォルト動作が原因で発生します。

ソリューションの公開

この課題に対処するために、React は以下を提供します。危険なほどSetInnerHTMLプロパティ。このプロパティを利用することで、開発者は HTML 文字列を React 要素としてレンダリングできます。ただし、このアプローチには固有のリスクが伴うため、注意して使用する必要があることに注意することが重要です。

ソリューションの作成

dangerlySetInnerHTML の使用法を説明するには、次の点を考慮してください。例:

<td dangerouslysetinnerhtml="{{" __html: this.state.actions></td>

このコードでは、AJAX 応答からの HTML 文字列 (次の場所に保存されます) this.state.actions) は td 要素内でレンダリングされます。これにより、HTML コンテンツが React アプリケーション内で正しく表示されるようになります。

注意事項

dangerlySetInnerHTML は HTML レンダリングの問題を解決しますが、使用する場合は注意を払うことが重要です。この物件。 HTML 文字列に XSS の潜在的な脆弱性があると、アプリケーションのセキュリティが侵害される可能性があります。 React でレンダリングする前に、サーバー側のサニタイズ技術を使用して HTML コンテンツの整合性を確保することをお勧めします。

以上がReact で HTML 文字列を JSX として安全にレンダリングするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。