iFrame Issue – Web Browsers Now Blocking Mixed Content
October 8, 2013 | By David Cutter | One Comment">One Comment
As all good Facebook marketers know, there is an iFrame issue that has reared its ugly head. Recently, in their infinite wisdom, all of the major browsers have started blocking “mixed security content” by default (which probably should have been the case all along). If you are wondering what exactly that means, let’s use a typical example from Facebook that illustrates what we at Heyo are calling “the iFrame issue.”
You log in to Facebook on a secure HTTPS connection, because Facebook has an SSL (secure socket layer) Certificate installed. This encrypts the connection between their web server and your web browser, allowing private information to be sent back and forth safely.
That sounds reasonable, right?
Sure, unless you are a small business that uses iFramed content within your fan page apps and don’t have an SSL Certificate on your web server. With these recent updates, unless the viewer explicitly gives the required permission, the unsecured content coming from the standard HTTP connection will not display, creating the iFrame issue. Instead, the viewer sees a white page where your web page used to load.
There are a few temporary solutions you can put in place, and one permanent one. Read on to check them out.
Permanent Solution:
- If you plan to continue using iFramed sites within Facebook apps, then the only real solution is to install an SSL on the web server. It’s a bit of a pain to do, but it’s where the internet is headed anyway. You can check out services like Comodo or RapidSSL that offer free or low cost SSL certificates.
This, of course, is not a huge help to consultants and agencies with a lot of client pages to manage, so we also came up with a few temporary solutions.
Temporary Solutions:
- Layer a text block or image behind the iFramed content that instructs the viewer to “display all content” within their browser. This way, the message would only show to viewers who would otherwise see a blank page. This is easily accomplished within Heyo by adding the image or text widget and sending that layer “to the back.”
- Visit the destination URL (whatever page you are trying to iFrame), grab a screen shot of the page, and add that as an image that links to the destination website. This will certainly take more time as there are more steps involved, but will also present the viewer with a better user experience that more closely reflects the (previously) working iFrame.
- Spend a few minutes and create a simple landing page that presells the visitor on whatever the goal of the tab/page is, and include a strong call-to-action that sends links to the desired page (use target=”_blank” so the link opens in a new brower tab or window).
I wish there was a permanent solution that didn’t require any additional effort on the part of the many businesses that have, until recently, enjoyed the speed and simplicity of iFraming in an existing website, but the fact of the matter is these changes have taken effect and will most likely never revert back to the good old days of displaying mixed content.