How to use an SSL Shell to validate non-secure Facebook iFrame Apps Print
September 20, 2011

 

UPDATE: This solution has been broken by recent updates from Facebook and is not possible to fix their break.

 

Facebook has decided to require SSL certificates (https://) for all iFrame Facebook Apps as of October 1st, 2011. This decision has been met with mixed reactions and even I'm conflicted with what I think about it. On one hand, I agree with it because having a secure connection over non-secure will certainly help the casual users that use Facebook and have no need to know what it even is. On the other hand, I don't like it because it then requires people who make Facebook Apps for clients like I do to have SSL Certificates for each client/app. That would be a VERY BIG hassle to deal with especially on websites that have absolutely zero need for SSL, like this site which doesn't collect anything from its visitors.

 

This tutorial will show you how to use a single SSL Certificate (you need at least one, that is unavoidable) to make as many Facebook Apps on as many Domains as you need to.

 

To be absolutely clear this is not the most elegant way to solve this issue but it does get the job done and that's what counts, right? :)

 

The basic concept of this solution is to provide Facebook with a URL that has and uses an SSL Certificate then to embed the non-ssl site inside of that URL. Essentially the non-SSL url will be wrapped inside of a shell that has SSL. (Unfortunately this could also be used for nefarious reasons so you need to be aware that Facebook may realize this at some point and try to implement something to stop this from working.)

 

This tutorial assumes you already know how to make a Facebook App and that you already know how to remove the scrollbars from your app. This tutorial will only explain how to create the SSL Shell for your non-secure Facebook Apps and to fix the scrollbar issue caused by the Shell.

 

The Problem:

Lets take my website (http://MichaelTunnell.com) for example. My site is a simple Resume/Portfolio site that doesn't have any need for SSL because it never collects any data from its visitors. So when trying to make a Facebook App for this site I ran into a problem with Facebook's SSL requirement. I don't have an SSL for this site nor need or want one for it. However, Facebook won't let me have an App for this site without an SSL Certificate.

 

The Solution:

Instead of providing Facebook with this site I built a Shell on a site I do have SSL on and gave Facebook that URL instead.

 

Download the Facebook App SSL Shell: (GPL)

Click Here for the file, facebook-app-ssl-shell.zip

(inside the zip are two files, HTML and PHP with variables for easy customization)

 

How to use the PHP version of the SSL Shell:

In the PHP version all of the options are stored as variables at the top of the page...simply edit each variable for use in your Facebook app.

$pagetitle        = "SSL Shell";
$urlshelled        = "http://example.com/facebook-app-liberation";
$metakeywords    = "example, example2, example3";
$metadescrip    = "some description here";
$iframeheight    = "1050px";
$fbappid        = "YOUR-APP-ID";

 

 

How to use the HTML version of the SSL Shell:

You will need to edit a few different pieces of the code to use the shell and no you don't have to edit the page title or the meta data but I would suggest doing so just because it is good practice. :)

 

First we need to set the height of the iFrame in order to display the content without scrollbars.

html, body, iframe { margin:0; padding:0; height:1050px; }

 

Next we need to change the URL in the src attribute of the iFrame tag.

<iframe src='http://example.com/facebook-app-liberation' scrolling='no' frameborder='no' border='0'></iframe>

 

Finally we need to insert the appId of your Facebook App which can be found on the Edit App (Settings) page for your particular app.

appId : 'YOUR-APP-ID-HERE',

 

The last thing we need to do is add the SSL Shell as the Secure Page Tab URL on Facebook.com:

 

*Note - There is one drawback to using this SSL Shell in order to bypass the Facebook SSL restriction and that is the javascript that removes the scrollbars from the app no longer works with auto-sizing which is why the $iframeheight variable and corresponding CSS is used so we can resize the app manually and then remove the scrollbars.

 

blog comments powered by Disqus