Introduction aux Vues

Rôle et responsabilités

La Vue dans l’architecture MVC a pour responsabilité principale de générer l’interface utilisateur ; c’est la couche présentation. Intérêts de cette architecture :

  • Séparation claire entre la logique métier et la présentation.
  • Facilité de maintenance et d’évolution de l’interface.
  • Possibilité de changer l’interface sans affecter la logique métier.

La vue est un composant qui reçoit des données du contrôleur et les transforme en contenu affichable HTML.

Génération de la vue

Les architectures de rendu ont évolué vers deux principales approches :

  • SSR : génération du HTML côté serveur ; cette solution présente plusieurs avantages :
    • optimisation du référencement (SEO) ;
    • meilleure compatibilité (sans JavaScript) ;
    • simplicité et robustesse.
  • CSR : génération du HTML côté client (par le JavaScript) ;
    • soulage le serveur des calculs de rendu HTML ;
    • cette approche nécessite la mise en place (côté serveur) d’un service web (par exemple une API ReST) ;

Cette séquence de cours traite de l’approche SSR.

Les techniques d’améliorations progressives permettent de combiner les avantages des deux approches.

Tampon de sortie

Le tampon de sortie (*output *buffering) est un mécanisme PHP qui permet de capturer la sortie générée au lieu de l’envoyer directement au navigateur. Cette fonctionnalité est essentielle pour composer des rendus HTML par assemblage de sous-parties.

Les fonctions principales sont :

  • ob_start() : démarre la capture de la sortie ;
  • ob_get_clean() : renvoie le contenu capturé et nettoie le tampon.

Exemple :

ob_start();
?><!DOCTYPE html>
<html>
…
</html><?php
$html = ob_get_clean();
echo $html;

Sécurité

Protection contre le XSS

Rappel: le XSS consiste à injecter du code JavaScript malveillant qui sera exécuté dans le navigateur des autres utilisateurs.

L’encodage des données est une technique essentielle pour prévenir cette attaque. La fonction htmlspecialchars renvoie le contenu après conversion des caractères spéciaux en entités HTML ; ainsi <script> devient &lt;script&gt;, ce qui désactive le code JavaScript ; exemple :

<title><?=htmlspecialchars($title)?></title>

Attention : la fonction PDO::quote et les requêtes préparées protègent contre les injections SQL au niveau de la base de données, mais pas contre le XSS.

Quand encoder

Selon le guide ASVS en version 5 d’OWASP , l’encodage doit être effectué au moment de la génération de la vue, afin :

  • d’éviter les problèmes de double encodage ;
  • de conserver les données brutes pour d’autres usages ;
  • de respecter le principe d’encodage adapté au contexte :
    • fonction htmlspecialchars pour le HTML ;
    • fonction urlencode pour les paramètres d’une URL.

Techniques de rendu

PHP et HTML

Ce type de rendu repose sur un mélange de PHP et de HTML et présente les avantages suivants :

  • simplicité : aucune dépendance externe nécessaire ;
  • flexibilité : contrôle total sur le code généré ;
  • performance : exécution directe sans surcharge d’interprétation.

La syntaxe concise <?=…?> permet d’embarquer le résultat de fonctions ou le contenu de variables PHP dans le HTML.

Moteur de gabarits

Un moteur de gabarits (template engine) est un outil qui sépare strictement la logique métier de la présentation en utilisant un langage de rendu spécifique.

  • Avantages :
    • sécurité renforcée avec encodage automatique par défaut ;
    • syntaxe dédiée et simplifiée pour la présentation.
  • Inconvénients :
    • surcharge d’exécution pour réaliser les traitements de rendu, notamment en raison du recours aux expressions rationnelles ;
    • syntaxe additionnelle à apprendre ;
    • complexité accrue en raison des dépendances (bibliothèques) supplémentaires ;
    • flexibilité réduite par rapport au PHP natif.

Exemples de template engine :

Exemple de rendu avec gabarit

Le gabarit suivant (fichier elements-list.mustache permet d’afficher les propriétés name d’une collection elements :

<ul>
    {{#elements}}
        <li>{{nom}}</li>
    {{/elements}}
</ul>

Le code PHP du contrôleur associé pourrait être :

$template = file_get_contents('elements-list.mustache');
$data = $pdo->query("SELECT name FROM elements")->fetchAll(PDO::FETCH_ASSOC);
$html = Mustache::render($template, ['elements' => $data]);

Performances et cache

Stratégies de mise en cache

La mise en cache des vues consiste à stocker le résultat HTML généré pour éviter de recalculer le rendu à chaque requête identique. Cela permet :

  • d’améliorer la performance et de réduire significativement le temps de réponse ;
  • de réduire la charge processeur et mémoire du serveur (au détriment d’une occupation plus importante de l’espace de stockage).

Mode de gestion du cache

L’approche cache-aside consiste à vérifier la présence du cache avant de générer le contenu ; exemple de séquence d’instructions pour un contrôleur :

$html = Cache::get('/chemin/ressource');    //chargement du cache
if (null == $html) {                        //si cache absent
    $data = …;                              //extraction des données
    $html = new …View()->render($data);     //rendu HTML
    Cache::set('/chemin/ressource', $html); //mise en cache
}
echo $html;

L’invalidation consiste à supprimer le cache lors des opérations d’insertion, de modification ou de suppression de données, afin de forcer un nouveau rendu avec des données actualisées ; exemple :

Cache::reset('/chemin/ressource');

Cache et fuite de données

Les caches peuvent contenir des données sensibles ou confidentielles. Un accès direct aux fichiers du cache permettrait de contourner les mécanismes d’autorisation. Il est par conséquent nécessaire d’empêcher le chargement de ces fichiers :

  • en les hébergeant en dehors du web accessible ;
  • ou en configurant le serveur pour interdire l’accès direct à ces fichiers, par exemple avec des directives dans les fichiers .htaccess Apache.