iFrame with Dashboard UI secured by http auth

Dashboard
1

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 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) as you can see in the code below :

   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
image1486×1151 67.8 KB

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?

2

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?

3

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?

4

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?