# Issue with HTML Notifications on Dashboard After Upgrade

**URL:** <https://discourse.nodered.org/t/issue-with-html-notifications-on-dashboard-after-upgrade/93813>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [10 December 2024 02:04 UTC](https://discourse.nodered.org/t/issue-with-html-notifications-on-dashboard-after-upgrade/93813 "2024-12-10T02:04:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![MecatronicaMADE](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@MecatronicaMADE](https://discourse.nodered.org/u/MecatronicaMADE)\
**Post date:** [10 December 2024 02:04 UTC](https://discourse.nodered.org/t/issue-with-html-notifications-on-dashboard-after-upgrade/93813/1 "2024-12-10T02:04:56Z")

</div>

Hi community, I'm injecting **HTML** into a **notification node** via a template node. The **HTML** consists of a simple table, and the formatting works correctly in Node-RED version 1.18.0 (see Image 1). However, after upgrading to version 1.20.0, the formatting is no longer applied (see Image 2).

**Additional Information:**

- Node-RED Version: 4.0.5
- Node.js Version: 18.20.4 (upgraded to 22.12.0)
- FlowFuse Dashboard Version: 1.18.0 (upgraded to 1.20.0)

 ![Image1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/9/598038e1b1b85d58f2ce55ef66e7071fda57bd02.png)  
Issue:  
 ![Image2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/d/0dd8934f19625a54c867b8043840a45f911b294b.png)

The Node-RED flow:

```auto
[{"id":"2d9c27fd13197f02","type":"ui-notification","z":"e023041b269bbaa8","ui":"0ee9ba68ec550cf9","position":"center center","colorDefault":true,"color":"#000000","displayTime":"200","showCountdown":false,"outputs":1,"allowDismiss":true,"dismissText":"Close","allowConfirm":false,"confirmText":"Confirm","raw":true,"className":"diag_popup","name":"popup-sensor-data","x":1910,"y":500,"wires":[[]]},{"id":"ddc1479c9e347862","type":"template","z":"e023041b269bbaa8","name":"html","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n<style>\n div.v-snackbar--variant-elevated{\n width: 90vw;\n max-width:800px;\n min-width: 400px;\n }\n div.v-snackbar--variant-elevated > div.v-snackbar __content{\n width: 100%;\n }\n div.v-snackbar--variant-elevated > .v-snackbar__ actions button{\n background-color: #aaa;\n }\n div.v-snackbar--variant-elevated table {\n width: 100%;\n border-collapse: collapse; \n }\n div.v-snackbar--variant-elevated th{\n text-align: left;\n }\n div.v-snackbar--variant-elevated td {\n border-bottom: 1px solid var(--red-ui-form-input-border-color, #ccc);\n padding: 8px;\n text-align: left;\n }\n div.v-snackbar--variant-elevated tr{\n border-bottom: 1px solid var(--red-ui-form-input-border-color, #ccc);\n }\n</style>\n<div class=\"diag_wrapper\">\n <h2>Address: {{stored.address}}</h2>\n <br>\n <table>\n <thead>\n <tr>\n <th>Counter</th>\n <th>Type</th>\n <th>RSSI</th>\n <th>Date/Time</th>\n </tr>\n <br>\n </thead>\n <tbody>\n <tr>\n <td>{{stored.counter.0}}</td>\n <td>{{stored.type.0}}</td>\n <td>{{{stored.rssi.0}}}%</td>\n <td>{{stored.date.0}}</td>\n </tr>\n <tr>\n <td>{{stored.counter.1}}</td>\n <td>{{stored.type.1}}</td>\n <td>{{{stored.rssi.1}}}%</td>\n <td>{{stored.date.1}}</td>\n </tr>\n <tr>\n <td>{{stored.counter.2}}</td>\n <td>{{stored.type.2}}</td>\n <td>{{{stored.rssi.2}}}%</td>\n <td>{{stored.date.2}}</td>\n </tr>\n <tr>\n <td>{{stored.counter.3}}</td>\n <td>{{stored.type.3}}</td>\n <td>{{{stored.rssi.3}}}%</td>\n <td>{{stored.date.3}}</td>\n </tr>\n <tr>\n <td>{{stored.counter.4}}</td>\n <td>{{stored.type.4}}</td>\n <td>{{{stored.rssi.4}}}%</td>\n <td>{{stored.date.4}}</td>\n </tr>\n <tr>\n <td>{{stored.counter.5}}</td>\n <td>{{stored.type.5}}</td>\n <td>{{{stored.rssi.5}}}%</td>\n <td>{{stored.date.5}}</td>\n </tr>\n <tr>\n <td>{{stored.counter.6}}</td>\n <td>{{stored.type.6}}</td>\n <td>{{{stored.rssi.6}}}%</td>\n <td>{{stored.date.6}}</td>\n </tr>\n <tr>\n <td>{{stored.counter.7}}</td>\n <td>{{stored.type.7}}</td>\n <td>{{{stored.rssi.7}}}%</td>\n <td>{{stored.date.7}}</td>\n </tr>\n <tr>\n <td>{{stored.counter.8}}</td>\n <td>{{stored.type.8}}</td>\n <td>{{{stored.rssi.8}}}%</td>\n <td>{{stored.date.8}}</td>\n </tr>\n <tr>\n <td>{{stored.counter.9}}</td>\n <td>{{stored.type.9}}</td>\n <td>{{{stored.rssi.9}}}%</td>\n <td>{{stored.date.9}}</td>\n </tr>\n </tbody>\n </table>\n</div>\n","output":"str","x":1730,"y":500,"wires":[["2d9c27fd13197f02"]]},{"id":"8ced1b1629ae3bd0","type":"inject","z":"e023041b269bbaa8","name":"","props":[{"p":"stored","v":"{\"address\":\"00:13:a2:00:42:53:64:53\",\"counter\":[\"-\",3,\"-\",3,\"-\",3],\"type\":[\"RUN\",\"sensor_data\",\"RUN\",\"sensor_data\",\"RUN\",\"sensor_data\"],\"rssi\":[null,null,null,null,null,null],\"date\":[\"12/9/2024, 7:57:55 PM\",\"12/9/2024, 7:57:55 PM\",\"12/9/2024, 7:58:20 PM\",\"12/9/2024, 7:58:20 PM\",\"12/9/2024, 7:59:53 PM\",\"12/9/2024, 7:59:53 PM\"]}","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1610,"y":500,"wires":[["ddc1479c9e347862"]]},{"id":"0ee9ba68ec550cf9","type":"ui-base","name":"ncd-ui-base","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"temporary","titleBarStyle":"default"}]

```

Any assistance would be greatly appreciated.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [10 December 2024 05:50 UTC](https://discourse.nodered.org/t/issue-with-html-notifications-on-dashboard-after-upgrade/93813/2 "2024-12-10T05:50:22Z")

</div>

@MecatronicaMADE,  
It might be caused by [this](https://github.com/FlowFuse/node-red-dashboard/pull/1394) pull request, which was introduced in version 1.19.0

Although I see no reason why that sanetization libray would by default remove (parts of) your css...

If nobody else jumps in, I will have a look later on. Please send me a reminder/mention in a couple of days if I forget this, because I am rather busy...

Bart

---

<div class="post-metadata">

**Author:** ![MecatronicaMADE](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@MecatronicaMADE](https://discourse.nodered.org/u/MecatronicaMADE)\
**Post date:** [10 December 2024 14:07 UTC](https://discourse.nodered.org/t/issue-with-html-notifications-on-dashboard-after-upgrade/93813/3 "2024-12-10T14:07:48Z")

</div>

Hi @BartButenaers Thank you for the quick response. Yes, it is a bit strange, and I would appreciate any support you can offer. I will certainly follow up with you in a couple of days

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [10 December 2024 20:29 UTC](https://discourse.nodered.org/t/issue-with-html-notifications-on-dashboard-after-upgrade/93813/4 "2024-12-10T20:29:57Z")

</div>

@MecatronicaMADE,  
Thanks for providing a simple example flow!  
Being able to quickly and repeatedly reproduce the problem, simplifies the fixing process...

Here you go:

> <https://github.com/FlowFuse/node-red-dashboard/pull/1529>
>
> \## Description
> 
> See bug report and example flow in \[this\](https://discourse.no…dered.org/t/issue-with-html-notifications-on-dashboard-after-upgrade/93813) Discourse question.
> 
> The solution is simply to tell DOMpurify that \`script\` tags are allowed. Then it looks better to me:
> 
> !\[image\](https://github.com/user-attachments/assets/e3168283-d1a8-40e3-9b26-ff690a7a3a11)
> 
> Of course this opens again some backdoors for possible CSS injection. Unfortunately I cannot do much about that...
> 
> \## Related Issue(s)
> 
> None
> 
> \## Checklist
> 
> 
> 
> - \[X\] I have read the \[contribution guidelines\](https://github.com/FlowFuse/flowfuse/blob/main/CONTRIBUTING.md)
> - \[\] Suitable unit/system level tests have been added and they pass 
> - \[\] Documentation has been updated
> - \[\] Upgrade instructions
> - \[\] Configuration details
> - \[\] Concepts
> - \[\] Changes \`flowforge.yml\`?
> - \[\] Issue/PR raised on \`FlowFuse/helm\` to update ConfigMap Template
> - \[\] Issue/PR raised on \`FlowFuse/CloudProject\` to update values for Staging/Production
> 
> \## Labels
> 
> - \[\] Includes a DB migration? -\> add the \`area:migration\` label

---

<div class="post-metadata">

**Author:** ![MecatronicaMADE](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@MecatronicaMADE](https://discourse.nodered.org/u/MecatronicaMADE)\
**Post date:** [10 December 2024 23:52 UTC](https://discourse.nodered.org/t/issue-with-html-notifications-on-dashboard-after-upgrade/93813/5 "2024-12-10T23:52:37Z")

</div>

@BartButenaers Thank you so much; I truly appreciate your time.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [24 December 2024 23:53 UTC](https://discourse.nodered.org/t/issue-with-html-notifications-on-dashboard-after-upgrade/93813/6 "2024-12-24T23:53:01Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.