Immersive Editor refuses to connect in production

[joepavitt]

Current Behavior

Works fine in Staging environment: https://forge.flowfuse.dev/

Expected Behavior

No response

Steps To Reproduce

Navigate to any instance overview and change the /overview in the URL to /editor

Environment

• FlowFuse version:
• Node.js version:
• npm version:
• Platform/OS:
• Browser:

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[joepavitt]

Assigning to @cstns as the Immersive stuff is his domain, but I suspect this is more likely linked to how we've configured/setup app.flowfuse.com given it's working on staging

[cstns]

Seems to be working fine in prod

[joepavitt]

As discussed in Slack, this seems to be a Chrome vs. Firefox difference.

Both work fine with staging though

[cstns]

Can confirm, the issue is browser related
chromewebdata/:1 Refused to display 'https://app.flowfuse.com/' in a frame because it set 'X-Frame-Options' to 'deny'.

[cstns]

I narrowed it down to CSP difference between production & staging.

The staging environment is hosted on .flowfuse.dev and the editor is hosted on .flowfuse.dev
while
The production environment is hosted on .flowfuse.com and the editor is hosted on flowforge.cloud.

Both environments include the self CSP which is only covers the staging environment setup, the production environment would need additional frame ancestors headers configured in order for the editor to function inside an iframe.

I'm not sure why Firefox doesn't enforce these policies the same way Chrome or other Webkit based browsers do because they all seem to have support for it.

[knolleary]

The fix for this requires Node-RED to set Content-Security-Policy: frame-ancestors 'self' *.flowforge.cloud; (and to be suitably configurable for different domains).

I cannot see how to get Node-RED to set that header with the current settings/APIs it exposes - this may have to be a new thing we add in NR 4. Meaning the immersive editor will only work with that version.

In the immediate short term, we need to revert #3761 until we figure this out - as it stands, we cannot go live with the immersive editor.

[cstns]

I reverted the editor links that were pointing to the immersive editor until we can add CSP headers to the instances

[joepavitt]

I cannot see how to get Node-RED to set that header with the current settings/APIs it exposes - this may have to be a new thing we add in NR 4. Meaning the immersive editor will only work with that version.

#2246 (comment) is suggesting that we're okay with getting this to work with historical NR versions too?

[cstns]

Not quite. There's still a dependency on a specific nr-launcher version that will know how to address Node-RED page redirects and pass them to the parent in order to handle them so it won't crash the iframe and I assume there's also a dependency on a Node-RED version that allows injecting custom links in the logo header and other menus