Vai al contenuto principale

Guida all'Aggiornamento (v3 -> v4)

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

Modifiche di Rottura nelle API​

  • Tutti i tag specificati devono avere valori corrispondenti e genereranno un errore se mancanti, es:
new IntlMessageFormat('a<b>strong</b>').format({
  b: (...chunks) => <strong>{chunks}</strong>,
})

  • Non è consentito formattare tag auto-chiudenti poiché utilizziamo già la sintassi ICU {placeholder} per questo scopo.

  • I tag XML/HTML vengono escapati usando l'apostrofo, come altre strutture ICU.

  • Rimossa la dipendenza da DOMParser e le restrizioni su elementi void come <link>. Ciò significa che non è più necessario polyfillare DOMParser in Node.

  • FormattedHTMLMessage e intl.formatHTMLMessage sono stati rimossi poiché FormattedMessage supporta pienamente i tag HTML incorporati.

Motivazioni di queste modifiche​

  • FormattedHTMLMessage e intl.formatHTMLMessage furono creati quando React era agli inizi. Questi componenti facilitavano la migrazione da HTML grezzo a JSX. Considerando l'attuale diffusione di React e il fatto che FormattedMessage supporti il rendering di tag HTML incorporati, non sono più necessari.

  • Nella prima iterazione del supporto per HTML incorporato, consentivamo il rendering diretto di tag senza formattazione. Abbiamo ricevuto feedback interni che evidenziavano come questo rappresentasse un rischio XSS per la sicurezza. Pertanto, per utilizzare tag HTML grezzi è necessario esplicitare l'opzione escapandoli con apostrofo. Aggiorneremo anche il nostro linter per verificare questa condizione.

Migrazione dall'HTML incorporato nei messaggi​

Per ripristinare il comportamento precedente di FormattedHTMLMessage e intl.formatHTMLMessage, suggeriamo di utilizzare la funzionalità di formato rich text come segue:

Metodo precedente:

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

Nuovo metodo:

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

Questo obbliga gli sviluppatori a sanificare sempre l'HTML renderizzato e i chunk, riducendo così il rischio XSS.