Hi I’m using N8N selfhosted application which we need to integrate in my angular front end application using iframe without navigation to new tab or with the pop up modal expect to open inside the same application page within the iframe. but when I attempt to open the application through button click it will blocked at sign in page itself where I expected to land in the URL of the canvas link. but it is not happening even login cannot authenticated due to X-header issue. kindly provide me directions to resolve the issue.
Hey there
N8n blocks iframe embedding by default for security (X-Frame-Options / CSP), which is why login fails.
Try this
Allow your domain in headers via reverse proxy (Nginx/Traefik) to enable iframe.
proxy_hide_header X-Frame-Options;
add_header X-Frame-Options “ALLOW-FROM https://your-frontend-domain.com”;
Also Use API authentication and embed workflow data instead of the full UI and open n8n in a new tab or modal, as inline login won’t work.
Thank you @Nifemi_Emmanuel , I’m not using [Nginx/Traefix] then where to config my settings but i can able to add the headers inside N8N config within the batch script like this
REM IFRAME EMBEDDING SETTINGS - Add your Angular app domain
set “N8N_ALLOWED_CORS_ORIGINS=http://host:port”
set N8N_DISABLE_X_FRAME_OPTIONS=true
but i can struck within the sign in itself not able to redirect after sign in within my main application.
1 Like