extends layout

block content
  h1= title
  p Bienvenue sur la page de démonstration XSS.

  hr

  h2 Formulaire de test
  p Entrez un texte normal (ex: "chats") ou un script (ex:
    code <script>alert('XSS !')</script>
    | )

  form(method="GET" action="/" style="margin-top: 10px;")
    label(for="search-input") Votre recherche :
    input(type="text" name="search" id="search-input" style="width: 300px;" placeholder="<script>alert('XSS !')</script>")
    button(type="submit") Lancer la recherche

  hr

  // On n'affiche les résultats que si un terme de recherche est présent
  if searchTerm
    h2 1. Rendu SÉCURISÉ (par défaut avec Pug)
    p
      | Le template utilise
      code #{searchTerm}
      | . Pug "échappe" les caractères HTML.
    p
      strong Résultat :
      //- C'est la syntaxe SÉCURISÉE
      span(style="background-color: #e0fde0; padding: 5px; border-radius: 4px;") #{searchTerm}

    hr

    h2 2. Rendu VULNÉRABLE (Faille XSS)
    p
      | Le template utilise
      code !{searchTerm}
      | . Le
      code !
      | désactive l'échappement.
    p
      strong Résultat :
      //- C'est la syntaxe VULNÉRABLE. Le script sera inséré tel quel, car l'échappement est désactivé (!).
      span(style="background-color: #fde0e0; padding: 5px; border-radius: 4px;") !{searchTerm}

  else
    p (Aucune recherche effectuée)