Aller au contenu principal

Guide de mise à niveau (v3 -> v4)

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Changements cassants de l'API​

  • Toutes les balises spécifiées doivent avoir des valeurs correspondantes, sinon une erreur sera levée, par exemple :
new IntlMessageFormat('a<b>strong</b>').format({
  b: (...chunks) => <strong>{chunks}</strong>,
})

  • Nous n'autorisons pas la mise en forme des balises auto-fermantes car nous utilisons déjà la syntaxe ICU {placeholder} pour cela.

  • Les balises XML/HTML sont échappées à l'aide d'une apostrophe, comme les autres constructions ICU.

  • Suppression de la dépendance à DOMParser et des restrictions sur les éléments vides comme <link>. Cela signifie concrètement que vous n'avez plus besoin de polyfill DOMParser dans Node.

  • FormattedHTMLMessage et intl.formatHTMLMessage ont été supprimés car FormattedMessage prend désormais en charge les balises HTML intégrées.

Pourquoi ces changements ?​

  • FormattedHTMLMessage et intl.formatHTMLMessage ont été créés lorsque React était assez nouveau. Ces composants facilitaient la migration du HTML brut vers JSX. Étant donné la popularité actuelle de React et le fait que FormattedMessage permet désormais de rendre des balises HTML intégrées, ils ne sont plus nécessaires.

  • Initialement, lors de la première itération de la prise en charge du HTML intégré, nous autorisions toute balise sans formateur correspondant à être rendue en HTML brut. Nous avons reçu des retours internes indiquant que le rendu des balises HTML intégrées sans assainissement constitue un risque de sécurité XSS. Par conséquent, pour autoriser les balises HTML brutes, vous devez opter pour leur échappement à l'aide d'une apostrophe. Nous mettrons également à jour notre linter pour vérifier cela.

Migration hors du HTML intégré dans les messages​

Pour restaurer l'ancien comportement de FormattedHTMLMessage et intl.formatHTMLMessage, nous vous suggérons d'utiliser la fonction de formatage de texte enrichi comme ci-dessous :

Ancienne méthode :

intl.formatHTMLMessage('This is a <a href="foo">link</a>')

Nouvelle méthode :

intl.formatMessage('This is a <a>link</a>', {
  a: (...chunks) => sanitizeHTML(`<a href="foo">${chunks.join('')}</a>`),
})

Cela oblige les développeurs à toujours assainir leur HTML rendu et leurs fragments, minimisant ainsi les risques XSS.