bug: IonToast with IonicSafeString display 'undefined'

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When I try to display an IonToast with a message containing an IonicSafeString, the text "undefined" is displayed inside the ion-toast, instead of the contents of the IonicSafeString

Expected Behavior

The IonToast must display the contents of the IonicSafeString

Steps to Reproduce

1. Create an IonToast with the use of ToastController
2. In message property set a IonicSafeString with 'Hello!'
3. Present the IonToast and see the message 'undefined' in it

Code Reproduction URL

https://stackblitz.com/edit/angular-sxv7cl?file=src/app/example.component.ts

Ionic Info

Ionic:

Ionic CLI : 7.0.0
Ionic Framework : not installed
@angular-devkit/build-angular : 15.2.4
@angular-devkit/schematics : 15.2.4
@angular/cli : 15.2.4
@ionic/angular-toolkit : 7.0.0

Capacitor:

Capacitor CLI : 4.6.2
@capacitor/android : not installed
@capacitor/core : 4.6.2
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 1.7.2

System:

NodeJS : v16.20.0
npm : 8.19.4
OS : Windows 10

Additional Information

With previous versions of Ionic (for example 6) the issue does not occur

[liamdebeasi]

Thanks for the report. The problem here is you do not have innerHTMLTemplatesEnabled enabled in your Ionic config. In Ionic 7 we disabled the custom innerHTML functionality by default, so developers need to first enable this functionality before they can use it. This is noted in the Ionic 7 Breaking Changes Guide.

To fix this, set innerHTMLTemplatesEnabled: true in IonicModule.forRoot in app.module.ts. Adding this resolved the issue on my end. I am going to close this, but let me know if you have any questions.

Thank you @liamdebeasi, problem solved with your suggestion. I apologize for not checking the breaking changes earlier.

[liamdebeasi]

Not a problem, and glad the issue is resolved!

[bkleineibst]

The documentation is not really clear on this. It states that you can disable this on a case-by-case basis using IonicSafeString, after mentioning the global config option. (https://ionicframework.com/docs/techniques/security#bypassing-the-sanitizer-on-a-case-by-case-basis) However, as pointed out, this doesn't work.

Shouldn't this option still be available, as opposed to enabling it for all innerHTML, which is unsafe?

[liamdebeasi]

IonicSafeString only has the desired result when innerHTMLTemplatesEnabled: true which was the default in Ionic v6. In other words, the innerHTML usage was enabled by default in Ionic v6 even if you were not passing in custom HTML or using IonicSafeString.

IonicSafeString allows you to bypass Ionic's sanitizer to dangerously append custom HTML content using innerHTML. However, if this innerHTML functionality is disabled then IonicSafeString will have no effect.

I updated the docs in ionic-team/ionic-docs#2906 to make this clearer.

[bkleineibst]

Thanks @liamdebeasi.

However, if I enable innerHTMLTemplates, then it seems like I don't need to use IonicSafeString to bypass Ionic's sanitizer. It is bypassed by default.

[liamdebeasi]

Do you have a reproduction case?

I am testing this with the latest Ionic 7 and an alert: https://codepen.io/liamdebeasi/pen/mdzerZe

The "script" tag is being removed when the alert is presented.

[bkleineibst]

Maybe it is the case that the sanitizer is more selective.

I have a string with "<br/>" in it. https://codepen.io/bkleineibst/pen/JjmYboq

If leaves the plain text if it innerHTMLTemplates is not enabled, and replaces with line breaks if it is.

[liamdebeasi]

That is the intended behavior.

When innerHTMLTemplatesEnabled is true any content passed to the message property will be interpreted as HTML.
When innerHTMLTemplatesEnabled is false any content passed to the message property will be interpreted as a string.

---

The sanitizer in this case only applies when innerHTMLTemplatesEnabled is true since content is interpreted as custom HTML. Using IonicSafeString lets you bypass the sanitizer step, but content will still be interpreted as HTML.