Adding support for `embedded:*` task forms in webapps-neo using same-origin iframes while maintaining compatibility with existing BPMN processes.

Development
1

Hi everyone,

In webapps-neo, I needed support for task forms using the embedded:* formKey. I’m not sure if anyone is already working on this, so I thought I’d share the approach we implemented.

The main goal was to keep existing BPMN processes that reference embedded HTML forms compatible with webapps-neo, without injecting the form HTML directly into the Tasklist DOM.

Instead, embedded:* forms are loaded as standalone mini-applications in a same-origin iframe.

For example:

embedded:app:forms/feis_wf_faktury_prijate/faktura.html

is resolved to:

/forms/feis_wf_faktury_prijate/faktura.html

In our case, the HTML file is a Vite multi-page entry point that bootstraps a Preact form application. The form loads task variables and submits changes through the REST API. Communication with the parent Tasklist is kept minimal and goes through postMessage, e.g. to notify the Tasklist about task completion or to resize the iframe.

A few implementation details:

  • embedded:* forms are rendered in a same-origin iframe.

  • BPMN references a stable .html entry point rather than the .jsx implementation.

  • Vite generates the /forms/... structure as part of the production build.

  • In the production JAR, forms are served from META-INF/resources/webjars/operaton/forms/.

  • CSP remains strict by default, with configurable frame-ancestors 'self' support for /forms/**.

  • Messages from the iframe are validated by the parent using a same-origin check.

At this point it’s mostly a foundation / proof of concept. The current invoice form is essentially a variable editor; the next step would be implementing the actual domain-specific UI, validation, etc.

If there’s interest in supporting this in webapps-neo, I’d be happy to share the implementation or open a PR.

P.S. Sorry for any awkward English — I used AI to help translate this post from Czech.