Comment restituer du HTML brut dans React en toute sécurité ?

Rendu du HTML brut avec React : une approche plus sûre

Dans React, le rendu du HTML brut peut être une tâche complexe. Bien que la méthode traditionnelle d'utilisation de wonderfullySetInnerHTML fonctionnait dans les versions antérieures, elle est depuis obsolète en raison de problèmes de sécurité. Cependant, il existe désormais des méthodes plus sûres.

Options de rendu sécurisé

Pour un rendu HTML plus sûr, vous disposez de quatre options principales :

1. Unicode : Enregistrez votre fichier au format UTF-8 et définissez le jeu de caractères sur UTF-8. Utilisez des caractères Unicode pour les symboles et les entités spéciales.
2. Numéro Unicode : À l'intérieur d'une chaîne JavaScript, utilisez le numéro Unicode pour l'entité souhaitée.
3. Tableau mixte : Combinez des chaînes et des éléments JSX dans un tableau pour le rendu.
4. dangerouslySetInnerHTML : En dernier recours, vous pouvez dangereusementSetInnerHTML dengan hati-hati, memastikan bahwa saisir yang dire aman et tepercaya.

Exemple d'utilisation de l'option de tableau mixte :

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

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

Conclusion

Bien que le rendu du HTML brut avec React puisse être nécessaire dans certains scénarios, il est essentiel de donner la priorité à la sécurité. En utilisant les méthodes plus sûres décrites ci-dessus, vous pouvez garantir la sécurité et la fiabilité de vos applications React tout en répondant à vos exigences de rendu.

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!