Field plugins do not work on domains other than app.storyblok.com

[oskarfranzen]

Describe the bug
Running the visual editor from a domain that is not app.storyblok.com causes field plugins to load indefinitely. The origin used will always be set to app.storyblok.com if the plugin is not running in the sandbox. This causes message sent from the iframe to not get handled by the event listener. Using the same field plugin at app.storyblok.com works as intended.

To Reproduce
We are running a Next.JS site with Storyblok on three different environments. Production, Staging and development (localhost).
Since development runs on a http server we access the Visual Editor using "method 2" as detailed here:

We host the html file on localhost:1337/cms. To have parity in the other environment we have asked our content editors to also access the editor using https://production.com/cms and https://staging.com/cms.

As detailed in the description this causes the host production.com to not match the origin in the posted message:

field-plugin/packages/field-plugin/src/createFieldPlugin/createFieldPlugin.ts

Line 51 in b39001d

const origin =

field-plugin/packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/createPluginMessageListener.ts

Line 34 in b39001d

if (event.origin === origin) {

Since no events can be handled the plugin is not transitioning from the loaded state and won't be able to react to any other message

Expected behavior
Field plugins should work even when running the visual editor through the static editor.html file on domains that's not app.storyblok.com

Screenshots
Field plugin running but without being able to change the height or set the output:

Desktop (please complete the following information):

• OS: MacOS Version 14.3.1 (Build 23D60)
• Browser Arc [Chromium]
• Version 124.0.6367.207

Smartphone (please complete the following information):

• N/A

Additional context
I can see that some work regarding this has been done in PR #367