Dashboard seems to filter html

Hello.
I could use your help. I use ui_template to generate HTML. According to the attached debug-node the code is correct. However, the dashboard seems to filter tags like "name". Can this be turned off somehow or can certain tags be whitelisted?

Here is the problematic flow:

[
    {
        "id": "e22fec0b.9cd1c8",
        "type": "ui_template",
        "z": "90243100.c40928",
        "group": "dd366daf.ed20e8",
        "name": "",
        "order": 1,
        "width": 7,
        "height": 15,
        "format": "<div ng-bind-html=\"msg.payload\"></div>\n\n<script>\nfunction hist_gal(imgs) {\n  var expandImg = document.getElementById(\"expandedImg\");\n  var imgText = document.getElementById(\"imgtext\");\n  expandImg.src = imgs.src;\n  imgText.innerHTML = imgs.alt;\n  expandImg.parentElement.style.display = \"block\";\n}\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": false,
        "templateScope": "local",
        "x": 1140,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "321e9cb7.9abef4",
        "type": "function",
        "z": "90243100.c40928",
        "name": "convert payload to html",
        "func": "var images = msg.payload\nmsg.payload = \"<div class=\\\"gallery\\\" height=\\\"100%\\\"> \";\n\nmsg.payload += \"<div class=\\\"full-picture\\\">\";\n\nimages.forEach(function(image){\n    image = image.replace(\"/home/pi/.node-red/storage\",\"..\");\n    var desc = image;\n    desc = desc.replace(\"../cam/\",\"\");\n    desc = desc.replace(\".jpg\",\"\");\n    msg.desc = desc;\n    msg.payload += \"<div><a src=\\\"\\\" name=\\\"\" + desc + \"\\\"></a><img src=\\\"\" + image + \"\\\" /></div>\";\n});                      \nmsg.payload += \"</div>\";\nmsg.payload += \"</div>\";\nreturn msg;\n",
        "outputs": 1,
        "noerr": 0,
        "x": 870,
        "y": 480,
        "wires": [
            [
                "e22fec0b.9cd1c8",
                "c51012b0.205c98"
            ]
        ]
    },
    {
        "id": "390315ac.56fdf2",
        "type": "fs-file-lister",
        "z": "90243100.c40928",
        "name": "",
        "start": "/home/pi/.node-red/storage/cam",
        "pattern": "*.jpg",
        "hidden": false,
        "path": true,
        "single": true,
        "depth": 0,
        "stat": false,
        "x": 440,
        "y": 280,
        "wires": [
            [
                "a3c78564.e348a8",
                "d801f5d5.7fe41",
                "321e9cb7.9abef4"
            ]
        ]
    },
    {
        "id": "d93e226d.5444a8",
        "type": "inject",
        "z": "90243100.c40928",
        "name": "",
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "repeat": "60",
        "crontab": "",
        "once": true,
        "onceDelay": "5",
        "x": 130,
        "y": 280,
        "wires": [
            [
                "390315ac.56fdf2"
            ]
        ]
    },
    {
        "id": "dd366daf.ed20e8",
        "type": "ui_group",
        "z": "",
        "name": "Rückblick",
        "tab": "71dfb607.40b268",
        "order": 2,
        "disp": true,
        "width": 7,
        "collapse": false
    },
    {
        "id": "71dfb607.40b268",
        "type": "ui_tab",
        "z": "",
        "name": "Kamera",
        "icon": "cam",
        "order": 3,
        "disabled": false,
        "hidden": false
    }
]

Debug Output:

payload: 
"<div class="gallery" height="100%"> 
<div class="full-picture">
<div><a src="" name="1570644700650"></a><img src="../cam/1570644700650.jpg" /></div>
<div><a src="" name="1570644716164"></a><img src="../cam/1570644716164.jpg" /></div>
<div><a src="" name="1570644723246"></a><img src="../cam/1570644723246.jpg" /></div>
<div><a src="" name="1570644727842"></a><img src="../cam/1570644727842.jpg" /></div>
<div><a src="" name="1570672800031"></a><img src="../cam/1570672800031.jpg" /></div>
<div><a src="" name="1570683600031"></a><img src="../cam/1570683600031.jpg" /></div>
<div><a src="" name="1570770000026"></a><img src="../cam/1570770000026.jpg" /></div>
<div><a src="" name="1570856400028"></a><img src="../cam/1570856400028.jpg" /></div>
<div><a src="" name="1570942800031"></a><img src="../cam/1570942800031.jpg" /></div>
<div><a src="" name="1571029412335"></a><img src="../cam/1571029412335.jpg" /></div>
<div><a src="" name="1571115600035"></a><img src="../cam/1571115600035.jpg" /></div>
<div><a src=""..."

Dashboard html output:

<div class="full-picture">
<div><a src=""></a><img src="../cam/1570644700650.jpg"></div>
<div><a src=""></a><img src="../cam/1570644716164.jpg"></div>
<div><a src=""></a><img src="../cam/1570644723246.jpg"></div>
<div><a src=""></a><img src="../cam/1570644727842.jpg"></div>
<div><a src=""></a><img src="../cam/1570672800031.jpg"></div>
<div><a src=""></a><img src="../cam/1570683600031.jpg"></div>
<div><a src=""></a><img src="../cam/1570770000026.jpg"></div>
<div><a src=""></a><img src="../cam/1570856400028.jpg"></div>
<div><a src=""></a><img src="../cam/1570942800031.jpg"></div>
<div><a src=""></a><img src="../cam/1571029412335.jpg"></div>
<div><a src=""></a><img src="../cam/1571115600035.jpg"></div>
<div><a src=""></a><img src="../cam/1571202000029.jpg"></div>
<div><a src=""></a><img src="../cam/1571288400030.jpg"></div>
</div>

You probably need to add the trusted filter to tell angular not to filter...

<div ng-bind-html="msg.payload | trusted"></div>
1 Like

Thank you so much! Now my dashboard works.