Infinite Stacking of OneDrive Picker iframes on Domain Y

Question

Infinite Stacking of OneDrive Picker iframes on Domain Y

Ivan 0

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>

Yanli Jiang - MSFT 31,566 Reputation points Microsoft External Staff

2024-12-12T05:43:43.6033333+00:00

What do you mean the "The application"? What is it?

Your answer

Yanli Jiang - MSFT 31,566 Reputation points Microsoft External Staff

2024-12-12T05:43:43.6033333+00:00

What do you mean the "The application"? What is it?

Share via

Infinite Stacking of OneDrive Picker iframes on Domain Y

Your answer