react.jsでHTMLエンティティデコードを実装する

Question

私は、サーバーからAPIを使用してテキストを出力しています。コンテンツを簡単に埋め込むためのhtmlフィールドを持つ管理者がいます。ここでは、HTMLコードで表示されるテキストの問題です。私はどのようにその悪徳のHTMLコードを取り除くことができます。私はhtmlエンティティのデコードを使用しなければならないと思いますか？どのように私は反応プロジェクトでそれを実装するのだろうか？テキストの下にはテキストとHTMLコードだけでなく、

export class FullInfoMedia extends React.Component { 
    render() { 
     const renderHTML = (escapedHTML: string) => React.createElement("div", { dangerouslySetInnerHTML: { __html: escapedHTML } }); 

     return (
      <div> 
       <div className="about-title"> 
        <div className="container"> 
         <div className="row"> 
          <img className="center-block" src={this.props.about.image}/> 

          <h2>{this.props.about.title}</h2> 
          {renderHTML(<p>{this.props.about.body}</p>)} 
         </div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

Answer 1

あなたはdangerouslySetInnerHTMLを使用しますが、あなただけの入力ではなく、ユーザーをレンダリングすることを確認することができます。それはXSSにとって素晴らしい方法です。使用の

例：成分で

const renderHTML = (rawHTML: string) => React.createElement("div", { dangerouslySetInnerHTML: { __html: rawHTML } }); 

そして：

{renderHTML("<p>&amp;nbsp;</p>")}