Cannot escape raw HTML with {{{payload}}} into ui-template - page hangs

[d4videvans]

I'm looking to output some raw HTML within a dashboard template, but when I add the extra {} pair - i.e. change from {{msg!.payload}} to {{{msg!.payload}}} - the page hangs - a 'loading...' screen sits there for a minute or two and then produces a blank page. I'm on Node Red v3.1.5 and @flowfuse/node-red-dashboard v1.1.0.

[1TTT9]

Hi, do you know if this issue has been resolved? I encountered a similar problem when trying to render an HTML string in the ui-template node. I attempted to input a text string like <h 1>hello world</h 1> expecting it to be rendered as an H1 heading. However, it displayed the string as <h 1>hello world</h 1> when I used . Additionally, the template hung when I used {{msg!.payload}}</t emplate> or </t emplate>. I am unsure how to correctly render my HTML string in the ui-template node. Thank you.

[d4videvans]

While the page hanging isn't ideal behaviour, when I investigated further, outputting raw html in this way is prevented by design as it is a security risk. Instead, you have to use the v-html directive, something like this:

<template>
    <div v-html="msg?.payload">
    </div>
</template>

More info here: https://vuejs.org/guide/essentials/template-syntax.html

Apologies for not coming back with this update previously...

[1TTT9]

Thanks for your kind explanation. Yeah, you are right, we should not pass raw HTML strings as they pose a security risk. I also realized that msg?.payload does not work in ui-markdown node either; the window still hangs when I pass msg.payload using the same codes you mentioned. I then worked around this problem and finally rendered our dynamic content correctly by using the ui-template node and attribute binding. Again, thank you for your kind reply.