React 19.3 : View Transitions stables et Trusted Types

React 19.3 est arrivé sur npm le 9 septembre 2026. C'est une version mineure sans changements incompatibles, donc la mise à jour en elle-même est ennuyeuse dans le bon sens du terme. Ce qui compte, c'est ce qui est sorti du tiroir expérimental. Les View Transitions et les Fragment Refs sont désormais stables, et deux ajouts plus discrets, use(browser()) et le support des Trusted Types, changent silencieusement la façon de penser le rendu et la sécurité.

Nous avons lu les notes de version pour que vous puissiez passer la propagande et aller directement aux parties qui concernent de vrais projets.

Ce qui a réellement été livré

Les View Transitions étaient cachées derrière un drapeau expérimental pendant environ un an et demi. Le composant <ViewTransition> est maintenant stable. Il anime les éléments lorsqu'ils apparaissent, disparaissent, se déplacent ou changent de taille, et il s'interface avec l'API View Transition du navigateur aux côtés de startTransition, Suspense et useDeferredValue. Un helper complémentaire, addTransitionType(), vous permet de varier l'animation en fonction de ce qui a déclenché la transition, par exemple « suivant » vs « précédent » sur un carrousel.

Les Fragment Refs sont également stables. Vous pouvez attacher une ref à un <Fragment> et récupérer un ensemble limité de méthodes DOM pour tout le groupe d'enfants : addEventListener, focus(), observeUsing() pour IntersectionObserver, ainsi que quelques helpers de mesure. Si vous avez déjà rendu une liste de frères et sœurs et lutté avec React pour attacher un seul observateur à tous, voici la solution.

Ensuite, deux choses qui ont reçu moins d'attention mais qui le méritent davantage.

use(browser()) est un nouveau moyen de désactiver le rendu côté serveur. Appelez-le dans un composant et React suspend ce composant sur le serveur, affiche le fallback Suspense dans le HTML initial, puis le rend normalement après l'hydratation. Il est destiné aux composants qui ne peuvent vraiment pas s'exécuter sur le serveur, comme tout ce qui lit localStorage ou le fuseau horaire de l'utilisateur.

Le support des Trusted Types est celui qui nous tient le plus à cœur. React DOM avait l'habitude de convertir chaque valeur en chaîne avant de la transmettre au DOM. Maintenant il passe TrustedHTML, TrustedScript et TrustedScriptURL sans les modifier, ce qui vous permet d'exécuter React sous une politique de sécurité du contenu (CSP) avec require-trusted-types-for 'script' et d'obtenir une protection XSS basée sur le DOM au niveau de la plateforme.

Notre avis

Commençons par le gain en sécurité. Lors des missions de pentesting, nous trouvons encore des XSS basés sur le DOM plus souvent que les équipes ne le prévoient, généralement via un appel dangerouslySetInnerHTML qui fait confiance à des données qu'il ne devrait pas. Les Trusted Types déplacent la vérification dans le navigateur. Si une valeur n'est pas passée par une politique Trusted Types, l'affectation lève une exception au lieu de s'exécuter. C'est le type de défense qui tient même quand un développeur fait une erreur plus tard. Quand nous configurons Cloudflare et CSP pour des clients, c'est le contrôle en couches que nous préconisons, et maintenant React ne s'y oppose plus.

Le hic, c'est que les Trusted Types ne servent à rien si vous ne les activez pas. React 19.3 rend React compatible. Il ne définit pas l'en-tête CSP pour vous. Notre conseil pour cette semaine est concret. Ajoutez require-trusted-types-for 'script' en mode rapport uniquement, déployez-le et regardez les rapports de violation pendant quelques semaines avant de l'appliquer. Vous trouverez les points d'injection oubliés sans casser la production.

Soyez prudent avec use(browser()). C'est une API propre, mais cela signifie que le contenu du composant est absent du HTML rendu côté serveur. Pour un widget de paramètres, c'est bien. Pour tout ce qu'un moteur de recherche ou un scraper social doit voir, ce contenu est maintenant invisible au premier rendu. Nous avons vu des équipes nuire à leur propre SEO en poussant trop de rendu côté client. Utilisez-le pour les composants feuilles uniquement côté navigateur, pas pour le contenu qui importe aux robots d'indexation.

Équipes mobiles, attendez un peu. Les View Transitions ne fonctionnent que dans le DOM pour l'instant. L'équipe React indique que le support de React Native est en cours, mais il n'est pas encore là. Dans notre travail natif iOS et Android, nous nous appuyons de toute façon sur les propres API de transition de la plateforme, et pour les projets React Native, nous attendrions avant de concevoir autour de <ViewTransition> jusqu'à ce qu'il soit réellement disponible pour la plateforme. Ne construisez pas une couche d'animation partagée sur une API qui ne vit que sur une seule cible.

Une chose à faire maintenant

Prenez votre plus petite application React, mettez-la à jour vers la 19.3 sur une branche, et activez les Trusted Types en mode rapport uniquement. C'est un moyen à faible risque de voir combien de travail DOM non sécurisé se cache dans votre codebase, et la mise à jour n'a pas de changements incompatibles pour vous ralentir. Si le rapport revient propre, tant mieux. Sinon, vous venez de trouver le carnet de sécurité du prochain sprint.

Si livrer rapidement sans laisser de failles XSS vous parle, parlons-en. Nous faisons cela pour des équipes web et mobiles chaque semaine, des constructions cloud-natives aux revues de sécurité.