iframe mixed mode issues - Jamie Johnson
Jamie Johnson
July 20, 2016
Recently a colleague of mine received a call that some embedded videos using iframes were not showing up on a page. We were unable to duplicate the problem until he altered the protocol of the page to use https as the protocol instead of http (and it is worth noting that some video embeds require https). If both the iframes's src attribute value's protocol and the page's protocol matched, then it worked fine. If not, then the iframe content would not display. This is known as a mixed mode issue. The easiest fix is to go to the iframe's src attribute and use a protcol-agnostic URL such as //myserver.com instead of specifying https: or http:. However, most users won't know that mixed mode is an issue and won't know how to resolve it. Further, sometimes mixed mode iframe content still shows (depending on browser settings). So, I decided to write a script to detect this and if an iframe mixed mode error is detected, to alert the user and allow them to email for assistance using what I described in my October 29, 2015 entry "Email mailto: (e-mail mail to) Link with Carriage Returns." Further, I borrow some CSS from http://www.multipetros.gr/posts/728-blink-elements-border-the-css-way/ to highlight the problematic iframe element.
Consider this example:
Now, this iframe's src attribute value is http://beacondeacon.com. Click the button below to test and change the protocol (i.e., http: to https:) to see the error checking in action (that is, if you mix the modes). Click again and change it to protocol agnostic (// with no http: or https:) to see it resolve.
How to do it?
You need this stylesheet: http://tech.beacondeacon.com/iframe/blink.css.
You need this script: http://tech.beacondeacon.com/iframe/framecheck.js (Don't forget to put a real address in there for your customers!).
Finally, you need this code to call the function to check the iframe: <script>checkframes(your-iframe-object-here);</script> where your-iframe-object-here is something like document.getElementById('test'), which is used in the above example. Note: You will want to just make the call to run it automatically on page load and not use a button to call it as I have here.
Want it less intrusive?
If you don't like the alerts, etc., then you can simply change the iframe src attribute value to an error page without the alerts, email option and styles. Make sure the page is responsive so it fits well in varying iframe sizes.