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?
So this would give you the same protocol link:
I came across this problem a few days ago. My entire application was using HTTPS and my issue was only profile pictures being loaded over HTTP... My quick and dirty fix was to manually replace all the profile pictures' domain names. For example,
You'll have to check and see what URL your profile pictures have. I'd assume they are not coming from exactly the same place. View the URL of your own profile picture and substitute for what I have at
https://fbcdn-profile-a.akamaihd.net
.After looking harder at the Facebook documentation:
I found an additional parameter called
return_ssl_resources
, and when passed withtrue
, it returns profile pictures using HTTPS.It worked like a charm, and I stopped getting the mixed security warnings. I hope this helps!
Adding to Ralph Holzmann and Simon Bächler, the following is an even harder-hitting fix for when FB._https alone does not do the trick;
See also FB.Arbiter.inform() { ... FB.getDomain((d?'https_':'')+'staticfb',true) ... } where d=window!=window.parent&&... as of 2012-Feb-10.
On a sidenote, if you have doc-type declarations on your HTML page like the folllowing, the reference to "http://www.w3.org" can also bring up the content warning error in Internet Explorer.
This seems to be caused by this Facebook bug.
Also see this forum post.
That bug was marked as resolved on 3/16, but I am still observing non-https requests to canvas_proxy.php. Hopefully this will be fixed for real soon...
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.