Facebook Connect Via SSL

From Facebook Developer Wiki

Jump to: navigation, search

Most browsers report warnings if you load an HTTPS page that contains references to HTTP content. Internet Explorer screams particularly loud. To avoid these warnings, you can load the HTTPS version of Facebook Connect on your HTTPS pages.

Contents

Including Facebook Connect on Your HTTPS Pages

If you have a page you serve off of HTTPS (that is, using SSL), and you want to use Facebook Connect on that page, then you can do so. Simply modify the location that you pull FeatureLoader from, and it should all work fine.

Over HTTP you would normally include this file:

<!-- instead of this ... --> <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>


Instead, include this file:

<!-- use this! --> <script type="text/javascript" src="https://ssl.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>


Modifying Your xd_receiver File

You also need to tweak your xd_receiver to pull from a secure location. Create a new file called xd_receiver_ssl.htm with the following content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <body> <!--- this is a secure xd_receiver, since it loads from https:// --> <script src="https://ssl.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script> </body> </html>


Then when you call FB.init, refer to your secure xd_receiver file:

FB.init(API_KEY, 'xd_receiver_ssl.htm')


You can also be clever and make the xd_receiver change links depending on whether the request came in via SSL or not. In that case you'd only need one xd_receiver endpoint.

Querying Images with HTTPS Protocol

If you show user profile pictures on your site, then you'll need to make sure that you are showing them in HTTPS on pages that are also served from HTTPS.

The easy way to do this is to use the fb:profile-pic tag from XFBML. That will make sure that you are serving resources in the correct version.

However, some developers choose to fetch profile pictures themselves. For example, you might execute this FQL:

SELECT uid, pic_with_logo FROM user WHERE uid = %d


You should add the argument "return_ssl_resources=true" to the base API request. This parameter goes at the same level as method, session_key, and so forth, so it's not an argument to the method but instead a core part of the API.

About SSL and Login Credentials

Please note that Facebook ALWAYS sends user login credentials over the wire in SSL, regardless of which include you use. The protocol for the include is simply for loading the static resources, which don't contain secure data. The only reason you would need to do the above is because your site already uses SSL, and you want to avoid mixed content warnings.

What's Going On?

SSL is tricky business. When you load a page via the HTTPS protocol, browsers expect ALL files on that page to also load securely. That includes all images, JavaScript files, CSS files, and any iframes that are opened. If your site is served via HTTPS, but you refer to the regular http version of the Connect files, then you may see a mixed content warning. Because Firefox hides the error after the first time, you may not see it, but any visitor using Internet Explorer probably will.

Facebook Connect relies on JavaScript and CSS files, and iframes for communication with Facebook. All of these URLs must be served via HTTPS. Here are some of the URLs that Facebook needs to load:

When you load the SSL version of the site, the above files would be loaded via HTTPS instead. For instance:

Debugging HTTPS problems

These can be particularly gnarly to debug. I would recommend using an HTTP proxy like Fiddler or Charles. Be warned: when you use an HTTP proxy, you will get a bunch of warnings about invalid certificates. That's because SSL is designed to prevent a man-in-the-middle attack; when you use an HTTP proxy, you're executing a man-in-the-middle attack against yourself, and your browser correctly detects that something is up! No matter, just approve the warnings, and you can figure out what's going on.

If you continue to receive mixed content warnings even after following the above instructions and clearing your cache, then please post a message to the Developer Forum, or file a bug and we can look into it.

Retrieved from "http://wiki.developers.facebook.com/index.php/Facebook_Connect_Via_SSL"
reference