b0esche/b0esche_cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Use data URL iframe with auto-submitting form for Collabora POST

Browse Source 
- Create iframe with data URL containing HTML page
- HTML page has form that auto-submits to loleaflet.html with WOPISrc in body
- This ensures POST request instead of GET
- Form submits within iframe context, not affected by parent page JavaScript
This commit is contained in:
Leon Bösche
2026-01-12 15:34:43 +01:00
parent 99419748bb
commit 0ee3b32ef3
1 changed files with 30 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
b0esche_cloud/lib/pages/document_viewer.dart
View File

@@ -450,21 +450,12 @@ class _DocumentViewerModalState extends State<DocumentViewerModal> {
Widget _buildCollaboraIframe(String wopisrc) {
// For Collabora Online, we need to POST the WOPISrc, not GET it
// Use JavaScript to create and submit the form properly
// Create an HTML page with auto-submitting form and set as iframe src
final String viewType = 'collabora-form-${DateTime.now().millisecondsSinceEpoch}';
ui.platformViewRegistry.registerViewFactory(viewType, (int viewId) {
// Create a container for the form and iframe
final container = html.DivElement()
..style.width = '100%'
..style.height = '100%'
..style.margin = '0'
..style.padding = '0'
..style.overflow = 'hidden';
// Create the iframe first
// Create the iframe
final iframe = html.IFrameElement()
..name = 'collabora-iframe-$viewId'
..style.border = 'none'
..style.width = '100%'
..style.height = '100%'
@@ -479,38 +470,36 @@ class _DocumentViewerModalState extends State<DocumentViewerModal> {
'allow-scripts allow-popups allow-forms allow-pointer-lock allow-presentation allow-modals allow-downloads allow-popups-to-escape-sandbox',
);
container.append(iframe);
// Use JavaScript to create and submit the form
// This is more reliable than Dart's form.submit()
final jsCode = '''
(function() {
var form = document.createElement('form');
form.method = 'POST';
form.action = 'https://of.b0esche.cloud/loleaflet/dist/loleaflet.html';
form.target = 'collabora-iframe-$viewId';
form.style.display = 'none';
var input = document.createElement('input');
input.type = 'hidden';
input.name = 'WOPISrc';
input.value = '$wopisrc';
form.appendChild(input);
document.body.appendChild(form);
// Submit the form
setTimeout(function() {
form.submit();
}, 50);
})();
// Create an HTML page with an auto-submitting form
final htmlContent = '''
<!DOCTYPE html>
<html>
<head>
<title>Loading...</title>
</head>
<body style="margin: 0; padding: 0;">
<form method="POST" action="https://of.b0esche.cloud/loleaflet/dist/loleaflet.html" style="display: none;">
<input type="hidden" name="WOPISrc" value="$wopisrc">
</form>
<script>
document.forms[0].submit();
</script>
</body>
</html>
''';
final script = html.ScriptElement()
..type = 'text/javascript'
..text = jsCode;
html.document.body!.append(script);
// Set iframe src to a data URL with the form
final dataUrl = 'data:text/html;charset=utf-8,${Uri.encodeComponent(htmlContent)}';
iframe.src = dataUrl;
// Create a container
final container = html.DivElement()
..style.width = '100%'
..style.height = '100%'
..style.margin = '0'
..style.padding = '0'
..style.overflow = 'hidden'
..append(iframe);
return container;
});