# iFrame with Dashboard UI secured by http auth

**URL:** <https://discourse.nodered.org/t/iframe-with-dashboard-ui-secured-by-http-auth/87459>\
**Category:** Dashboard\
**Created:** [24 April 2024 11:42 UTC](https://discourse.nodered.org/t/iframe-with-dashboard-ui-secured-by-http-auth/87459 "2024-04-24T11:42:44Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rene-marchioretto](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rene-marchioretto/32/90426_2.png) [@rene-marchioretto](https://discourse.nodered.org/u/rene-marchioretto)\
**Post date:** [24 April 2024 11:42 UTC](https://discourse.nodered.org/t/iframe-with-dashboard-ui-secured-by-http-auth/87459/1 "2024-04-24T11:42:44Z")

</div>

Hey guys, how are you?

I have a problem creating a project. The main idea is to use an iframe from the dashboard UI, but I need it to be secure and one of the methods I used was nodered's native httpAuth.

My problem is that I can't get past the login using the iframe. The only way I was able to use the iframe while still having httpAuth was by doing the auth like: user:password@host but i received a chrome error below:

test.html:1 Subresource requests whose URLs contain embedded credentials (e.g. `https://user:pass@host/`) are blocked. See [Chrome Platform Status](https://www.chromestatus.com/feature/5669008342777856) for more details.

I tried logging in using other methods, such as getting the nodered token and using it as a bearer in a request, but it didn't work.

The only thing I managed to do was make the iframe in the development part of nodered, as the api suggests ([Admin API Methods : Node-RED](http://nodered.org/docs/api/admin/methods/)) as you can see in the code below :

```auto
   function fetchProtectedResource(authToken) {
        const url = 'http://user:password@host';

        const iframeSrc = url + '?access_token=' + authToken
        console.log(iframeSrc)
        const iframe = document.createElement('iframe');
        iframe.src = iframeSrc;
        iframe.width = "800";
        iframe.height = "600";
        document.body.appendChild(iframe);
    }

```

as a result:

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

I tried passing the request as basic auth in the header, but it didn't work either.

Does anyone know a solution to this problem?

---

<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:** [24 April 2024 11:58 UTC](https://discourse.nodered.org/t/iframe-with-dashboard-ui-secured-by-http-auth/87459/2 "2024-04-24T11:58:41Z")

</div>

You cannot use `http://user:password@host` type logins, nobody accepts them as valid any more and quite rightly so, you are better off not having a login.

To be honest, I've never tried to embed an iframe that requires separate login - other than embedding a Grafana page. So not sure I can help.

I'm a little confused though. You appear to be wanting to embed a Dashboard page into some other page? If so, where is that other page and is it also in Node-RED or elsewhere?

---

<div class="post-metadata">

**Author:** ![rene-marchioretto](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rene-marchioretto/32/90426_2.png) [@rene-marchioretto](https://discourse.nodered.org/u/rene-marchioretto)\
**Post date:** [24 April 2024 12:09 UTC](https://discourse.nodered.org/t/iframe-with-dashboard-ui-secured-by-http-auth/87459/3 "2024-04-24T12:09:44Z")

</div>

Thanks for the reply,

I want to embed the nodered dashboard visualization in another project, but I wouldn't like to lose the nodered's native security.

Both of the projects are in the cloud but in different places, hence the need for the iframe.

I'm looking for a way to log into the UI dashboard by passing some type of parameter or token, there some place that i can look?

---

<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:** [24 April 2024 13:48 UTC](https://discourse.nodered.org/t/iframe-with-dashboard-ui-secured-by-http-auth/87459/4 "2024-04-24T13:48:45Z")

</div>

Can't help then I'm afraid, hopefully another forum member will be able to help.

Cross domain iframes are a difficult area. If it were me, I would try to use the data from the remote Node-RED rather than its dashboard. If needed, running Node-RED in the other environment as well and creating the dashboard locally then putting all web endpoints on that service behind a common proxy and letting the proxy do the authentication and authorisation (a more common model anyway for cloud delivery). But I realise that you might not have that much control over things?

---

<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:** [24 May 2024 13:49 UTC](https://discourse.nodered.org/t/iframe-with-dashboard-ui-secured-by-http-auth/87459/5 "2024-05-24T13:49:42Z")

</div>

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