Skip to main content

Facebook JavaScript SDK over HTTPS loading non-secure items


I have a Facebook application that uses the Facebook Connect.js https://connect.facebook.net/en_US/all.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 Chromes 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?



Many thanks,



P.


Source: Tips4allCCNA FINAL EXAM

Comments

  1. TL;DR

    set FB._https to true before calling FB.init. Like so:

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


    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 in FB._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 called getDomain() 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, setting FB._https to true manually before calling FB.init should do the trick.

    ReplyDelete
  2. So this would give you the same protocol link:

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

    ReplyDelete
  3. 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..
    E.g. :

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

    You'll have to check and see what url your profile pictures have - I'd assume they are not comming from exactly the same place - view the url of your own profile picture and substitute for what i have https://fbcdn-profile-a.akamaihd.net

    After looking harder at the Facebook Documentation:


    If you need a picture to be returned over a secure connection, you can set the return_ssl_resources argument to 1: https://graph.facebook.com/rozen.lior/picture?return_ssl_resources=1.


    I found an additional parameter called
    return_ssl_resources - and when passed with with true returns profile pictures 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);

    Worked like a charm and I stopped getting the mixed security warnings.
    Hope this helps!

    ReplyDelete
  4. I wanted to post this as a comment as it is clearly not an answer but I am not allowed to (see this person's rant [http://goofygrin.wordpress.com/2011/02/01/why-stackoverflow-sucks-and-participating-there-is-impossible/]) so please do not penalize.

    UPDATE:
    It looks like this (at least my scenario) is a known issue and may have ironically been fixed last night after I posted my response: http://bugs.developers.facebook.net/show_bug.cgi?id=15200

    I am having a very similar problem. However, in my scenario, this is only occurring when I try to load my app in a tab on my Facebook page.

    Here you can view my canvas page with no SSL errors:
    https://apps.facebook.com/shc-welcome-page/welcome.aspx

    But if you go to the app's tab on my page, just a blank iFrame and a mixed SSL warning:
    https://www.facebook.com/synergyhomecare?sk=app_149463898446716

    Similar to the original post, the non-secure culprit seems to be: *http://static.ak.facebook.com/platform/page_proxy.php?v=2*

    ReplyDelete
  5. 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;

    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&&... as of 2012-Feb-10.

    ReplyDelete
  6. I would notify Facebook of this issue. It is definitely an issue that they would need to resolve, perhaps by putting in a switch statement to check the protocol.

    ReplyDelete
  7. 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...

    ReplyDelete
  8. on a side note, if u have doc-type declarations on your html page like,

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


    ... the reference to "http://www.w3.org" can also bring up the content warning error in IE

    ReplyDelete

Post a Comment

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...

Is it possible to have IF statement in an Echo statement in PHP

Thanks in advance. I did look at the other questions/answers that were similar and didn't find exactly what I was looking for. I'm trying to do this, am I on the right path? echo " <div id='tabs-".$match."'> <textarea id='".$match."' name='".$match."'>". if ($COLUMN_NAME === $match) { echo $FIELD_WITH_COLUMN_NAME; } else { } ."</textarea> <script type='text/javascript'> CKEDITOR.replace( '".$match."' ); </script> </div>"; I am getting the following error message in the browser: Parse error: syntax error, unexpected T_IF Please let me know if this is the right way to go about nesting an IF statement inside an echo. Thank you.