Issue: Infinite Stacking of OneDrive Picker iframes on Domain Y #87
Description
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>