web-dev-qa-db-fra.com

Implémentez HTML Entity Decode dans react.js

Je produis le texte en utilisant l'API du serveur, et j'ai un administrateur qui a les champs html pour faciliter le remplissage du contenu. Le problème ici est que le texte s'affiche avec des codes html. Comment puis-je me débarrasser de ces codes html inédits. Je suppose que je dois utiliser le décodage d'entité html? Comment vais-je mettre en œuvre ce projet in react? Ci-dessous, vous voyez que le texte illustre non seulement le texte et le code 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

Vous pouvez utiliser dangerouslySetInnerHTML, mais assurez-vous de rendre uniquement votre entrée, pas les utilisateurs. Cela peut être un excellent moyen pour XSS.

Exemple d'utilisation:

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

Et puis dans un composant:

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

Même si vous pouvez utiliser dangerouslySetInnerHTML ce n'est pas vraiment une bonne pratique, et comme indiqué par Marek Dorda c'est une excellente chose pour rendre votre application XSS vulnérable.

Une meilleure solution serait d'utiliser la bibliothèque he. https://github.com/mathiasbynens/he

Ce serait un exemple de l'apparence de votre composant avec lui.

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>
        );
    }
}

De plus, si c'était ma base de code, je déplacerais très probablement le décodage vers l'appel API, et dans le composant, je consommerais simplement la valeur qui vient du magasin

3
Alejandro Vales