Most weird bug (or security feature?) with iFrames and native drag and drop

Most weird bug (or security feature?) with iFrames and native drag and drop

On my current project at work I had a crazy problem. For our client we developed a CMS with Vue and Nuxt containing a Live-Editing feature that loads the frontend of a website into an iFrame. Each page is built with components and I implemented a way to sort those components. This is how the component works:

Everything was tested locally and when we were happy with the results we deployed it on production. And it didn't work anymore. Here is what we saw:

The strange thing about this was that the exact same component was used in two different locations. First it was used in a sidebar, secondly in a modal. It worked perfectly in the sidebar but was broken in the modal.

I first guessed that I've passed wrong props or something like that. So I started my local machine, opened the modal and tried dragging and dropping some components. Everything worked without problems. Next I tried to make out some problems between local environment and production environment. With Nuxt I could reproduce the behaviour we saw on production when I just changed the NODE_ENV to production and run npm run build && npm run start.

I checked the properties, added console.logs, cleared cache, cleared .nuxt folder, reinstalled node_modules, updated packages.. and still couldn't make any difference. I was searching for hours. Until I found the solution and I couldn't believe something like this really exists.

Drag and drop doesn't work when you try to use it on an iFrame that embeds an external URL.

At least this was the case in Chrome 70+ and at the time of testing this I had Chrome 80 installed. It took me 3 hours to find out and it drove me crazy. It's confirmed by this issue here on Sortable.js.

Wait! What? Why didn't I see this in development? Our CMS includes an iFrame and this is pointed to localhost when you use it in development. So everything is fine when I run the dev server, because localhost is no external domain. If I know switch my NODE_ENV to production we are pointing this iFrame to another server where we are hosting the frontend. This happens on my local machine as well and I am now also pointing to an external URL, so the same error happens on my machine as it does on production.

If you are using Sortable.js you can simply add a forceFallback: true or in my case when using vuedraggable you have to add :force-fallback="true" to your Draggable component.

By quickly going through the source of Sortable.js I figured out that they are simply falling back from the native drag and drop interface, so if you require that you will probably have to do the same or wait for a bugfix in chrome. 🤷‍♂️

Marc Mintel

Marc Mintel

Marc Mintel is a self taught JavaScript and Frontend Developer with heavy focus on React and Vue.

View Comments
Next Post

How to become an open source contributor

Previous Post

TinaCMS: probably the best way to edit your Gatsby site in 2020

Success! Your membership now is active.