Node red inside iframe

When I tried to integrate node red server inside iframe it's giving only header and rest of the contents are grayed out.. any solution for this..?
And also to do the efficiency way of SSO integration from existing app to node red.
@ashish-y please help us out if you have found some solution already

Do you want the Editor or the Dashboard?

Do you also know that you can embed Node-RED into another node.js app?

Perhaps you can explain a bit more about what you want to achieve.

1 Like

Thanks for your reply @TotallyInformation :slight_smile:

@TotallyInformation @ashish-y
Basically I want to integrate stand alone node-red server which is running in sub1.domain.com to sub2.domain.com(react portal) using iFrame. Here I need to access Node-RED editor along with SSO.
but when I open in iFrame it is giving below UI not the complete UI.

Console has error:

In the iFrame i have already given the below property:
sandbox="allow-same-origin allow-scripts"

So want to know the better way to integrate inside IFrame and also efficient way of integrating SSO when i login from Parent portal(sub2.domain.com)

My current thought for SSO is below:
open: {node-red-server-url}/access_token=my_access_token within iFrame and will do token validation in the token block.

Is it the right approach and also how to integrate with iFrame??

So there are two separate questions here. One about SSO and one about exposing the Node-RED Editor as an iframe. You might want to move the SSO question to a different thread where it may get more responses.

In regard to the iframe question, I've not tried this so I don't directly know what issues you are getting.

The first place to start would be to check the browser console for any errors.

1 Like

@TotallyInformation
I have attached the browser console snap. The error says "local storage property from window: access is denied for this document".

But while trying I have given below option in iFrame along with enabled CORS option and tried x-frame-options in the node red server also
sandbox="allow-same-origin allow-scripts"

IFrame documentation over internet tells these 2 flags are enough to access local storage from parent window..

Don't know issue with the iFrame or Node-RED server

But which document is that for? The parent or the embedded Editor?

I'm no expert, but I wonder if you need to change the CORS settings in Node-RED's settings.js? Is it Node-RED that is objecting?

1 Like

Parent window has plain HTML with Iframe tag. But this error is from "red/red.min.js" of node-RED.

Tried with CORS setting also but no luck.

Sorry, beyond my knowledge now. Maybe @knolleary or @dceejay have more insight.

1 Like

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