React で生の HTML を安全にレンダリングするにはどうすればよいですか?

React を使用した生の HTML のレンダリング: より安全なアプローチ

React では、生の HTML のレンダリングは複雑なタスクになる場合があります。危険な方法で SetInnerHTML を使用する従来の方法は以前のバージョンでは機能していましたが、セキュリティ上の懸念から現在は非推奨になっています。ただし、より安全な方法が利用できるようになりました。

安全なレンダリング オプション

より安全な HTML レンダリングには、次の 4 つの主要なオプションがあります:

1. Unicode: ファイルを UTF-8 として保存し、文字セットを UTF-8 に設定します。シンボルと特殊エンティティには Unicode 文字を使用します。
2. Unicode 番号: JavaScript 文字列内で、目的のエンティティに Unicode 番号を使用します。
3. 混合配列: レンダリングのために配列内の文字列と JSX 要素を結合します。
4. dangerouslySetInnerHTML: 最後の手段として、gunakanangerouslySetInnerHTML dengan hati-hati, memastikan bahwa input yang dirender aman dan tepercaya。

混合配列オプションを使用した例:

const markup = [
  'First ',
  <span>&amp;middot;</span>,
  ' Second'
];

return <div>{markup}</div>;

結論

React で生の HTML をレンダリングする場合、次のことが可能です。特定のシナリオでは必要ですが、安全を優先することが不可欠です。上記で概説したより安全な方法を利用することで、レンダリング要件を満たしながら、React アプリケーションのセキュリティと信頼性を確保できます。

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