On a website, I am integrating an external 2-factor authentication solution called Duo Web using their PHP and Javascript. It works smoothly on all browsers except for IE8. When the user passes the initial login screen, the 2FA login page loads, but the iframe that should display the prompt is blank.
After researching some threads, it seems that the common fix for iframes in IE8 is to either remove relative positioning from the embedded page or apply it to the iframe. Since I don't have access to the page, I tried adding relative positioning to the frame but it had no effect. Interestingly, this issue only occurs during the first visit to the 2FA page.
If the page is reloaded, the iframe appears correctly with the code present. There is an option in Duo to automatically send a login request upon reaching the 2FA page. Even when the iframe is blank, enabling this option allows users to log in successfully through the Duo app.
It seems like the code is functioning properly, but the iframe remains empty. This anomaly only happens during the initial visit to the page. Subsequent visits show the iframe correctly until the browser is closed and reopened.
Unfortunately, I cannot provide the exact code due to work restrictions, but here is a simplified version:
<div id="iframe_container" style="text-align:center;width:100%;">
<iframe id="duo_iframe" frameborder="0">Loading...</iframe>
// additional forms for data processing
</div>
The CSS styling for the iframe is as follows:
#duo_iframe
{
width: 100%;
min-width: 304px;
max-width: 620px;
height: 330px;
background: transparent;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
}
Even though I am using compatibility mode, disabling it does not resolve the issue. Any suggestions or insights would be highly appreciated.