frangoteam / FUXA

Web-based Process Visualization (SCADA/HMI/Dashboard) software
https://frangoteam.org
MIT License
2.75k stars 810 forks source link

Add option to display Iframe URL from server or frontend #812

Open MatthewReed303 opened 1 year ago

MatthewReed303 commented 1 year ago

Hi, I'm building a fuxa app where I use some Node-Red components displayed in Fuxa via iframe. This works fine on the local machine but as soon as I connect to the fuxa server from another PC and browser the iframe can no longer be displayed since the urls are localhost and need to stay that way. So there needs to be an option where the iframe get's served from the server rather than the client

mauroalexandre commented 1 year ago

Hi!

In my opinion this is not the fuxa proposal/scope.

You can solve this problem using a webserver, like nginx/apache. Read about "proxy_pass".

MatthewReed303 commented 1 year ago

@mauroalexandre Proxy-Pass still won't work... from my reading you can route the app for example from localhost:1880 to localhost:8080 etc The other PCs that access the Fuxa Server have no access to the localhost. Only the Fuxa server have access to the localhost where the web app is hosted.

For example on some of my apps I will have a reverse proxy pointing to the fuxa server to be accessed remotely over the Internet.... The Iframe needs to be loaded from the server URL. From doing a bit of reading this can be done using angular and fetching the src url from backend. This is done on some webchat apps etc

I don't think a proxy can solve this one. The clients web browser needs to load the iframe content from the server

What are your thoughts @unocelli

Maybe add this into the node.js as an option:

https://github.com/marko-js/micro-frame

This allows users to create there own custom apps from other applications like Node-Red and get served from the server No need to try mess around with proxy servers etc The content is served directly from the server backend to the clients frontend

unocelli commented 1 year ago

@MatthewReed303 I am sorry but I cannot help you, it is not really my domain

MatthewReed303 commented 1 year ago

Hi @unocelli what about adding the above library I linked? That does every required, will just have to add menu to change parameter's like the iframe? It's quite important for a web based system to have everything served from to server as the clients browser can't access content in the iframe separately

mauroalexandre commented 1 year ago

@MatthewReed303 I have the same scenario you want.

I created a exaple diagram, check if this not work for you. image

MatthewReed303 commented 1 year ago

Hi @mauroalexandre

Thanks for the diagram, I see exactly where you are coming from now. This could work but messy to setup and maintain, especially over VPN etc I currently use NPM via docker and will look if it supports proxy pass as a work around in the meantime. But I think a proper solution would be the server pushing to the client. Would the micro-frame library not work for this?

MatthewReed303 commented 1 year ago

@mauroalexandre I have just been mucking around trying to get your example working and ran into an issue... on the sites local network where I am, I don't have access to the routers etc to setup DNS server for a domain name on the local network. What other work around would you consider in this case?

I have to embed some IP cameras into the iframes also which is watching some parts of machinery. The owner want's access to the HMI from his office so he can keep an eye on the machine operation and workers.

There IT department wont give me any access and have setup a single VLAN and port on switch for me. The said no to any custom DNS and have to do that all on my end etc

MatthewReed303 commented 1 year ago

@mauroalexandre Did you ever get it working for your application? I need these IP cam streams displayed in the iframe, at the moment I have it working on the local machine. The cam stream is http://localhost:5000/live/webrtc/stream.html?src=rtsp_cam51&mode=webrtc the problem is I can't use the IP of the PC since it is DHCP ( IT won't allow static ) Everything works fine on the PC it self, but If I try to access fuxa from another PC I can't see the Iframes since I don't have access to the local host, it works if I use the current PC IP in the iframe, but if PC restarts it's assigned new IP. I have tried using the PC hostname also so if ip changes it resolves still this kinda works for some parts of the network, but there are different levels and forwarding going on. For example if I'm connected directly to the plant network I can use the PC hostname, but if I'm connected to Engineering or Management network I can ping the PC ip address but can't resolve the IP. I have tried all sorts of different proxy etc with no luck. I may try look into some sort of dynamic DNS, but don't think this will work since other clients PCs use the ITs strict DNS server. I can't even even get internet on my PC by using google DNS 8.8.8.8 it has to go through there DNS server on the router. They won't give me exact answer why I can't have static IP and a custom DNS entry for that IP. They just said I have to make it work on my end or the app. I'm out of ideas now. I forgot to mention they have done some sort of redirect for the user to access fuxa though on the local network, scada.local redirects to a custom login page not part of fuxa but managed by IT and then directs to the Fuxa app running on the PC. They said this is all they can and will allow. So currently it's half working, just can't see iframe content