HTML 标签在 Ionic 5 警报文本中不起作用

Question

我已将以下代码从 Ionic 3 迁移到 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();

在 Ionic 3 中，用户名以粗体显示，但在 Ionic 5 中，HTML 标签不起作用，< b > 标签显示为文本。请建议我如何在 IONIC 5 中设置警报中的文本样式。

Answer 1

一句警告

由于 Ionic 会清理传递的字符串以避免不安全的 html 注入，因此会出现 html 标签。攻击者可以利用不安全的 html 来协调 XSS 攻击。

解决方案

如果您需要对 html 进行简单的自定义，我非常喜欢Tomislav 的答案，以避免任何安全风险。

如果您需要在警报框中添加一些简单的 html，您可以使用message: new IonicSafeString("foo<br>bar"). 如果您选择此选项，请务必自行清理 html，以确保您传递的字符串是安全的（请参阅根据具体情况绕过清理程序的更多信息）。

如果您需要显示真实的 html，您可能最好使用模式而不是警报。警报旨在显示简单的内容。

更新

从 Ionic 7 开始，您需要启用innerHTMLTemplatesEnabled: true配置才能IonicSafeString工作。请参阅重大更改错误报告。