Texte ou HTML ? — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 1)

Texte ou HTML ?

Premiers pas avec Vue · niveau 1 (application)

Énoncé

Qu'affiche cette page ? Pourquoi est-ce une bonne nouvelle pour la sécurité de la Librairie, dont les avis de lecteurs sont saisis par des inconnus ?


const { createApp } = Vue;

createApp({
  setup() {
    return {
      badge: "<em>Nouveauté</em>",
      avis: "<img src=x onerror=\"alert('piégé')\">",
    };
  },
}).mount("#app");


<div id="app">
  <p>{{ badge }}</p>
  <p>{{ avis }}</p>
</div>

Corrigé

Le texte des deux paragraphes, puis le HTML produit par Vue :


<em>Nouveauté</em>
<img src=x onerror="alert('piégé')">
<p>&lt;em&gt;Nouveauté&lt;/em&gt;</p><p>&lt;img src=x onerror="alert('piégé')"&gt;</p>

Les chaînes sont insérées comme du texte : les chevrons sont échappés (<), aucune balise n'est créée, et le code JavaScript caché dans l'attribut onerror n'est jamais exécuté. Un lecteur malveillant qui écrirait cet « avis » ne pourrait pas exécuter de script chez les autres visiteurs (attaque XSS, livre JavaScript, chapitre sur le DOM). Pour insérer volontairement du HTML, Vue a une directive dédiée, v-html, à n'utiliser qu'avec un contenu de confiance (chapitre 2).