Integrate Collabora to a Web App

Hi guys,

I’m attempting to integrate Collabora into my web app. I already have Nextcloud with Collabora, and they are working well. However, I need to load a Collabora editor into my web app through an iframe. I’ve been following the available documentation from Nextcloud and Collabora, but I’ve made no progress.

Currently, I’m stuck on a CSP error. Although my Collabora is communicating with Nextcloud as its initial WOPI host, I need to load the Collabora editor in my web app’s iframe as well, which requires configuring it as another WOPI host. This leads me to configure Collabora’s coolwsd.xml to allow multiple hosts, but unfortunately, nothing is happening.

So, in a nutshell, I will have two WOPI hosts: Nextcloud, which is working fine, and my web app as the second WOPI host.

I would appreciate it if you could guide me in the right direction. Thanks in advance!

Hii @Nelszy and welcome to collabora online.

Sorry for the trouble you’re facing while integrating your web app with Collabora Online.

I am sure you have followed this topic about how to setup the multiple host configuration in collabora online.
https://sdk.collaboraonline.com/docs/installation/Configuration.html?#multihost-configuration

I’d love to help you integrate your web app with Collabora Online. Could you please share the log information or details about the errors you’re experiencing? Specifically, any CSP (Content Security Policy) error messages and relevant configuration details would be super helpful. This way, I can better understand the issue and assist you more effectively. Looking forward to resolving this with you!

Hi,

If by “CSP errors” you mean that you get an error in the iframe that is supposed to embed Collabora Online, you can set frame-ancestors CSP rules in the coolwsd.xml file.

There is content_security_policy inside net were you can specify policy directive for the CSP header. When developing I use the broad frame-ancestors *:*; (ie not something that should be set in production) but the actual value depends on your setup. And it should match the origin of both application: Next Cloud and the other one.

If you have any other integration problems don’t hesitate to let us now. I’m part of the pre-sales engineering team and out goal it to make sure our product is easy to integrate.

1 Like

Thanks, @darshan and @hub, for the immediate response. Yes, I have gone through the multihost configuration. Please find the screenshot below. I hope this helps. For now, I’m faithfully following the basic or minimal integration as recommended by the documentation.

image

Thanks @hub for pointing this out. This is a great point.

Will post here the log asap.