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

**URL:** <https://discourse.nodered.org/t/dashboard-iframe-refused-to-display-in-webpage-an-iframe-because-it-set-x-frame-options-to-same-origin/82013>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [13 October 2023 18:29 UTC](https://discourse.nodered.org/t/dashboard-iframe-refused-to-display-in-webpage-an-iframe-because-it-set-x-frame-options-to-same-origin/82013 "2023-10-13T18:29:24Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![luisgcu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/luisgcu/32/4549_2.png) [@luisgcu](https://discourse.nodered.org/u/luisgcu)\
**Post date:** [13 October 2023 18:29 UTC](https://discourse.nodered.org/t/dashboard-iframe-refused-to-display-in-webpage-an-iframe-because-it-set-x-frame-options-to-same-origin/82013/1 "2023-10-13T18:29:24Z")

</div>

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:

```auto
<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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/9/8989af17690846e2f03364011e112caa7722969e.jpeg)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/4/b4d10df080d15bda0c63fcbaae083be1951bb89f.png)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [13 October 2023 22:10 UTC](https://discourse.nodered.org/t/dashboard-iframe-refused-to-display-in-webpage-an-iframe-because-it-set-x-frame-options-to-same-origin/82013/2 "2023-10-13T22:10:22Z")

</div>

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

> **[node-red-node-ui-iframe](https://flows.nodered.org/node/node-red-node-ui-iframe)**
>
> Node-RED UI widget node for embedding web page

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 October 2023 22:34 UTC](https://discourse.nodered.org/t/dashboard-iframe-refused-to-display-in-webpage-an-iframe-because-it-set-x-frame-options-to-same-origin/82013/3 "2023-10-13T22:34:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![luisgcu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/luisgcu/32/4549_2.png) [@luisgcu](https://discourse.nodered.org/u/luisgcu)\
**Post date:** [13 October 2023 22:48 UTC](https://discourse.nodered.org/t/dashboard-iframe-refused-to-display-in-webpage-an-iframe-because-it-set-x-frame-options-to-same-origin/82013/4 "2023-10-13T22:48:30Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/2/3222dc2a954eb343251ebb880d12794273807d4a.png)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [14 October 2023 05:51 UTC](https://discourse.nodered.org/t/dashboard-iframe-refused-to-display-in-webpage-an-iframe-because-it-set-x-frame-options-to-same-origin/82013/5 "2023-10-14T05:51:19Z")

</div>

> [@TotallyInformation](#):
>
> use a proxy server in front of things so that everything appears as the same origin

@luisgcu,  
I think you can my also try my [node-red-contrib-http-proxy](https://flows.nodered.org/node/node-red-contrib-http-proxy) node for this use case.  
Bart

---

<div class="post-metadata">

**Author:** ![luisgcu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/luisgcu/32/4549_2.png) [@luisgcu](https://discourse.nodered.org/u/luisgcu)\
**Post date:** [15 October 2023 20:16 UTC](https://discourse.nodered.org/t/dashboard-iframe-refused-to-display-in-webpage-an-iframe-because-it-set-x-frame-options-to-same-origin/82013/6 "2023-10-15T20:16:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [15 October 2023 21:40 UTC](https://discourse.nodered.org/t/dashboard-iframe-refused-to-display-in-webpage-an-iframe-because-it-set-x-frame-options-to-same-origin/82013/7 "2023-10-15T21:40:04Z")

</div>

To summarize: you navigate to your Node-RED dashboard via ´[https://your-hostname/dashboard´](https://your-hostname/dashboard%C2%B4) which returns a bunch of stuff (html, css, ...) to your browser. However there is also an iframe included, that refers to ´[https://another-hostname´](https://xn--another-hostname-zza). 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´](https://your-hostname/other-path%C2%B4). 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...

---

<div class="post-metadata">

**Author:** ![luisgcu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/luisgcu/32/4549_2.png) [@luisgcu](https://discourse.nodered.org/u/luisgcu)\
**Post date:** [16 October 2023 14:33 UTC](https://discourse.nodered.org/t/dashboard-iframe-refused-to-display-in-webpage-an-iframe-because-it-set-x-frame-options-to-same-origin/82013/8 "2023-10-16T14:33:19Z")

</div>

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/](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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/a/dab22d0aade15a5d0024a3c014323b41750af7b6.png)

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/9/798fe16fa84f7b94b460ba6bcbeadc86cf03d473.png)  
After entering my User and password I get this:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/1/81105a33c8160b793e61d5b470cf0ecd986c408f.png)  
I am not sure what I am missing in the http proxy node configuration?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/6/864098eec3b6efee5005b0c08d0c9ecf0d57988f.png)  
I can access to [https://f600.anotherdomain.com:3330/](https://f600.anotherdomain.com:3330/)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/b/1b8d1124a6cb7ca4464f10ef4313d169ac618eea.png)  
after entering the password  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/0/80b7f9d8ea5633ddae97b6531990c5991566bc75.png)

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/0/80b7f9d8ea5633ddae97b6531990c5991566bc75.png)  
I will appreciate any further advice.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [16 October 2023 20:53 UTC](https://discourse.nodered.org/t/dashboard-iframe-refused-to-display-in-webpage-an-iframe-because-it-set-x-frame-options-to-same-origin/82013/9 "2023-10-16T20:53:12Z")

</div>

> [@luisgcu](#):
>
> when doing that i get this. Prompt to enter i think is my NR dashboard user and password

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...

> [@luisgcu](#):
>
> after entering the password

So your site is also password protected. Then I assume you need to enter your [authentication credentials](https://github.com/bartbutenaers/node-red-contrib-http-proxy#add-authentication-credentials) in my node. Of course it will only work when your site supports this way of working...

---

<div class="post-metadata">

**Author:** ![luisgcu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/luisgcu/32/4549_2.png) [@luisgcu](https://discourse.nodered.org/u/luisgcu)\
**Post date:** [16 October 2023 20:59 UTC](https://discourse.nodered.org/t/dashboard-iframe-refused-to-display-in-webpage-an-iframe-because-it-set-x-frame-options-to-same-origin/82013/10 "2023-10-16T20:59:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [15 December 2023 21:00 UTC](https://discourse.nodered.org/t/dashboard-iframe-refused-to-display-in-webpage-an-iframe-because-it-set-x-frame-options-to-same-origin/82013/11 "2023-12-15T21:00:52Z")

</div>

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