Cross Domain Recording

[nwgroup]

What happened?

Hi, when we use the API that creates an iframe. We got the error "Logger.js:155 2025-08-08T13:30:15.371Z [features/recording] Capture failed SecurityError: Failed to execute 'showSaveFilePicker' on 'Window': Cross origin sub frames aren't allowed to show a file picker. at Object.startLocalRecording LocalRecordingManager.web.ts:112:40)" and did a lot of changes in the origin server and de the destiny server, but it's the same. Finally, we thing that a change like this could work:

`async startLocalRecording(store, onlySelf) {
const { dispatch, getState } = store;
this.roomName = getRoomName(getState()) ?? '';

// Función para solicitar al padre la selección del archivo                                                                                                                               
const requestFileHandleFromParent = () => {                                                                                                                                               
    return new Promise((resolve, reject) => {                                                                                                                                             
        const messageHandler = event => {                                                                                                                                                 
            if (event.source === window.parent && event.data && event.data.type === 'fileHandleResponse') {                                                                               
                window.removeEventListener('message', messageHandler);                                                                                                                    
                if (event.data.fileHandle) {                                                                                                                                              
                    resolve(event.data.fileHandle);                                                                                                                                       
                } else {                                                                                                                                                                  
                    reject(new Error('No file handle received from parent'));                                                                                                             
                }                                                                                                                                                                         
            }                                                                                                                                                                             
        };                                                                                                                                                                                
        window.addEventListener('message', messageHandler);                                                                                                                               
        window.parent.postMessage({ type: 'requestFileHandle' }, '*');                                                                                                                    
    });                                                                                                                                                                                   
};                                                                                                                                                                                        
                                                                                                                                                                                          
// Obtener un handle al archivo donde escribir                                                                                                                                            
let options = {                                                                                                                                                                           
    startIn: 'downloads',                                                                                                                                                                 
    suggestedName: `${this.getFilename()}.webm`,                                                                                                                                          
};                                                                                                                                                                                        
                                                                                                                                                                                          
try {                                                                                                                                                                                     
    if (window.self !== window.top) {                                                                                                                                                     
        // Estamos en un iframe, solicitar al padre el fileHandle                                                                                                                         
        this.fileHandle = await requestFileHandleFromParent();                                                                                                                            
    } else {                                                                                                                                                                              
        // No estamos en iframe, usar showSaveFilePicker normalmente                                                                                                                      
        this.fileHandle = await window.showSaveFilePicker(options);                                                                                                                       
    }                                                                                                                                                                                     
                                                                                                                                                                                          
    this.writableStream = await this.fileHandle?.createWritable();                                                                                                                        
} catch (e) {                                                                                                                                                                             
    nwUtils.print('No se pudo obtener el handle del archivo:', e);                                                                                                                        
    throw e;                                                                                                                                                                              
}                                                                                                                                                                                         

` continue the function whitout changes. Thanks to start an open discussion about that.

https://github.com/jitsi/jitsi-meet/blob/master/react/features/recording/components/Recording/LocalRecordingManager.web.ts

Platform

• Chrome (or Chromium based)
• Firefox
• Safari
• Other desktop browser
• Android browser
• iOS browser
• Electron app
• Android mobile app
• iOS mobile app
• Custom app using a mobile SDK

Browser / app / sdk version

Google Chome Version 137.0.7151.119 (Official Build) (64-bit)

Relevant log output

Logger.js:155 2025-08-08T13:30:15.371Z [features/recording] Capture failed SecurityError: Failed to execute 'showSaveFilePicker' on 'Window': Cross origin sub frames aren't allowed to show a file picker.
    at Object.startLocalRecording (LocalRecordingManager.web.ts:112:40)
    at middleware.ts:79:35
    at middleware.ts:28:12
    at middleware.ts:155:12
    at middleware.ts:7:20
    at middleware.ts:55:20
    at middleware.ts:22:12
    at middleware.ts:66:12
    at middleware.ts:50:20
    at middleware.web.ts:35:12
    at middleware.web.ts:19:12
    at middleware.any.ts:52:20
    at middleware.ts:60:12
    at middleware.web.ts:273:22
    at middleware.ts:48:12
    at middleware.ts:21:12
    at middleware.ts:11:20
    at middleware.ts:18:12
    at middleware.web.ts:31:12
    at middleware.any.ts:39:20

Reproducibility

• The problem is reproducible on meet.jit.si

More details?

No response

[damencho]

This is not supported by the browsers and there is nothing we can do.

[nwgroup]

Hi, there are our comments:

Justification for Change:

The showSaveFilePicker API is restricted by browser security policies and cannot be invoked directly within cross-origin iframes due to the risk of malicious file system access. This limitation results in a SecurityError when attempting to open the file picker inside an iframe that does not share the same origin as the parent page.

Since our application architecture requires the use of an iframe (due to the JS API constraints), invoking showSaveFilePicker directly inside the iframe is not feasible. This security model is enforced by all major browsers to protect user data and prevent unauthorized file system access.

Proposed Solution:

To comply with these restrictions while maintaining functionality, we can implement a communication bridge between the iframe and its parent window using the postMessage API. The iframe will send a message to the parent requesting the file picker dialog. The parent window, which runs in the top-level browsing context and has the appropriate origin, will handle the showSaveFilePicker call and then send back the file handle or related information to the iframe.

This approach preserves security boundaries and leverages the browser's allowed capabilities, enabling the file picker functionality without violating cross-origin policies.

Implementation Notes:

• Modify the iframe code to send a postMessage request to the parent when file selection is needed.
• Implement a message listener in the parent window to handle the request, invoke showSaveFilePicker, and send the result back.
• Ensure proper origin checks and message validation to maintain security.
• Update the iframe code to receive the file handle and proceed with the recording logic.

This design pattern is a common and secure workaround for cross-origin iframe limitations and will allow us to maintain the required functionality without compromising security or user experience.

[damencho]

I don't think you can move FileSystemFileHandle object in a post message between page and the iframe.

[saghul]

Transferring file handles only seems to work on the same origin: https://issues.chromium.org/issues/41454230

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.