Cross-origin frame issue when printing in Chrome

Installation & Configuration
1

Hi there,

I set up Collabora with our own WOPI implementation, everything works, great, except for printing. When I press the print button I get an error in the JS console of the browser:

Uncaught DOMException: Blocked a frame with origin "https://collabora.XXXX" from accessing a cross-origin frame.
    at NewClass._onIframeLoaded (https://collabora.XXXX/browser/ce39a9d/bundle.js:1:1928895)

I also tried setting up Collabora on the same sub-domain, it was a pain, but it didn’t change anything. Looking at the code , CODE is creating an iframe with no src attribute, and then changing src to the Blob object URL (fine). But the error happens when print() is called, on this line:

this._printIframe.contentWindow.print();

Not sure how I can fix this? I couldn’t find anything in Github issues.

This happens in Chrome, with Firefox printing seems to work correctly.

Thanks to anyone who could help :slight_smile:

2

Same issue here, only with Chrome; Firefox works like a charm.

3

Hi, do you have frame-src 'self' blob: in the CSP?

4

Not usually, but I tried, and it doesn’t change. Just for being sure, I tried again, and checked in the network console to see if the headers were correctly set. With the CSP policy you supplied set in the parent frame, I have the same issue :frowning:

5

What is the CSP in your case?

6

Ah! It wasn’t a CSP issue at all, it was because we used the sandbox attribute on the Collabora iframe. Removing it fixed the issue, as even allowing all sandbox options didn’t fix it. Not the best for security, but at least it works.

Thanks for your help!

7

This error “Blocked a frame with origin from accessing a cross-origin frame” is not a bug. The same-origin policy is a security mechanism that ensures that window objects only have access to the informations they are authorized to get. To fix this issue, ensure that both the parent page and the iframe content are served from the same domain or implement Cross-Origin Communication techniques such as postMessage to safely communicate and exchange data between the two frames.

The window.postMessage() method provides a controlled mechanism to securely circumvent this Same-Origin Policy restriction. The window.postMessage() safely enables cross-origin communication between Window objects; e.g: between a page and an iframe embedded within it.

postMessage(message, targetOrigin)
postMessage(message, targetOrigin, [transfer])

targetOrigin - specifies what the origin of targetWindow must be for the event to be dispatched, either as the literal string “*” (indicating no preference) or as a URI.

If you don’t have control over the content in the iframe, you won’t be able to directly access its elements due to security restrictions.

8

Just to tell that the issue was actually in the iframe HTML tag, which I copied from the OnlyOffice doc, but does not work with Collabora. It had sandbox and allow attributes.

Deleting those attributes made everything working.

Thanks for your help!

1 Like