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: https://github.com/storyblok/field-plugin/blob/b39001ded1f7e76f883b272159ce402409c1ea4d/packages/field-plugin/src/createFieldPlugin/createFieldPlugin.ts#L51 https://github.com/storyblok/field-plugin/blob/b39001ded1f7e76f883b272159ce402409c1ea4d/packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/createPluginMessageListener.ts#L34

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 https://github.com/storyblok/field-plugin/pull/367

[Dawntraoz]

@eunjae-lee is your fix at this PR https://github.com/storyblok/field-plugin/pull/402, the solution to this issue?

[eunjae-lee]

@Dawntraoz yes!

Hi @oskarfranzen , if you upgrade @storyblok/field-plugin to the latest version, you can specify the origin like the below.

const targetOrigin = import.meta.env.DEV ? 'http://....' : undefined; // assign value for dev environment only, and `undefined` for the production.

useFieldPlugin({ targetOrigin: '...' })

Let us know how it goes :)

(Feel free to reopen if it didn't solve your problem)