Clarification on X-Frame-Options Impacting Iframe Height Calculation in WordPress Integration

[alienationfreez]

Dear KoboToolbox Community/Support,

I’m integrating a KoboToolbox form (URL: Enketo Express for KoboToolbox) into a WordPress site using a proxy page to bypass cross-origin restrictions. The setup involves:

• Proxy Page (ALIENATIONFREEZONE is under construction): Embeds the KoboToolbox form in an iframe (iframe class=“kobo-form” src=“Enketo Express for KoboToolbox”) and uses JavaScript to calculate and send the form’s height to the parent page via postMessage.

• Main Page (ALIENATIONFREEZONE is under construction): Embeds the proxy page in an iframe and receives the height to dynamically adjust the iframe’s size, aiming for a seamless display with a single page-level scrollbar.

The form displays correctly on the proxy page, and the main page’s iframe expands to a sufficient height. However, the iframe retains its own scrollbar, suggesting the JavaScript isn’t capturing the form’s full height. The JavaScript attempts to access iframe.contentDocument.body.scrollHeight but falls back to offsetHeight due to cross-origin restrictions, which may underestimate the height.

Questions:

1. Does KoboToolbox enforce X-Frame-Options (e.g., DENY or SAMEORIGIN) or other headers (e.g., Content Security Policy) that prevent JavaScript from accessing the iframe’s contentDocument to read scrollHeight?

2. If so, are there recommended workarounds to accurately retrieve the form’s height, such as:

• Configuring KoboToolbox to allow framing or contentDocument access for specific domains?

• Using a server-side proxy to serve the form and bypass cross-origin restrictions?

• Alternative methods to calculate dynamic form height (e.g., via KoboToolbox API or postMessage from the form)?

3. Are there known issues with KoboToolbox forms loading asynchronously in iframes, delaying height calculations, and how can we ensure JavaScript captures the full height after content loads?

Setup Details:

• WordPress with TheGem theme and Elementor.

• JavaScript: Uses MutationObserver, setInterval, and event listeners (DOMContentLoaded, load, resize) to send height; postMessage for cross-page communication.

• CSS: Ensures iframe and parent containers have height: auto and overflow: hidden to remove the iframe scrollbar.

Any guidance on X-Frame-Options, cross-origin access, or height calculation would be greatly appreciated to achieve a single page-level scrollbar.

Thank you,

G

[kearwill]

You’re right — KoboToolbox uses X-Frame-Options: SAMEORIGIN, so JavaScript on your site can’t access the iframe content due to cross-origin restrictions.
Best workaround:
Use a server-side proxy to serve the form under your domain. That way, it becomes same-origin and your JS can accurately get the height.
Alternative:
If you can edit the form, inject a small script that sends postMessage with the form’s height to the parent iframe. That avoids needing access to contentDocument.
Let me know if you want code for either approach!

[alienationfreez]

Thanks so much for your response, @kearwill !
Yes please, I would love to try both methods, as any complications are likely to come up in this digital jungle !
Is this «small script injection» also possible on a KoBoToolbox free-plan ?