Sécurité

htmx vous permet de définir la logique directement dans votre DOM. Cela présente un certain nombre d’avantages, le plus important étant la Localité du Comportement, qui rend votre système plus facile à comprendre et à maintenir.

Cependant, cette approche peut poser des problèmes de sécurité : étant donné que htmx augmente l’expressivité du HTML, si un utilisateur malveillant parvient à injecter du HTML dans votre application, il peut tirer parti de cette expressivité de htmx à des fins malveillantes.

Règle 1 : Échapper Tout Contenu Utilisateur

La première règle du développement web basé sur HTML a toujours été : ne faites pas confiance aux entrées de l’utilisateur. Vous devez échapper tout contenu provenant de tiers ou non sécurisé qui est injecté dans votre site. Cela vise à prévenir, entre autres, les attaques de type XSS.

Il existe une documentation extensive sur les XSS et comment les prévenir sur l’excellent site OWASP, y compris une feuille de triche pour la prévention des Cross-Site Scripting.

La bonne nouvelle, c’est que c’est un sujet très ancien et bien compris, et la grande majorité des langages de templating côté serveur supportent l’échappement automatique du contenu pour prévenir justement ce type de problème.

Cela dit, il y a des moments où l’on choisit d’injecter du HTML de manière plus dangereuse, souvent via un mécanisme tel que raw() dans leur langage de templating. Cela peut être fait pour de bonnes raisons, mais si le contenu injecté provient d’un tiers, alors il doit être nettoyé, y compris en supprimant les attributs commençant par hx- et data-hx, ainsi que les balises script en ligne, etc.

Si vous injectez du HTML brut et faites votre propre échappement, une bonne pratique consiste à blanchir les attributs et les balises que vous autorisez, plutôt qu’à mettre sur liste noire ceux que vous désautorisez.

Outils de Sécurité htmx

Évidemment, des bugs peuvent survenir et les développeurs ne sont pas parfaits, il est donc bon d’avoir une approche en couches pour la sécurité de votre application web, et htmx fournit des outils pour vous aider à sécuriser votre application.

Examinons-les.

hx-disable

Le premier outil que htmx fournit pour vous aider à sécuriser davantage votre application est l’attribut hx-disable. Cet attribut empêchera le traitement de tous les attributs htmx sur un élément donné, ainsi que sur tous les éléments qui s’y trouvent. Par exemple, si vous incluez du contenu HTML brut dans un modèle (encore une fois, cela n’est pas recommandé !), vous pourriez placer une div autour du contenu avec l’attribut hx-disable :

<div hx-disable>
    <%= raw(user_content) %>
</div>

Et htmx ne traitera aucun des attributs ou fonctionnalités liés à htmx trouvés dans ce contenu. Cet attribut ne peut pas être désactivé par injection de contenu supplémentaire : si un attribut hx-disable est trouvé n’importe où dans la hiérarchie parente d’un élément, il ne sera pas traité par htmx.

hx-history

Une autre considération de sécurité concerne le cache de l’historique de htmx. Vous pouvez avoir des pages contenant des données sensibles que vous ne voulez pas stocker dans le cache localStorage de l’utilisateur. Vous pouvez omettre une page donnée du cache de l’historique en incluant l’attribut hx-history n’importe où sur la page, en définissant sa valeur sur false.