[Bug]: Toast html/unsafeHtml not work

[InitialCrow]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

Hello,
I made migration to alpha on my project and I need to rework so much code that permit to find a bug with html/unsafeHtml not work

Current Behavior

Toast displayed but without content

Expected behavior

toast should show the unsafeHtml in

Possible Solutions or Causes

I just check all about html inject is commented why ?

Steps to reproduce

Just use M.toast({unsafeHtml: '<span>I am toast content</span>'}); its not work even on documentation

Your Environment

last mozilla and chrome
last ubuntu

[InitialCrow]

Btw is same for unsafeHtml tooltip

[Jerit3787]

If I was not mistaken, the unsafeHtml was removed in v2.0.0 actually. Setting this as a documentation issue.

[mauromascarenhas]

You're right, the support to unsafeHTML have been removed.

It would be interesting to have another option to allow raw HTML content such as allowUnsafeHTML, since it would give more flexibility when rendering featured contents.

I usually use it to wrap the toast content in another div which is responsible for receiving customizations (without affecting other generic toasts).

[wuda-io]

I think if html is needed then the dom has to be manipulated itself. We also should scan the Code for innerHTML and remove it where possible to make the product more robust against xss attacks. I understand the confort but it can still be done with a custom function or even better to inherit the Component as a whole and add the features in the child class.

[mauromascarenhas]

I believe that we are in the same page when it come to terms of XSS attack prevention: raw HTML/script injection should be avoided whenever possible.

However, I also believe that we should standardize this behaviour for v2.x giving the possibility to the developer of "customizing" the generated element either through a "render/creation" function or through an unsafe option as we did before.

On the one hand, in the first option we would give flexibility of "customization" of the rendered toast to the developers: every single modification would be up to them (sanitization, DOM manipulation etc.).

On the other hand, the second option would make it simpler to provide raw HTML content, but the MaterializeCSS framework itself would have to inject it (it would still be up to the developer to make the proper sanitization).

To sum up, considering the context of attack prevention, I'd opt by the first option, since it would also make it easier to create custom components by inheritance, while giving the oppotunity of element customization natively (without having to perform direct HTML injection).

---

PS.: There is also the necessity of "normalization" of support to "custom HTML", since its support used to have different name for each component. The affected ones would be:

• Autocomplete: makes use of allowUnsafeHTML;
• Toast: used to support unsafeHTML;
• Tooltip: used to support unsafeHTML.

[InitialCrow]

ok ty guys

[imprex92]

Hello sorry for hijacking but since the ticket is still open and I have problem with no content showing if I add classes to the toast. Also I'm using "text" and not "unsafeHtml" like the Author
I write the toast like this: M.toast({ text: 'Invalid Email', classes: 'error' })

I was expecting the toast to show up with the content.
Instead I got an empty box

[danice]

I have a PR with an alternative, simple solution: allow to specify some element as tooltip content. A new property data-tooltip-id will allow specify an element as tooltip content instead of text.

[ruitalia]

Hello sorry for hijacking but since the ticket is still open and I have problem with no content showing if I add classes to the toast. Also I'm using "text" and not "unsafeHtml" like the Author I write the toast like this: M.toast({ text: 'Invalid Email', classes: 'error' })

I was expecting the toast to show up with the content. Instead I got an empty box

same here

[baccarg]

Option classes not work for me:
When Im add "classes" option.. this works, but the text not show (display a empty toast adding a classes option)

[danice]

Option classes not work for me: When Im add "classes" option.. this works, but the text not show (display a empty toast adding a classes option)

submitted a PR that fixes this issue:

#435

[aleksap99]

Now that the properties HTML/unsafeHTML are removed from toasts, is there any other way to customize toasts html beside just using the classes property?

[danice]

Now that the properties HTML/unsafeHTML are removed from toasts, is there any other way to customize toasts html beside just using the classes property?

Yes there is, please check this explanation: #431

[aleksap99]

Now that the properties HTML/unsafeHTML are removed from toasts, is there any other way to customize toasts html beside just using the classes property?

Yes there is, please check this explanation: #431

Sorry if I missed something but this seems to be only for tooltips not toasts. Will this work for toasts as well?

[danice]

Now that the properties HTML/unsafeHTML are removed from toasts, is there any other way to customize toasts html beside just using the classes property?

Yes there is, please check this explanation: #431

Sorry if I missed something but this seems to be only for tooltips not toasts. Will this work for toasts as well?

You are completely right... the fix was for tooltips. I added just now a similar fix for toasts #436 .

[aleksap99]

Now that the properties HTML/unsafeHTML are removed from toasts, is there any other way to customize toasts html beside just using the classes property?

Yes there is, please check this explanation: #431

Sorry if I missed something but this seems to be only for tooltips not toasts. Will this work for toasts as well?

You are completely right... the fix was for tooltips. I added just now a similar fix for toasts #436 .

Thank you for the PR.

[wuda-io]

Implemented in https://github.com/materializecss/materialize/releases/tag/2.0.3
Demo here: https://materializeweb.com/toasts.html