Facebook JavaScript SDK via HTTPS, loading insecure items

Question

I have a Facebook app that uses Facebook Connect.js .

I am running the application on top of HTTPS. All content on the site comes with https:// , except for some content that must be included on Facebook Connect.js

The problem is that I get warning messages that the page has unprotected elements.

I checked which scripts are downloaded using Chrome from the Developer Tools / Network tab to find out which files are downloaded and from where.

The only one that I see that is downloaded via HTTP and not via HTTPS is a file called http://static.ak.facebook.com/connect/canvas_proxy.php .

How to make this file use HTTPS?

Answer 1

TL; DR

set FB._https to true before calling FB.init . For example:

 FB._https = true; FB.init({ /* your app id and stuff */ }); 

Explanation

If you split the SDK for Facebook, you will see that it is basically an object literal with a bunch of properties. One of these properties is _https , which is Boolean. This property determines which set of URLs to use (stored in FB._domain ) when executing API requests. Facebook seems to support two sets of URLs for each type of API request — a secure URL and an insecure URL, and then uses a toggle function called getDomain() to determine what to use when making requests.

The reason the JavaScript SDK triggers security warnings is due to the way the FB._https property is FB._https . Here is how it is currently determined as of 2011-8-24:

_https: (window.name.indexOf('_fb_https') > -1)

Facebook seems to think that if the window.name property has _fb_https , then this should be a safe application. This is obviously not true. A real test should look something like this:

_https: window.location.protocol == "https:"

Unfortunately, the SDK is not open source or even well documented, so I cannot send a transfer request for this change: P. In the short term, the installation FB._https to true manually before calling FB.init should do the trick.

Answer 2

So this will give you the same protocol link:

 FB._https = (window.location.protocol == "https:"); 

Answer 3

I ran into this problem a few days ago. My entire application used HTTPS, and my problem was only downloading profile images via HTTP ... My quick and dirty fix was to manually replace all profile domain names. For example,

 str_replace('http://profile.ak.fbcdn.net','https://fbcdn-profile-a.akamaihd.net',$user['pic_square']); 

You will need to check and see what URL your profile images have. I would suggest that they do not come from the same place. Browse the URL of your own profile picture and replace what I have with https://fbcdn-profile-a.akamaihd.net .

After a closer look at the Facebook documentation :

If you need an image that needs to be returned over a secure connection, you can set return_ssl_resources to 1: https://graph.facebook.com/4/picture?return_ssl_resources=1 .

I found an additional parameter called return_ssl_resources , and when passed with true , it returns profile images using HTTPS.

 $fql = "SELECT uid, name, pic_square FROM user WHERE uid=me()"; $param = array( 'method' => 'fql.query', 'query' => $fql, 'return_ssl_resources'=>1); $fbuser = $facebook->api($param); 

It worked like a charm, and I stopped getting mixed security warnings. Hope this helps!

Answer 4

Adding to Ralph Holtzman and Simon Bahler, this is an even more difficult decision when FB._https does not do this trick,

 FB._https = (window.location.protocol == "https:"); FB.init({ ... }); if (FB._https && window == window.parent) { if (FB._domain && FB._domain.staticfb && FB._domain.https_staticfb) FB._domain.staticfb = FB._domain.https_staticfb; } 

See also FB.Arbiter.inform () {... FB.getDomain ((d? 'Https _': '') + 'staticfb', true) ...} where d = window! = Window.parent & & ... from 2012 to February. 10.

Answer 5

It looks like FB._https as replaced by:

 FB._secure = (window.location.protocol == "https:"); 

Answer 6

This is apparently caused by this Facebook error .

Also see this forum .

This error was flagged as resolved 3/16, but I'm still observing non-https requests for canvas_proxy.php. Hope this gets fixed soon ...

Answer 7

In a side ad, if you have document type declarations on an HTML page, as in the following example, a link to " http://www.w3.org " can also cause a content warning error in Internet Explorer.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

Answer 8

I had a similar problem (fb comments do not work in protected mode). This solves it - just a link to the javascript file via https:

 <script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script> 

Or do not specify a scheme to work for both:

 <script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>