HTML tags are not working in Ionic 5 Alert text

Question

I have migrated the following code from Ionic 3 to Ionic 5

   const alert = await this.alertCtrl.create({
      subHeader: "About" + " <b>" + this.user.name + "</b>",
      message: "Test Messgae",
      buttons: [
        {
          text: 'Close',
          role: 'cancel',
          handler: () => {
          }
        }
      ]
    });
    await alert.present();

In Ionic 3 the user name is displayed in Bold font but in Ionic 5 the HTML tags are not working and < b > tags are displayed as text. Please suggest how can I style text in alert in IONIC 5.

Answer 1

A word of caution

The html tags appear since Ionic sanitizes the passed string to avoid unsafe html injections. Unsafe html can be used by an attacker to coordinate XSS attacks.

Solutions

In case you need a simple customization of the html I'd greatly prefer Tomislav's answer to avoid any security risks.

If you need a bit of simple html inside the alert box you can use message: new IonicSafeString("foo<br>bar"). If you choose this option be sure to sanitize the html by yourself to make sure the string you pass is safe (see more on Bypassing the sanitizer on a case-by-case basis).

If you need to display real html you probably better of using a modal instead of an alert. Alerts are intended to display simple content.

Updates

Starting on Ionic 7 you need to enable innerHTMLTemplatesEnabled: true on your config for IonicSafeString to work. See the breaking changes bug report.