field-plugin icon indicating copy to clipboard operation
field-plugin copied to clipboard

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

Open oskarfranzen opened this issue 9 months ago • 0 comments

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: Screenshot 2024-05-13 at 15 52 49

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: image

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

oskarfranzen avatar May 16 '24 09:05 oskarfranzen