Tried embedding n8n using iframes but the the workflow page is not loading

Describe the issue/error/question

I have integrated n8n into my application by embedding n8n using iframe . The UI is loaded but after logging-in the workflow screen is not getting displayed.

Can anyone help?

Hey @AnjanaSAcroUser, I am sorry to hear you’re having trouble.

I gave this a quick go using the below HTML and didn’t have any problems displaying n8n in a browser:

HTML
<!DOCTYPE html>
<html>
<body>
    <h1>n8n</h1>
    <iframe src="http://localhost:5678/" style="height:600px;width:100%;"></iframe>
</body>
</html>

Which response exactly are you seeing in your browser dev tools for the failed requests?

Hii ,
The response from n8n apis is giving me errors. login api is working but the rest of the apis after login is giving me errors

Hm, I am afraid I can’t reproduce this. Can you confirm if the session cookies are being sent in these these requests for you? And do you login inside the iframe using n8n’s user management or are you using basic auth? Also, which version of n8n are you running?

Hey @AnjanaSAcroUser,

Are you running your website and n8n on the same computer you are accessing it from or is there a container or another machine involved?

Basically I am getting the cookies from n8n login api and inside iframe I am using n8n user management only . I am running a 1 month old version of n8n. I am using that code for development of custom nodes.

this is the error in my console

Yeah I am running both of them on the same computer . The Ui from where I have used iframes is basically deployed as a docker container.

If you open localhost:5678 does everything work as expected there?

1 Like

yeah If I open localhost:5678 its working but with iframe it is not.

And cookie in the request header of active api is not present here .

Hi, are you loading n8n across different domains? Because this is standard browser security issue when working with iframes and cross-domain cookies… Browsers do this to prevent security attacks using iframes like clickjacking. You might be able to get around this by setting SameSite property on the n8n-auth cookie to None.
You can find more info here web applications - Cross-Domain Cookies - Stack Overflow

2 Likes