Cross-origin frame problems

[gstlouis]

I have CODE setup on https://docs.domain.ca which I have a custom web app pointing to this with the code setup working and have an iframe that shows the documents.

So everything is working, and I can open and save documents which save automatically.

Where things start failing is with cross-origin issues. When I open a doc, in the console immediately I get

Blocked autofocusing on a <div> element in a cross-origin subframe.

Then I fiddled with trying to print (I think it tries to open another window), it fails and I get these errors:

Refused to frame '' because it violates the following Content Security Policy directive: "frame-src 'self' https://rating.collaboraonline.com https://rating.collaboraonline.com blob:".

bundle.js:22209 Uncaught SecurityError: Failed to read a named property 'print' from 'Window': Blocked a frame with origin "https://docs.domain.ca" from accessing a cross-origin frame.
    at NewClass._onIframeLoaded (bundle.js:22209:73)

In apache2 I have tried playing with the following

From my custom app which is just domain.ca, I have this in apache which is where CODE is

 Header set Content-Security-Policy: "frame-ancestors https://docs.domain.ca https://docs.domain.ca:9980 "
 Header set Content-Security-Policy: "frame-src https://docs.domain.ca https://docs.domain.ca:9980 blob:;"

I even tried vise versa, and went into my docs.domain.ca in apache to add

 Header set Content-Security-Policy: "frame-ancestors https://domain.ca https://domain.ca:9980 "
 Header set Content-Security-Policy: "frame-src https://domain.ca https://domain.ca:9980 blob:;"

I also tried with these host to just allow it all. But nothing is working so I must be doing something wrong
Header set Access-Control-Allow-Origin "*"

What am I doing wrong to allow my domain.ca to accept cross-origin?

[darshan]

hii @gstlouis Welcome to collabora online forums.

Adjust Collabora Online Configuration

To allow embedding and communication across frames, make sure you have set the appropriate alias_groups settings in your CODE’s coolwsd.xml:

xml

Copy code

<net>
    <frame_ancestors allow="https://domain.ca https://docs.domain.ca"/>
    <allowedHosts>*</allowedHosts>
</net>

This will help ensure that the CODE server allows requests from your app’s domain.

i found a thread which has the similar thing, please refer to this solution once

Unable to restrict allowed WOPI hosts

I think I figured it out. Setting the loglevel to “information” reveals the behavior. As expected, when “mode” is set to “first”, then the first host that connects will be added to the list of trusted WOPI hosts. The log message will be: Adding trusted WOPI host: [hostname] Interestingly, the behavior is the same when setting “mode” to “groups” but not defining any groups or only empty groups. Now onto why I could not lock out my own Nextcloud with the setting in my original post: The loca…

Thanks,
Darshan

[gstlouis]

@darshan
Thank you for your comments.

I do have my alias_groups setup properly with groups because all domains can access CODE.

In my coolwsd.xml I can see I have which holds a lot of information within this frame. I have added like the following

      <content_security_policy desc="Customize the CSP header by specifying one or more policy-directive, separated by semicolons. See w3.org/TR/CSP2"></content_security_policy>
      <frame_ancestors allow="https://domain.ca https://docs.domain.ca" desc="OBSOLETE: Use content_security_policy. Specify who is allowed to embed the Collabora Online iframe (coolwsd and WOPI host are always allowed). Separate multiple hosts by space."></frame_ancestors>
        <allowedHosts>*</allowedHosts>
      <connection_timeout_secs desc="Specifies the connection, send, recv timeout in seconds for connections initiated by coolwsd (such as WOPI connections)." type="int" default="30"></connection_timeout_secs>

The above domain.ca is the target custom APP, and the docs.domain.ca is where CODe lives.

restart coolwsd and it did not work I still have the same errors in console.

I can see in frame_ancestors meta tag desc says OBSELETE. I know this should not cause any issues but I can’t find any information how to use content_security_policy instead.

open to any other ideas.
Thank you

[darshan]

The frame_ancestors tag being marked as obsolete in the coolwsd.xml configuration file indicates that you should now use the content_security_policy (CSP) directive instead, which provides more granular control over security policies for content embedding. Since you’re still encountering issues even after modifying your configuration, let’s focus on implementing a correct content_security_policy.

Possible solution:

1. Remove the frame_ancestors Setting
   Since frame_ancestors is obsolete, and you’re instructed to use content_security_policy, you can safely remove or comment out the <frame_ancestors> tag from the coolwsd.xml. The relevant portion should now look like this:

   <content_security_policy desc="Customize the CSP header by specifying one or more policy-directive, separated by semicolons. See w3.org/TR/CSP2">
       default-src 'self'; frame-src 'self' https://docs.domain.ca https://domain.ca blob:; frame-ancestors https://domain.ca https://docs.domain.ca;
   </content_security_policy>
   

2. Customizing content_security_policy
   The content_security_policy tag accepts a string in CSP format. Here’s an example that should allow your custom app (running on domain.ca) to embed documents from your CODE instance (docs.domain.ca), and allow operations like file access via blobs, printing, and others:

   <content_security_policy>
       default-src 'self'; 
       frame-src 'self' https://docs.domain.ca https://domain.ca blob:; 
       script-src 'self' 'unsafe-inline'; 
       img-src 'self' data:; 
       style-src 'self' 'unsafe-inline'; 
       connect-src 'self' https://docs.domain.ca;
       frame-ancestors https://domain.ca https://docs.domain.ca;
   </content_security_policy>
   

3. Ensure Correct Server Headers (Apache/Nginx)
   You mentioned configuring CSP headers on the Apache side, but you should ensure that the headers set by Apache do not conflict with the content_security_policy in coolwsd.xml. Either remove them from Apache or set them only for specific routes to avoid overriding the CSP set by Collabora. You can add the CSP in Apache like this:

   Header always set Content-Security-Policy "default-src 'self'; frame-src 'self' https://docs.domain.ca https://domain.ca blob:; frame-ancestors https://domain.ca https://docs.domain.ca;"
   

4. Restart the Services
   After applying these changes, restart both the coolwsd service and your web server (Apache or Nginx) to apply the updated configuration:

   sudo systemctl restart coolwsd
   sudo systemctl restart apache2  # Or nginx if you use Nginx
   

5. Check Browser Dev Tools Again
   After restarting, check your browser’s developer tools for any CSP-related errors. The headers should now reflect your changes, and the cross-origin errors related to iframe embedding or autofocusing should no longer appear.

If Issues Persist

If after implementing this, you still see errors related to printing or iframe access:

• Ensure there are no sandbox attributes or policies applied to the iframe from your web app’s side.
• Verify that no other Apache/Nginx reverse proxy settings are interfering with the requests.
• Try to load the Collabora iframe directly and check if CSP issues arise only when embedded via your app or generally.

These steps should resolve the issue.

All the best ,
Darshan