I have a Facebook application that uses the Facebook Connect.js.
I am running my application over HTTPS. All content on the site is delivered from https://
with the exception of some content that must be included within Facebook's Connect.js
The problem is that I get warning messages saying that there are non-secure items within the page.
I've checked what scripts are being loaded using Chrome's Developer Tools / Network tab to see what files are being loaded and from where.
The only one I can see that is being loaded over HTTP and not over HTTPS is a file called http://static.ak.facebook.com/connect/canvas_proxy.php
.
How can I force this file to use HTTPS?
Best Answer
TL;DR
set
FB._https
totrue
before callingFB.init
. Like so:Explanation
If you unminify the Facebook JavaScript SDK, you'll see that its basically an object literal with a bunch of properties. One of these properties is
_https
, which is a boolean. This property determines which set of URLs to use (stored inFB._domain
) when making API requests. It seems as though Facebook keeps two sets of URLs for each type of API request -- a secure URL and and non-secure URL -- then uses a switch function calledgetDomain()
to determine which to use when making requests.The reason the JavaScript SDK causes security warnings is due to the way the
FB._https
property is defined. This is how it's currently defined as of 2011-8-24:_https: (window.name.indexOf('_fb_https') > -1)
Apparently Facebook thinks that if the
window.name
property has_fb_https
in it, then it must be a secure app. This is obviously incorrect. The real test should be something similar to this:_https: window.location.protocol == "https:"
Unfortunately, the SDK is not open source or even well documented, so I can't submit a pull request for this change :P. In the short term,settingFB._https
totrue
manually before callingFB.init
should do the trick.