Comment sécuriser l’injection de données dans le DOM en JavaScript

[sasa76]

Bonjour à tous,

Je travaille actuellement sur une interface JavaScript qui récupère des données depuis une API avant de les afficher dans le DOM.

Dans beaucoup de projets, on retrouve encore ce genre de code :

```javascript
const container = document.querySelector("#message");

container.innerHTML = `
<div class="notification">
${apiResponse.message}
</div>
`;
```

Même lorsque l’API nous appartient, cette approche me paraît risquée. Une donnée compromise, mal filtrée ou provenant indirectement d’un utilisateur pourrait permettre une injection HTML, voire une XSS côté DOM.

Pour du texte simple, la solution semble assez claire :

```javascript
container.textContent = apiResponse.message;
```

On peut également construire les éléments explicitement :

```javascript
const notification = document.createElement("div");
notification.classList.add("notification");
notification.textContent = apiResponse.message;

container.replaceChildren(notification);
```

La question devient plus compliquée lorsque certaines portions de HTML doivent réellement être autorisées, par exemple pour afficher du texte enrichi.

Les approches que j’envisage sont :

* éviter `innerHTML` dès que possible ;
* utiliser `textContent` pour toutes les données textuelles ;
* nettoyer le HTML autorisé avec une bibliothèque comme DOMPurify ;
* ajouter une Content Security Policy stricte ;
* étudier Trusted Types pour limiter les injections dans les API sensibles du DOM ;
* filtrer les données côté serveur, sans considérer cela comme une protection suffisante côté navigateur.

Comment gérez-vous ce sujet dans vos projets ?

1. Utilisez-vous encore `innerHTML` dans certaines situations ?
2. Nettoyez-vous le contenu côté serveur, côté navigateur, ou aux deux endroits ?
3. Trusted Types est-il réaliste sur une application JavaScript classique ?
4. Quelle politique CSP utilisez-vous sans casser les scripts existants ?
5. Avez-vous déjà rencontré une XSS provenant d’une API supposée fiable ?

Je cherche surtout à définir une approche simple et reproductible, applicable aussi bien à une petite application qu’à un projet plus important.

Metin
Ingénieur cybersécurité
Vernam Cybersécurité et Microsoft 365 pour les PME
https://vernam.fr

[tamara48wells]

Ton analyse est très pertinente : éviter innerHTML, privilégier textContent et créer les éléments explicitement reste la base, tandis que DOMPurify, CSP stricte et Trusted Types apportent une couche de sécurité supplémentaire pour gérer le HTML autorisé et limiter les risques XSS.