Solved: Node-RED iframe in a Node-RED template

Venzi_ · ‎03-14-2024

Hello,

is it possible to embed the Node-RED ui into a Node-RED template?

This is what I'm trying:

Sgilk · ‎03-14-2024

I'm a little confused what you are trying to do here. You want to embed the entire UI generated in your Node-RED flow into an iframe that is itself part of that UI? Would that not create an infinite recursion of iframes inside of iframes?

Venzi_ · ‎03-14-2024

Hello @Sgilk,

the page containing the iframe is genarated by a template node and do not include the entire Node-RED UI.

My idea is to create a more comfortable access to the Node-RED UI from e.g. mobile phone. For this, I want to avoid the Node-RED navigation bar, which cannot be hidden dynamically (so far I know), but can be disabled for an iframe view.

In my case no website at all can be shown inside of the iframe. I guessed, this is because of the template node or any CtrlX specific settings. I don't use a template widget in order to stay outside the Node-RED UI.

Sgilk · ‎03-14-2024

@Venzi_ ,

There are possible issues with X-frame-options here, so the URL structure and requested resource are important.

Ex. "chromewebdata/:1 Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'."

Try something like this in your template node... I found you need to specify the entire URL, including device IP address. This is displaying my standard Node-RED dashboard (/node-red/ui) in an iframe at /node-red/ui/mobile.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile UI</title>
</head>
<body>
    <div>
        <iframe style="width:500px; height:500px;" src="https://127.0.0.1:8443/node-red/ui/" frameborder="0" allowfullscreen></iframe>
    </div>
</body>
</html>

Venzi_ · ‎03-14-2024

It worked. Thank you, @Sgilk!