Issue: Infinite Stacking of OneDrive Picker iframes on Domain Y #87

TodorToshev · 2025-02-05T08:25:54Z

Description
When using the OneDrive file picker in a web application that supports two domains and multiple subdomains for each of the two, an issue occurs where iframe instances stack infinitely on domain Y, but work correctly on domain X. Both domains share the same codebase and are properly configured in Azure with the correct redirect URIs.

On domain Y, every time OneDrive.open() is called, a new iframe is created, leading to an infinite loop of iframe creation.

Uses oneDrive.js v8. No JS errors in the console, no CSP violations. The issue started happening recently, without any changes to the code or Azure configuration. Prior to that, the file picker worked fine on both domains.

Expected Behavior
When calling OneDrive.open(), it should open a single instance of the picker and allow interaction without stacking additional iframes.
Closing or canceling the picker should not trigger infinite iframe creation.

Observed Behavior (Bug on Domain Y)
Every time OneDrive.open() is called, a new iframe is generated.
The previous iframe remains visible.
The picker never reaches the success or error callback because it keeps restarting.
This behavior does not occur on domain X.

Code Samples
JavaScript Function for Opening OneDrive Picker
This function initializes the OneDrive picker inside an iframe.

	const src = `https://${domain}/onedrive/onedrive-new.html?companyName=${companyName}&domainName=${domainName}`;

	function open(params) {
		const existingIframe = document.querySelector('iframe[id^="onedrive-container-"]');

		if (existingIframe) {
			existingIframe.src = 'about:blank';
			existingIframe.remove();
		}

		const iframe = document.createElement('iframe');

		iframe.id = `onedrive-container-${params.uid}`;
		iframe.className = 'hidden';
		document.body.appendChild(iframe);
		iframe.src = `${src}&id=${params.uid}`;

                // For the OneDrive select callback
		window.addEventListener('message', processPostMessage, false);
	}

OneDrive Picker iframe (HTML)
This is the content loaded inside the iframe. The file is stored on a separate server, so that the request to open OneDrive is performed from one of two domains, configured in Azure, eliminating the need to specify multiple subdomains.

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="oneDrive.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            const urlParams = new URLSearchParams(window.location.search);
            const companyName = urlParams.get('companyName');
            const domainName = urlParams.get('domainName');
            const uid = urlParams.get('id');

            function openOneDrive() {
                OneDrive.open({
                        clientId: "xxx",
                        action: "share",
                        multiSelect: false,
                        openInNewWindow: true,
                        advanced: {
                            sourceTypes: ["OneDrive"],
                            navigation: { disable: true }
                        },
                        success: function(files) {
                            top.postMessage(JSON.stringify({
                                files,
                                uid
                            }), 'https://'+ companyName +'.'+ domainName);
                        },
                        cancel: function() { },
                        error: function(e) {
                            if (e.errorCode && e.errorCode === 'popupOpen') {
                                alert('Popups are currently blocked by your browser. Please enable popups for this site in your browser settings and try again.');
                            } else {
                                alert(JSON.stringify(e));
                            }
                        }
                });
            }

            setTimeout(() => {
                openOneDrive();
            }, 1000);
        </script>
    </body>
</html>

The text was updated successfully, but these errors were encountered:

TodorToshev added the status: investigate label Feb 5, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue: Infinite Stacking of OneDrive Picker iframes on Domain Y #87

Issue: Infinite Stacking of OneDrive Picker iframes on Domain Y #87

TodorToshev commented Feb 5, 2025 •

edited

Loading

Issue: Infinite Stacking of OneDrive Picker iframes on Domain Y #87

Issue: Infinite Stacking of OneDrive Picker iframes on Domain Y #87

Comments

TodorToshev commented Feb 5, 2025 • edited Loading

TodorToshev commented Feb 5, 2025 •

edited

Loading