web-dev-qa-db-ja.com

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

サーバーからAPIを使用してテキストを出力しています。コンテンツの入力を容易にするためのHTMLフィールドを持つ管理者がいます。ここで問題が発生し、テキストがHTMLコードで表示されるようになりました。あの不要なhtmlコードを取り除く方法。 HTMLエンティティデコードを使用する必要があると思いますか？それを反応プロジェクトにどのように実装しますか？以下のテキストは、テキストとhtmlコードだけではないことを示しています。

enter image description here

  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>
        );
    }
}
reactjshtml-entities
9
Feruza

dangerouslySetInnerHTMLを使用できますが、ユーザーではなく入力のみをレンダリングするようにしてください。 XSSに最適な方法です。

使用例：

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

そしてコンポーネントで：

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

dangerouslySetInnerHTMLを使用することはできますが、それは実際には良い習慣ではありません。 Marek Dorda で述べられているように、アプリのXSSを脆弱にするのは素晴らしいことです。

より良い解決策は、heライブラリを使用することです。 https://github.com/mathiasbynens/he

これは、コンポーネントがどのように見えるかを示す例になります。

import he from 'he'

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>
                            { he.decode(this.props.about.body) }
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

また、コードベースの場合は、デコードをAPI呼び出しに移動する可能性が高く、コンポーネントでは、ストアから取得した値を消費するだけです。

3
Alejandro Vales