HTML forms not working in Chrome - Sandboxed frame error blocking form submissions

Support Kolibri
1

I have HTML content with interactive educational activities that use HTML forms for multiple choice selections (see attached screenshots). The forms work perfectly in Safari but fail completely in Chrome with the following console error:

Blocked form submission to '' because the form's frame is sandboxed and the 'allow-forms' permission is not set.

The educational content includes activities where students need to select correct answers using radio buttons and submit forms, but Chrome’s sandboxing policy is preventing form submissions entirely.

Screenshots:

  • Image 1: Shows the activity interface in Chrome with console error
  • Image 2: Shows the same activity with one option selected (highlighted in green) in Safari. Working correctly.

image
image1400×861 124 KB

image
image1421×840 98.7 KB

Technical details

  • Kolibri version: 0.17.5
  • Operating system: macOS
  • Browser: Google Chrome (issue present) / Safari (works correctly)

Additional context:

  • The HTML content contains dynamic activities with form elements
  • Forms submit successfully in Safari
  • Chrome specifically blocks form submissions due to sandboxing restrictions
  • This affects the functionality of educational interactive content

Additional environment information:

  • Ubuntu server: Central Kolibri node serving schools with internet connectivity
  • Raspberry Pi nodes: Sync content from Ubuntu central server, then serve schools without internet access
  • Network architecture: Ubuntu acts as content distribution hub, Raspberry Pis provide offline access points

Impact scope: This sandboxing issue affects educational functionality across our entire network infrastructure - both internet-connected schools accessing the Ubuntu server and offline schools using Raspberry Pi nodes.

Specific request: Need a global sandboxing solution that works across both Ubuntu central server and Raspberry Pi offline nodes, as our interactive educational content with forms must function consistently regardless of whether students access via internet connection or offline sync.

Production configuration:

  • Ubuntu central server: Content hub for internet-enabled schools
  • Raspberry Pi nodes: Sync from Ubuntu server, serve offline schools
  • Students accessing via Chrome on client devices in both scenarios
  • Interactive HTML content with forms essential for educational workflow across all deployment types
2

Hi @Hans,

I am a little surprised that Safari is allowing this with the sandbox restrictions that we have by default. What functionality of a form are you using? The sandbox should only affect submission to a remote server, not validation logic.

If you have an example of the resource that we could look at that would be helpful also.

Kind Regards,
Richard

1 Like
4

SOLUTION

Problem:

Blocked form submission to '' because the form's frame is sandboxed and the 'allow-forms' permission is not set.

Quick Fix:
Change your form from this:

<form id="my-form">
  <button type="submit">Submit</button>
</form>
<script>
form.addEventListener('submit', function(e) {
  e.preventDefault(); // ❌ Too late
});
</script>

To this:

<form id="my-form" onsubmit="return false;">
  <button type="button">Submit</button>
</form>
<script>
button.addEventListener('click', function() {
  // ✅ Works perfectly
});
</script>

Key changes:

  1. Add onsubmit="return false;" to form
  2. Change type="submit" to type="button"
  3. Use click listeners instead of submit listeners

Why: Kolibri’s iframe sandbox blocks form submissions. This solution bypasses the restriction by preventing form submission entirely and handling everything through button clicks.

1 Like
5

Thanks @Hans! Glad you were able to resolve the issue!

1 Like