Ui iframe VPN access

Hello community,

this may not be the most appropriate forum for the topic, but maybe someone can help me.

I have a RaspberryPi running with NodeRed. I would like to use a ui-iframe to embed local web interfaces (e.g. a heat pump, a router) into the dashboard.

This works perfectly in the local network.

However, it doesn't work when I access it externally via VPN. The iframe remains empty. Probably because it then accesses the local network of the end device and not that of the Raspberry. Right?

What could a solution look like? Reverse proxy? Unfortunately, I'm not an IT expert. But I could probably manage it if I knew what to look for and where the problem was.

Thank you for your feedback.

Welcome to the forums @Zwen.

I think this depends.

  • Do you have a direct tunnel to Node RED only?
  • Or A tunnel to the network it lives?

I hope my question makes sense?

Where I am going with this..

You may only have a "wormwhole" to Node RED only - if that makes sense, and it may not grant access to the network that it runs under.

Example... I use wireguard - and my wireguard setup adds routes to my client for my private lan(s) through the WG tunnel - meaning I get access to my entire network(s) (iframe or not) - providing any request is for the subnet of my (many) networks.

I.e : Your VPN setup may only allow X.X.X.X/32 (Node RED IP Only)
and not X.X.X.X/24 - its Network

I would like to call in @TotallyInformation & @BartButenaers
as both have XP in the area of VPN to Node RED

1 Like

Thank you for your feedback.

Currently the VPN tunnel is at X.X.X.X:1880.

That means if I set the tunnel to X.X.X.X/24, it should work? Right?

Without knowing your VPN software, its hard to answer
(don't reveal, too much - this is public :grinning_face: )

But yes...

Most VPN systems allow you to set up what interface is used for a specific network/address.

X.X.X.X/32 : A single requested IP should go out towards the VPN
X.X.X.X/24 : the range (X.X.X.0-255) will go out via the VPN interface.

BUT - The target network that the VPN interface will try and reach may have fierwalling in place

1 Like

Thank you very much. :folded_hands:

I will test it and report back. :grinning_face_with_big_eyes:

1 Like

Example:

If your Node RED is on address : 10.0.0.X (lets say NR is at 10.0.0.47)

If you setup the VPN software to route 10.0.0.0/24 out VIA the VPN
Your VPN client will see Node RED + Anything in the same Network

If you setup the VPN software to route 10.0.0.47/32 out VIA the VPN
Your VPN client will ONLY see Node RED

1 Like

Okay. But then I have a question.

If I enter "10.0.0.0/24" in the VPN, then I get a link that takes me to the address.

How can I then access "10.0.0.47:1880/ui" via the link?

I hope you understand what I mean.

Again - Without knowing your setup (what software/setup)
It's hard to answer.

In essence

Traditional VPN (at least in my corporate setting)
Is designed to route traffic for a certain address space out via the VPN adapter.

10.0.0.47/32 : Any traffic for this address (10.0.0.47) - use the VPN
10.0.0.5/32 : Any traffic for this address (10.0.0.5) - use the VPN
10.0.0.0/24 : Any traffic for 0-255 - use the VPN

I.e - once you have the VPN (10.0.0.0/24), then you can go to any address in the routed network
Example

I think it maybe worth waiting for @TotallyInformation / @BartButenaers

I am used to corporate set ups. -not so much the cloud based systems -Sorry :smiling_face_with_halo:

1 Like

Hi guys,

I don't use traditional VPN's myself. But the explanation from @marcus-j-davies seems to me to explain it all very well, in a nutshell.

So you have now entered 10.0.0.0/24 in your VPN, and as a result you can navigate externally to http://10.0.0.X succesfully. Can you please explain a bit more in detail which problem you currently have:

  1. The dashboard does not open when you navigate to http://10.0.0.X:1880/ui?
  2. The dashboard opens successfully, but the content of your ui-frame is empty?
  3. Others?

In any case, are there errors in your browser console log (via the developer tools of your browser)? For example CORS related errors, https related errors, or anything else?

2 Likes

So the dashboard opens and everything works.

The ui frame remains empty without any message in it.

Later I will check the console log.

Check in the browser's dev tools. Check the network tab to see if something is failing to load. And the console to see if there is an error.


Sorry, been a bit busy recently. But the explanation about routing is correct of course. Where it gets complex is where you want both a VPN and other networks. And in that case, you need to be VERY CAREFUL because it is all too easy to bridge 2 networks and completely destroy the security.

Unbenannt

This is the result in the dev tools.

1 Like

That suggests that you are accessing node red using https. I thought you were accessing it directly over the vpn.

No, I use Teltonika's RMS VPN. When I set up a VPN to a specific address, it generates an https link, which I use.

In that case you will have to use https inside the frame too. You cannot normally access an http site inside a frame in an https site (which would be a security risk, in general). I don't know if there is a way of disabling that check for a particular case.

1 Like