Saltar al contenido principal

Guía de actualización (v3 a v4)

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Cambios importantes en la API​

  • Todas las etiquetas especificadas deben tener valores correspondientes y generarán un error si faltan, por ejemplo:
new IntlMessageFormat('a<b>strong</b>').format({
  b: (...chunks) => <strong>{chunks}</strong>,
})

  • No permitimos formatear etiquetas de autocierre porque ya usamos la sintaxis ICU {placeholder} para eso.

  • Las etiquetas XML/HTML se escapan usando apóstrofes al igual que otras construcciones ICU.

  • Se eliminó la dependencia de DOMParser y las restricciones en elementos vacíos como <link>. Esto significa que ya no necesitas aplicar polyfill para DOMParser en Node.

  • FormattedHTMLMessage e intl.formatHTMLMessage se han eliminado porque FormattedMessage ahora admite completamente etiquetas HTML incrustadas.

¿Por qué realizamos estos cambios?​

  • FormattedHTMLMessage e intl.formatHTMLMessage se crearon originalmente cuando React era bastante nuevo. Estos componentes ayudaron a facilitar la migración desde HTML puro a JSX. Dada la popularidad actual de React y el hecho de que FormattedMessage permite renderizar etiquetas HTML incrustadas, ya no son necesarios.

  • Inicialmente durante la primera iteración de soporte para HTML incrustado, permitíamos que cualquier etiqueta sin un formateador correspondiente se renderizara como HTML puro. Recibimos comentarios internos de que permitir que las etiquetas HTML incrustadas se rendericen tal cual sin saneamiento representa un riesgo de seguridad por XSS. Por lo tanto, para permitir etiquetas HTML puras debes optar explícitamente escapándolas con apóstrofe. Actualizaremos nuestro linter para verificar esto también.

Migración de HTML incrustado en mensajes​

Para restaurar el comportamiento antiguo de FormattedHTMLMessage e intl.formatHTMLMessage, sugerimos usar la función de formato de texto enriquecido como se muestra a continuación:

Método antiguo:

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

Método nuevo:

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

Esto obliga a los desarrolladores a sanear siempre el HTML y fragmentos renderizados, minimizando así los riesgos de XSS.