Utilisation du code HTML dans les variables JavaScript

Découvrez comment JavaScript gère les variables contenant du code HTML et les implications en termes de sécurité.

Détails de la leçon

Description de la leçon

Lorsqu'une variable en JavaScript contient du code HTML, celui-ci n'est pas interprété automatiquement lors d'une interpolation. Pour que le code soit interprété, il faut préfixer le nom de la variable dans l'interpolation par @HTML. Par exemple, nous pouvons définir deux variables, l'une contenant du texte brut et l'autre contenant du code HTML. Ensuite, nous les afficherons avec et sans le préfixe @HTML pour en montrer les effets.

Lorsque le texte brut est affiché, il n'y a pas de différence que l'on utilise le préfixe @HTML ou non. Cependant, pour le texte contenant du code HTML, celui-ci sera affiché de manière textuelle s'il n'est pas précédé du préfixe @HTML. Par contre, si le préfixe est utilisé, le code sera interprété et rendu correctement. Notez que cela peut poser des problèmes de sécurité car du code JavaScript malveillant peut être introduit via un champ de formulaire.

Objectifs de cette leçon

À l'issue de cette vidéo, les apprenants sauront :
- Comment utiliser des variables JavaScript contenant du code HTML.
- Les implications de sécurité liées à l'utilisation du préfixe @HTML dans les interpolations.

Prérequis pour cette leçon

Connaissance de base en JavaScript et HTML.

Métiers concernés

Développeurs web, spécialistes en sécurité informatique.

Alternatives et ressources

Utilisation de frameworks sécurisés comme React ou Vue.js pour une meilleure gestion des interpolations et de la sécurité.

Questions & Réponses

L'utilisation du préfixe @HTML permet à JavaScript d'interpréter et de rendre correctement le code HTML contenu dans une variable.
Le risque est que le code JavaScript malveillant introduit par l'utilisateur puisse être exécuté, créant des failles de sécurité potentielles.
Parce que le texte brut, même avec le préfixe @HTML, ne contient pas de balises à interpréter, donc le rendu reste textuel.