Fix Collabora 400 error by properly URL-encoding WOPISrc parameter

- WOPISrc is a full URL that needs URL encoding when passed as query param
- Use Uri.encodeComponent() to properly encode the WOPISrc value
- Simplify iframe setup to just use the properly constructed URL
- This fixes the 400 Bad Request from Collabora when loading documents
This commit is contained in:
Leon Bösche
2026-01-12 09:50:41 +01:00
parent 181fb0af93
commit 69cf328972

View File

@@ -404,9 +404,10 @@ class _DocumentViewerModalState extends State<DocumentViewerModal> {
final wopiSession = snapshot.data!;
// Build Collabora Online viewer URL with WOPISrc
// Note: Don't double-encode the WOPISrc - Collabora expects the URL as-is
// The WOPISrc must be URL-encoded since it contains special characters (://, ?, =, &)
final encodedWopisrc = Uri.encodeComponent(wopiSession.wopisrc);
final collaboraUrl =
'https://of.b0esche.cloud/loleaflet/dist/loleaflet.html?WOPISrc=${wopiSession.wopisrc}';
'https://of.b0esche.cloud/loleaflet/dist/loleaflet.html?WOPISrc=$encodedWopisrc';
// Use WebView to display Collabora Online
return _buildWebView(collaboraUrl);
@@ -460,13 +461,9 @@ class _DocumentViewerModalState extends State<DocumentViewerModal> {
ui.platformViewRegistry.registerViewFactory(
viewType,
(int viewId) {
// Extract the WOPISrc value
final wopisrcValue = collaboraUrl.contains('WOPISrc=')
? Uri.decodeComponent(collaboraUrl.split('WOPISrc=')[1])
: '';
// Create the iframe
// Create the iframe with the properly encoded Collabora URL
final iframe = html.IFrameElement()
..src = collaboraUrl
..style.border = 'none'
..style.width = '100%'
..style.height = '100%'
@@ -476,17 +473,12 @@ class _DocumentViewerModalState extends State<DocumentViewerModal> {
'allow',
'microphone; camera; usb; autoplay; clipboard-read; clipboard-write',
)
// Remove allow-same-origin and add allow-popups-to-escape-sandbox for better security
// Remove allow-same-origin for security, add allow-popups-to-escape-sandbox
..setAttribute(
'sandbox',
'allow-scripts allow-popups allow-forms allow-pointer-lock allow-presentation allow-modals allow-downloads allow-popups-to-escape-sandbox',
);
// Build the full Collabora URL
final collaboraPath =
'https://of.b0esche.cloud/loleaflet/dist/loleaflet.html';
iframe.src = '$collaboraPath?WOPISrc=$wopisrcValue';
return iframe;
},
);