Dashboard iframe Refused to display in webpage an iframe because it set 'X-Frame-Options' to 'same origin

General
1

Hello,
I am trying to display an industrial HMI webpage in node-red dashboard using a template node , but that page won't display.. after many hour digging I learned is because this
" [Refused to display 'URL' in a frame because it set 'X-Frame-Options' to 'same origin']"
Question is there any workaround to be able to display that page in node-red dashboard ?
I can't change the way the industrial HMI is setup to show the webserver.

I have this in my template node:

<html>
<body style="background-color:MediumSeaGreen;">
<h1 style="color:MediumSeaGreen; text-align:center;">F600 HMI</h1>
<iframe src={{{payload}}}  height="600" width="800"   ></iframe>
</body>
</html>

image
image1352Ă—598 51.9 KB

image

2

maybe try the dashboard ui-iframe node that lets you easily control the origin ?

1 Like
3

Otherwise, use a proxy server in front of things so that everything appears as the same origin.

4

Thanks @dceejay & @TotallyInformation for your ideas.. I tried with the ui-iframe node , but I don't know how to use the origin , can you please provide an example?

image
image1209Ă—405 23.6 KB

5

@luisgcu,
I think you can my also try my node-red-contrib-http-proxy node for this use case.
Bart

1 Like
6

Hi @BartButenaers .
Thanks for your advice, I have to study that solution.
Looks like your node have a lot documentation and explanations, its a lot works have been done there . thanks for sharing and thanks to all node-red team, I been using node-red since 4 or 5 years ago. Its a great tool for many makers and professional that are not high level language programmers.

7

To summarize: you navigate to your Node-RED dashboard via ´https://your-hostname/dashboard´ which returns a bunch of stuff (html, css, ...) to your browser. However there is also an iframe included, that refers to ´https://another-hostname´. So in fact your browser is redirected to that other hostname, to load stuff which needs to be displayed inside the iframe.

However modern browsers say: hey this is not secure. The user didn't ask to get stuff from that other hostname, so let's fail it. Because indeed some webpage might redirect you to some malafide site...

When you use a proxy (or my proxy node), you let your iframe refer to ´https://your-hostname/other-path´. So the browser gets your iframe content from your hostname, but the proxy forwards your request to the other hostname to get the iframe content.

By doing it this way, all your stuff arrives from your hostname. So your browser is happy.

Hopefully that clearifies things a bit...

2 Likes
8

I still trying this solution but I can't actually get it to work.
this is what I did
My nodered is running OK at: https://mysubdomain.mydomain.net/
The device embebed web page that I want to visualize on nodered iframe is in another domain,and subdomain and if fully operational
image

then using my browser I go to : https://mysubdomain.mydomain.net/f600/
when doing that i get this. Prompt to enter i think is my NR dashboard user and password

image
image875Ă—272 10.4 KB

After entering my User and password I get this:
image
I am not sure what I am missing in the http proxy node configuration?
image
image545Ă—672 16.9 KB

I can access to https://f600.anotherdomain.com:3330/
image
image748Ă—436 9.15 KB

after entering the password
image
image1031Ă—467 52.1 KB

This is an industrial VFD with HMI that is used to set the application, I want to setup for training purposes so my colleagues can access to the demo in one single page while seen the camera they can operate the HMI webpage for the configuration

image
image1031Ă—467 52.1 KB

I will appreciate any further advice.

9

Pfff, it seems it is almost 5 years ago that I last updated the http proxy node. So I cannot remember the details anymore, and it might contain some obsolete stuff meanwhile...

Isn't that normal that you get the Node-RED credentials popup box, when you navigate to the proxy url directly. I had developed it to navigate to it via your dashboard (e.g. via an iframe), so you have already completed the authentication in advance. I assume the popup does not appear anymore when you access it via your dashboard...

So your site is also password protected. Then I assume you need to enter your authentication credentials in my node. Of course it will only work when your site supports this way of working...

10

I am going to continue testing with other devices that I have home and have webserver embebed to make sure the http proxy works

1 Like
11

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