Iframe no longer works on external access (Zerotier or Nginx) but VPN ok

General
1

Not really related to Nodered, but ...

I use the iFrame function to incorporate Grafana into Nodered. Grafana is on the same machine as NR, so same IP address.

Everything is OK, except when I use Zerotier or Nginx to access my NR from outside.
I understood that it was a security function of the browsers not to display a site inside another one.
I understand that you can force the display by adding this information:

add_header X-Frame-Options SAMEORIGIN always;

So I integrated it in Nginx and also in settings.js from NR like that:

httpAdminMiddleware: function(req,res,next) { 
res.set('X-Frame-Options', 'sameorigin'); 
        next(); 
},

But the result is always negative. The window remains empty.
On the other hand, using my VPN everything is ok, that's logical.

Debug of the browser:

image

Do you have any idea how to display these iFrames from outside your home ?

thank you for advising me.

(I have browsed the forum without finding any solutions)

2

Sorry, I don't have an answer as I just keep grafana separate to Node-RED mostly. Are there any errors appearing in your browser console?

However, same IP but not the same port unless you have used NGINX to proxy it. If I were doing this, I would certainly use NGINX to proxy both so that the Grafana site becomes a new path on the exposed domain.

https://my.example.com/nr-admin
https://my.example.com/nr-ui
https://my.example.com/grafana

3

Thank you Julian for giving me some leads.
So I have a question. When using the iFrame node, would it be possible to use a URL like localhost or 127.0.0.1 instead of 192.168.x.y ? Would it make a difference? and what would be the syntax.

Indeed I can access directly to Grafana but I lose the ergonomics provided in the same dashboard

View through Nginx:
From inside:
image

From outside:
image
My internal sites are not in https. It is the Nginx that has the certificate and encrypts between the client and itself.
Firefox console:

image
image1418Ă—56 19.7 KB

With Zerotier:

image
image828Ă—684 73.8 KB

4

I don't think so because I think the iframe runs in the context of the browser. so you have to have a URL that makes sense to the browser. That's why you need to proxy Grafana because you need to be able to put a suitably externally reachable url into it.

So you have the wrong URL specified I think? Proxy Grafana through NGINX and the problem should go away.

However, I've just tried the node you mention and it doesn't work at all for me. I've tried various different internal URL's and none of them worked. When I put the same iframe tag that the node generates into a uibuilder page, it worked perfectly.

1 Like
5

this is the one I use. Very practical really.

Yes, you are right. I have tried both ideas without success. It does not understand the "localhost" address.
I was thinking that there must be a way to tell the browser "go ahead, trust me, integrate this site, I trust it".
add_header X-Frame-Options SAMEORIGIN always;But this command seems to have no influence.

6

Yes, that's the one I tried and didn't work at all for me. Which is slightly strange since, as I say, pasting the same tag into a uibuilder page worked first time.

No, that would be a massive security problem since any malware could then do the same.

But, as I say, doing it on the server so that the two different sites appear to be the same site via NGINX as a reverse proxy should work fine - though I've not tested it. I posted a fairly comprehensive NGINX example config in a thread a few days ago.

7

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