Fix: Update Collabora proxy to load editor in iframe with WOPISrc in query string

This commit is contained in:
Leon Bösche
2026-01-12 16:58:39 +01:00
parent 5fb08d8831
commit 509983b4ff

View File

@@ -5,6 +5,7 @@ import (
"fmt"
"io"
"net/http"
"net/url"
"strings"
"sync"
"time"
@@ -663,47 +664,51 @@ func collaboraProxyHandler(w http.ResponseWriter, r *http.Request, db *database.
// Build WOPISrc URL
wopiSrc := fmt.Sprintf("https://go.b0esche.cloud/wopi/files/%s?access_token=%s", fileID, accessToken)
// Return HTML page with auto-submitting form
// Collabora requires: POST to /loleaflet/dist/loleaflet.html with WOPISrc in request body
// Build Collabora editor URL with WOPISrc in query string
editorURL := fmt.Sprintf("%s/loleaflet/dist/loleaflet.html?WOPISrc=%s&closebutton=1", collaboraURL, url.QueryEscape(wopiSrc))
// Return HTML page that loads Collabora in an iframe
htmlContent := fmt.Sprintf(`<!DOCTYPE html>
<html>
<head>
<title>Loading Document...</title>
<meta charset="utf-8">
<style>
body { margin: 0; padding: 0; background: #f5f5f5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.container { display: flex; justify-content: center; align-items: center; height: 100vh; }
.message { color: #666; font-size: 16px; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%%; height: 100%%; overflow: hidden; }
#collabora-container { width: 100%%; height: 100%%; background: #f5f5f5; }
#collabora-frame { width: 100%%; height: 100%%; border: none; }
.loading { position: absolute; top: 50%%; left: 50%%; transform: translate(-50%%, -50%%); text-align: center; }
.loading p { color: #666; margin-top: 10px; }
</style>
</head>
<body>
<div class="container">
<div class="message">Loading document in Collabora Online...</div>
<div id="collabora-container">
<div class="loading">
<p>Loading Collabora Online...</p>
</div>
<iframe id="collabora-frame"></iframe>
</div>
<form method="POST" action="%s/loleaflet/dist/loleaflet.html" target="collabora-frame" id="collaboraForm" style="display: none;">
<input type="hidden" name="WOPISrc" value="%s">
</form>
<iframe name="collabora-frame" id="collabora-frame" style="width:100%%; height:100%%; border:none; position:fixed; top:0; left:0;"></iframe>
<script>
window.addEventListener('load', function() {
setTimeout(function() {
var form = document.getElementById('collaboraForm');
if (form) {
console.log('[COLLABORA] Form found, submitting...');
try {
form.submit();
console.log('[COLLABORA] Form submitted successfully');
} catch(e) {
console.error('[COLLABORA] Form submission failed:', e);
}
} else {
console.error('[COLLABORA] Form element not found!');
}
}, 100);
var frame = document.getElementById('collabora-frame');
var loading = document.querySelector('.loading');
if (frame) {
frame.onload = function() {
if (loading) loading.style.display = 'none';
};
frame.onerror = function() {
console.error('[COLLABORA] Frame load error');
};
console.log('[COLLABORA] Loading editor from:', '%s');
frame.src = '%s';
}
});
</script>
</body>
</html>`, collaboraURL, wopiSrc)
</html>`, editorURL, editorURL)
w.Header().Set("Content-Type", "text/html; charset=utf-8")
// Don't set X-Frame-Options - this endpoint is meant to be loaded in an iframe