Zum Hauptinhalt springen

Upgrade-Leitfaden (v3 -> v4)

Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

Breaking API-Änderungen​

  • Alle angegebenen Tags müssen entsprechende Werte haben. Fehlende Werte lösen einen Fehler aus, z.B.:
new IntlMessageFormat('a<b>strong</b>').format({
  b: (...chunks) => <strong>{chunks}</strong>,
})

  • Selbstschließende Tags sind für die Formatierung nicht erlaubt, da wir hierfür bereits die ICU-Syntax {placeholder} verwenden.

  • XML/HTML-Tags werden mittels Apostroph maskiert, genau wie andere ICU-Konstrukte.

  • Entfernung der Abhängigkeit von DOMParser und Einschränkungen für Void-Elemente wie <link>. Dies bedeutet, dass DOMParser in Node.js nicht mehr gepolyfilled werden muss.

  • FormattedHTMLMessage & intl.formatHTMLMessage wurden entfernt, da FormattedMessage nun vollständig eingebettete HTML-Tags unterstützt.

Warum wurden diese Änderungen vorgenommen?​

  • FormattedHTMLMessage & intl.formatHTMLMessage wurden ursprünglich eingeführt, als React noch relativ neu war. Diese Komponenten erleichterten die Migration von reinem HTML zu JSX. Angesichts der heutigen Verbreitung von React und der Tatsache, dass FormattedMessage eingebettete HTML-Tags rendern kann, sind sie nicht mehr notwendig.

  • In der ersten Iteration der HTML-Unterstützung erlaubten wir, dass Tags ohne entsprechenden Formatter als rohes HTML gerendert werden. Interne Rückmeldungen wiesen darauf hin, dass dies ein XSS-Sicherheitsrisiko darstellt, da HTML-Tags ohne Sanitisierung gerendert werden. Daher müssen Sie rohe HTML-Tags explizit durch Maskierung mit Apostroph erlauben. Unser Linter wird entsprechend aktualisiert.

Migration von eingebettetem HTML in Nachrichten​

Um das alte Verhalten von FormattedHTMLMessage & intl.formatHTMLMessage zu reproduzieren, verwenden Sie die Rich-Text-Formatierung wie folgt:

Alter Ansatz:

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

Neuer Ansatz:

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

Dies zwingt Entwickler, gerendertes HTML & Chunks stets zu sanitisieren, was XSS-Risiken minimiert.