Comment restituer en toute sécurité des chaînes HTML au format JSX dans React ?

Convertir des chaînes HTML en JSX rendu dans React

Présentation du dilemme de React

Lors de l'affichage données reçues via des requêtes AJAX dans ReactJS, les développeurs rencontrent souvent un problème courant : les données apparaissent sous forme de texte brut au lieu de rendu HTML. Cela se produit en raison du comportement par défaut de React consistant à échapper au contenu HTML pour éviter les vulnérabilités de script intersite (XSS).

Dévoilement de la solution

Pour relever ce défi, React propose la propriété dangereusementSetInnerHTML. En utilisant cette propriété, les développeurs peuvent restituer les chaînes HTML sous forme d'éléments React. Cependant, il est important de noter que cette approche comporte des risques inhérents et doit être utilisée avec prudence.

Créer la solution

Pour illustrer l'utilisation de dangereusementSetInnerHTML, considérez ce qui suit exemple :

<td dangerouslySetInnerHTML={{ __html: this.state.actions }} />

Dans ce code, la chaîne HTML de la réponse AJAX (stockée dans this.state.actions) est rendue dans un élément td. Cela permet au contenu HTML de s'afficher correctement dans l'application React.

Une note de prudence

Bien que dangereusementSetInnerHTML résolve le problème de rendu HTML, il est crucial de faire preuve de vigilance lors de l'utilisation cette propriété. Toute vulnérabilité XSS potentielle dans la chaîne HTML peut compromettre la sécurité de l'application. Il est conseillé d'utiliser des techniques de désinfection côté serveur pour garantir l'intégrité du contenu HTML avant de le restituer dans React.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!