Contact Us
  • How to Prepare for Facebook's Secure Hosting HTTPS Requirement

    Facebook SecurityAs of Saturday, October 1, Facebook will require ALL applications and page tabs to support HTTPS secure hosting, to “ensure that users browsing Facebook over HTTPS will have a great experience over a secure connection.”

     

    What will happen to Page tabs that aren’t secure, starting October 1?

    Facebook hasn’t officially detailed what exactly will happen to apps and Page tabs that don’t have a secure URL, only that “You must provide an SSL certificate in the Dev App settings to avoid having your app disabled.”

    However, on this Facebook Developer Blog thread today, Facebook’s Cat Lee stated: “The content will not be accessible for users with secure browsing turned on. There will be a page that states something close to: This app does not support secure browsing (Learn More).”

    OAuth 2.0 Migration — for Apps Requiring Authentication ONLY

    Also, as of Saturday, Facebook will only support OAuth 2.0 for authenticating users on applications. If you haven’t created an application that requires the “Allow” screen, the OAuth 2.0 migration shouldn’t affect you or your Page tabs.

    What you need to do to make your app or page tab secure

    Your app canvas page or page tab’s iframed page must be hosted on a server that has an SSL security certificate.

    IMPORTANT: If you’re using a tab-creation app like TabPress, Static HTML or Lujure, you don’t have to worry about the secure hosting of your canvas/index page. Those and the other apps like them should have already taken care of this. I know the above-mentioned have. HOWEVER, any images or scripts you inline on your tab via <img /> or <style /> or <embed /> (video), will need to be securely hosted and called with HTTPS.

    SSL is the “Secure Socket Layer” protocol which is responsible for creating secure communication between a user’s browser and the website they’re viewing. This is done by both server and client authentication and the negotiation of an encryption algorithm and cryptographic keys.

    There are two types of SSL certificates — shared and private/dedicated.

    Shared SSL Security Certificate

    A shared SSL certificate will always be the most inexpensive option, as your site shares one SSL certficate with all the other sites on your shared server. This would NOT be a good solution for an e-commerce site, but for simply satisfying Facebook’s requirement that your page be hosted securely it’s fine.

    Some hosts offer the shared certificate option and some do not. You’ll have to check.

    Private / Dedicated SSL Security Certificate

    A private SSL certificate is tied specifically to your domain (www.YourDomain.com), and requires that your domain has a unique IP address (Example 97.123.154.192) associated with the domain.

    Private SSL certificates are more costly, but not prohibitively so. Many hosting plans offer an upgrade to an SSL certificate and unique IP beginning around $5/month.

    NOTE: Read my Social Media Examiner article surveying various hosting companies where you can get great deals on SSL secure hosting.

    How do I set my secure URL for my Facebook application or Page tab?

    In Facebook’s constantly changing developer app interface you’ll see this when creating your Page app:

    Facebook App Secure URL Screen

    Note that the “Secure Page Tab URL” uses “https” instead of “http” — URLs must be specified this way in order to trigger the encryption.

    You should also put your tab URLs in the “App on Facebook” fields:

    Developer Applications: App on Facebook

    IMPORTANT: ALL other files referenced in your page — JavaScript, CSS, images — should also be hosted securely and referenced with “https” or using “root-relative” paths:

    <img src="https://www.your-domain.com/images/your-image.gif" />

    or

    <img src="/images/your-image.gif" />

    The leading forward slash for root-relative URLs indicates the document root of your server, the level where your home page file is located.

    What about Static FBML tabs and SSL / HTTPS?

    Static FBML custom tabs shouldn’t be affected at all by the HTTPS requirement as all content for these tabs is cached and served on Facebook servers.

    However, because the Static FBML app is deprecated and will eventually be disabled, it’s advisable to convert your Static FBML tabs to iFrame Page tabs sooner rather than later.

    What about FBML apps and SSL / HTTPS?

    Facebook has addressed this on the Developer Blog:

    We have heard that there is some confusion about whether FBML apps must support HTTPS. FBML developers still need to know whether users are browsing Facebook over a secure connection since they need to detect whether to serve iframe or video content over HTTPS. As a result, FBML apps must obtain SSL certificates in order to serve this type of content to users browsing over a secure connection. If you have an FBML app, please obtain an SSL certificate for your app to receive traffic from users browsing Facebook over a secure connection.

    If you enable SSL for your FBML app, please make sure that your SSL certificate includes all intermediate certificates in the chain of trust as our SSL validation is strict. You can use third-party SSL analysis tools (e.g., https://www.ssllabs.com/index.html) to check your certificate status and fix any errors (and warnings). If your SSL certificate has problems, you may see “Empty response received” error when you load your FBML canvas app.

    Questions about HTTPS secure browing requirement?

    If you have questions about this, just ask in the comments section, below.

    Or join the conversation about the HTTPS change on the HyperArts Fan Page.

    Remember, this is basically a good thing!

    Related Articles

    Comments

    1. Two field should be updated in the tab/app definitions. the one you mentioned SECURE PAGE TAB URL, 
      but also SECURE CANVAS URL. I would add that !

    2. Thanks so much HyperArts for keeping us all informed.  Last week I moved all my people to a secure host and it all went well.  There are a few people wondering about old welcome tabs that used FBML.  Will they be impacted since some pull in images from an unsecured host?  Although, they should move to iframes, some will just have to wait and see the impact.  I’m just wondering if you knew the answer.

      • FBML won’t be affected by the October 1 HTTPS requirement, as it’s all hosted on Facebook.
        However, eventually Facebook will just pull the plug on Static FBML and then those users will have to scramble.

    3. If i just drag my files into my https folder and set the secure url as https://www…….
      is that done? i already purchased an ssl cert from go daddy this week for the domain in which i host files

      • You shouldn’t have to do that, Sandeep. Once you purchase an SSL certificate from your host, and it’s associated with your domain, you should be able to use “https” for the URLs on your site.
        Some hosts require that after you purchase your SSL you have to go in to your control panel to activate it, so make sure you check that out.
        Then just try to access one of your URLs with “https” instead of “http” and see if it works.

    4. Thanks Tim for keeping us all informed.

      I had the https setup by your recommendation in an earlier tutorial. However, regarding the  javascript/css/image – all of these need a complete direct url?? – so /images/yourlogo.jpg would need to be https://yourdomain.com/images/yourlogo.jpg

    5. Hi Tim,

      Will there be any changes regarding to the signed_request feature? I have several applications, which have a non-fans/fans-only tab. I am using the .php files from your tutorial here: http://www.hyperarts.com/blog/customizing-facebook-iframe-application-signed_request_reveal_tab/ (really nice tutorial by the way!) 

      Thank you in advance 🙂

      Best regards, 
      Kasper

    6. mrandmrsfood says:

      Hi,

      Thanks for the information. 

      I have my apps on secure https. I was wondering if you knew of where I could test my pages to see if they wil be ok as October 1st?

      Regards

      Mark 

    7. With tabs moving to OAuth 2.0, can I continue to use the following code in my tabs:

      FB.init({
      appId : ‘0000000000’,
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml : true // parse XFBML
      });

      Or does the OAuth 2.0 change only apply to authenticating users?

    8. No, they don’t need the full URL. You can also use “root-relative” URLs, as you show:
      So if your hosting server has SSL, you can call your JavaScript, CSS, images, etc., with either:
      /images/your-logo.jpg

      or

      https://www.domain.com/images/your-logo.jpg

      The leading forward slash on root-relative URLs indicates the document root, the level on which your home page file lives.
      Thanks for this question!

    9. As long as your app isn’t used to authenticate a user or pop an “Allow this app to access….” prompt, then you needn’t worry.
      Our reveal feature in the tutorial you reference won’t be affected by this upcoming requirement.

    10. Just test your pages while browsing under “Secure Browsing (HTTPS)”. In case you don’t know how to do this, start by clicking the arrow to the right of “Home” in the top right of your browser in the blue bar.
      Go to: Account Settings > Security >

      and enable “Secure Browsing” by clicking the edit pencil icon.

      If you view your tab and it displays and doesn’t show a warning about HTTPS, you should be good.

    11. Just test your pages while browsing under “Secure Browsing (HTTPS)”. In case you don’t know how to do this, start by clicking the arrow to the right of “Home” in the top right of your browser in the blue bar.
      Go to: Account Settings > Security >

      and enable “Secure Browsing” by clicking the edit pencil icon.

      If you view your tab and it displays and doesn’t show a warning about HTTPS, you should be good.

      • Hi Tim,

        Thanks for the info. All seems ok on secure browsing (https). 

        So hopefully all will be ok my app doesn’t have an allow screen or request data. 

        : ) 

    12. Yes, the OAuth 2.0 change only affects apps that authenticate users or require the user to Allow access to the user’s info.

    13. Dirk Bosgraf says:

      I’m in the process of changing my iframe tabs over to https and I’m running into a problem. I’m using the JavaScript SDK to avoid scrollbars, but it’s causing SSL mixed content warnings. I’m using relative paths for all references other than the fb javascript where I’m using https in the absolute reference. If I don’t use the javascript sdk, everything is fine. When it’s there I get the mixed content warnings. I’ve stripped the page down to the following code and still get the warnings. You can see it at https://secure590.websitewelcome.com/~mermanor/welcome.html – I’m using a shared SSL certificate from HostGator. Any ideas?

       Title
       
         window.fbAsyncInit = function() {
           FB.Canvas.setSize();
         }
         // Do things that will sometimes call sizeChangeCallback()
         function sizeChangeCallback() {
           FB.Canvas.setSize();
         }
       

      Welcome!

        FB.init({
          appId: ‘###############’,
          status: true, // check login status
          cookie: true, // enable cookies to allow the server to access the session
          xfbml: true // parse XFBML
        });

      • Dirk, I went to that URL you provide and didn’t get a mixed content warning. I see you call the JavaScript SDK with “https” which is correct.
        Are *all* the other calls to external files done either root-relative or HTTPS?
        Or provide a URL to your page tab.

        • Dirk Bosgraf says:

          Thanks for looking into it Tim. Which browser are you using?  I don’t get the mixed content error in Chrome or Safari, but I do get it in IE9 and Firefox 3.6.10 when going to the above link.  I tried clearing the cache in both and still get the error.

          • Well, if that’s all that’s on the page, then I don’t know why you’re getting a mixed-content warning. You’re right that IE 9 displays the mixed-content warning.

            In this code:
             FB.init({
            appId: 'YOUR_APP_ID',
            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            xfbml: true // parse XFBML
            });

            Try adding this line: oauth: trueSo it looks like this:

            FB.init({ appId: 'YOUR_APP_ID',
            status: true,
            cookie: true,
            xfbml: true,
            oauth: true});

            Let me know if that helps. That’s about all I can think of.

            Check this Facebook Developers Blog post.

          • Dirk. Although I can replicate the IE 8 & 9 mixed content warning, I think this has to do with accessing the page outside of the Facebook chrome.

            When I used your exact content as the index page for a test iframe app, IE 8 and 9 didn’t give the mixed-content warning, where they did when that page was a stand-alone URL.

            I think this is the issue here.

            • Dirk Bosgraf says:

              Thanks Tim.  I updated the Secure Page Tab URL for the iframe app this morning and everything looks good on the Facebook tab – no mixed content warnings in any of the browsers I tested.

    14. Great! So it works without any changes. I assume I was correct about the only problem being that when you access the page directly, rather than via the Facebook tab iframe, it causes the mixed-content warning?
      Glad you got it sorted out!

    15. kobe tamsut says:

      hi Tim
      I’ve got a problem with my apps. I have a certificate and my pages are ok with no mixed content, yet facebook won’t show them
      my app link is: https://www.facebook.com/TambourColors?sk=app_201082036581468 and on my host: https://smoyz.com/httpdocs/facebook/tambour/calendar.php

      what can be the problem?
      I’ve changed the route to the app on app edit to https…

      thanks a lot for any idea, right now i’m clueless 

      • Your tab isn’t loading at all, and I’m not using Facebook under secure browsing. If it had something to do with secure browing, you’d get a popup warning that tab isn’t secure.
        So it’s some other problem, Kobe.

    16. hi,
              i got a question for you.i have changed my app to https and now its hosted only in https not in http.So i have changed my tab&Canvas URL to https and its working fine only for https and not showing anythng when taking with http.
      Actually what i need is that a redirection to https from http when users accessing my page tab from http.
      please help me if possible.

      my app is hosted in LAMP.

      • You should be able to access your Web pages either with HTTP or HTTPS. If you have a security certificate and HTTPS links are working, then HTTP links to the same page should work as well.
        You definitely have to set both an HTTP and HTTPS URL for your app.

    17. Recently add SSL to site to comply with FB 1 Oct deadline and didn’t think there was any problem until setup a couple of app pages for a client and some of their fans reported the page not showing when browsing with SSL turned on.

      Have checked app settings in and it appears ok but the app is not loading at all under SSL.

      FB page: http://www.fb.com/Corbie.Inn.Boness (page links on left). Pages are hosted on our site (with SSL cert) and are accessible using direct link over https protocol eg

      https://www.web-media.co.uk/facebook/corbieinn/prices/price-index.php with no errors!

      Using script originally posted here for fan gate page but works:
      $app_id,        ‘secret’ => $app_secret,        ‘cookie’ => true));$signed_request = $facebook->getSignedRequest();$page_id = $signed_request[“page”][“id”];$page_admin = $signed_request[“page”][“admin”];$like_status = $signed_request[“page”][“liked”];$country = $signed_request[“user”][“country”];$locale = $signed_request[“user”][“locale”];/*echo “page id = $page_id”;echo “page admin = $page_admin”;echo “like status = $like_status”;echo “country = $country”;echo “locale = $locale”;*/if ($like_status) { include(“prices.php”);}else { include(“prices.php”);}?>

      All files are in same location so no conflict there. FB help/support not a lot of help!!

      Any pointers would be appreciated.

    18. Rob,

      Your tab isn’t using an HTTPS URL.

      When I right click in the content area (not using secure browsing), and then select “View this Frame” (your browser may vary), the iframed URL is HTTP, and it should be HTTPS.
      Did you put a Secure URL value in your app’s settings? Read my new tutorial on creating an iFrame Page Tab app.

      I think this is the problem. When using secure browsing, I also see that your tab doesn’t load, and I believe it’s because you haven’t specified a Secure URL in the app settings.

      • Hi Tim

        Thanks for the quick reply but had already noticed, on further checking, that had only entered the file name in the Page Tab and not the full url.

        Worked ok with http but obviously not with https. Added full url to all apps and voila they are all just fine now.

        Thanks again.

    19. Khalil TABBAL says:

      Very good article … 

      when developping my apps i work on localhost

      I used to debug tab apps this way  :

      Page Tab Url : http://localhost/projet/page-to-test-1 
      Secure Page Tab Url : http://localhost/projet/page-to-test-1

      this kind of contents are not more accessible.

      Do you have a tip for testing and debugging a TAB Apps or do I have to do my tests on a secure URL ?

       Best Regards !

    20. My secure tab is not showing (showing Erreur 501 (net::ERR_INSECURE_RESPONSE) : Erreur inconnue), my tab points to the secure url but when I access directly it ask for certificate permission, but when loading from the Facebook tab it doesn’t ask for CERT permission

      Im using self generated cert is that the problem??

    21. Volvo Web says:

      I have problem when access my facebook tab using Google Chrome.

      Error Found -> Error 501 (net::ERR_INSECURE_RESPONSE): Unknown error.

      –my hosting server has SSL.

      –Secure Browsing Enable.

      How to solve that problem?

      I don’t  want visitors found- errors like that when opening “my facebook tab” using “Google Chrome”

      this is my facebook tab url : http://goo.g/PXAVL

    22. You should set a “canonical” URL for your website, so that either the non-www version redirects to the www version, or vice versa. This can be done on your server via .htaccess if you’re on a Linux server. You can also do it via Webmaster Tools.

    23. Elaine Elrod says:

      If I am using TabPress and if the html code on the tab points to an unsecure server (for example to link to an image), will I have a problem with Facebook not displaying the content? I tried to set up a test and changed my settings to secure browsing and got no error message and was able to see the landing tab. But I’m not sure if this would vary with browsers and platforms.

    24. As the article clearly states, browsers vary with regard to security alerts, but all linked assets should use https.

    25. I’ve created a canvas and page app, then selected create a web page.
      I get a Go to App link next to Edit Page in upper right hand corner, and when clicked on it goes to my web page. Yay!

      How do I make the app a Tab that I can use as my landing zone? 

    26. Thanks for the article- it’s excellent!

      However, I am having an issue with non-secure content. Secure works fine, but non-secure returns “Server not found. Firefox can’t find the server at http://www.apps.facebook.com.” within the iFrame. So, 
      https://www.facebook.com/PragmaticDesign works
      http://www.facebook.com/PragmaticDesign doesn’t!

      This seems to be the opposite way round to most other people’s problem. Can you point me in the right direction, please?

    27. Thanks for the great article! I just purchased an SLL certificate and applied it to my servers, I proceeded to change the “Secure page tab URL” on all of my clients fan pages and they all worked perfectly. However, one of my clients fan page comes with a landing page and I encountered a problem that I don’t know how to fix. 

      After I applied the SSL certificate to this page, the users that already are fans are stuck on the landing page. This only happens when the URL is HTTP and not HTTPS (HTTPS still works correctly). I tried unliking the page and then liking it again to encounter the same problem. I can’t access  the content of the ‘fan.html’, just the content from ‘nonFan.html’ even though I am a fan. 

      If you have an idea on how to solve this, I would immensely appreciate it.

    28. Your article states that if you are using an iFrame app such as static HTML (which I am) that there is no need to worry about this SSL issue.

      I do understand that if I’m creating my very own Facebook iFrame App that it and its assets need to be hosted securely. I however am not doing this.

      I just want to confirm (for my own piece of mind) that if I’m pulling an external, non-secure website into a Facebook iFrame using the static HTML app mentioned in the article, I’ll have NO issues with security messages popping up or custom tabs not been displayed. Am I correct?

      I’m asking because there is so much information out there, with some saying that even what is pulled into an iFrame App (static HTML) needs to be secure… or perhaps I’m misunderstanding.

      I’m sure this question has already been asked and answered, but sometimes a person needs to hear the answer based on their own worded question.

      Thanks for your time.

      • Mike, As regards iFrame apps, what I MEANT to say was that you don’t have to worry about the index/canvas page (the iFramed page) being hosted securely, as it’s taken care of.
        BUT any assets — images, scripts, video — that are called into the page need to be hosted securely.
        You can test if what you’re doing is working or not by selecting the “Secure Browsing” option in your Privacy settings and then trying to view your tab. If there’s an HTTPS issue, you’ll see an alert or your tab won’t load.
        Sorry for the confusion. I’ve updated this post to make the above more clear.

    29. Hello, thanks for the abundance of useful info. I have a question in regards to general linking. I understand that anything embedded onto the page needs to be hosted securely. However, does this apply to links too?

      For example, download links. If I create a fan gate where after users clicked like, there would be a download option available where clicking the link or an image button would lead to a zipped file (which should automatically download). The image would be hosted securely, but does the download zip file itself have to be hosted on a secure site as well?

      On a different but related note, I assume that adding in a link to take a user off-site to another website is fine even if said website isn’t securely hosted, correct?

      Much appreciation and thanks for your help/time.

      • It doesn’t apply to outbound links, as most domains don’t have an SSL Certificate.
        However, the “action” parameter for a contact form, often a URL to the form handler, needs to be https. If it isn’t, then some browsers will “warn” the user that there’s a security mismatch. It doesn’t *stop* the transaction; it just warns the user and the user can then proceed.
        As for the download link, I think that URL would have to be secure because the user is downloading insecure content on a secure site.

    30. Hello,

      We recently installed the SSL Security Certificate on our server for our Facebook application. We are using Amazon ec2 hosting. The application opens, loads, and functions just fine under HTTP unsecure browsing. However, under HTTPS secure browsing, certain parts of the app open and load while other parts of the app will not load.

      We have another website hosted under the same server and it opens okay under HTTPS but under the page info it says “Connection only partially encrypted”. Could this issue be related to the Facebook app issue?

      Any information regarding these issues would be greatly appreciated.

      Thank you!

    31. Make sure all links to images and scripts — any files called into the page — are also under HTTPS.

    32. hi,

      my problem is when a user click on the app tab in my page, and their secure browsing option is disabled, they automatically redirected to the http url insted of the https. (my app can only work throu https).I tried not putting anything in Page Tab URL: in the app settings as well as putting the https url there, but they both wont work…how can I make my tab to default redirect to https url??

      I’ve also try to redirect to https with javascript and php but facebook just redirect to http back again..thanks

      • I’ve not encountered that, but you need to have both a secure and non-secure URL for your tab app page. Perhaps just create a page that HTTP and put an HTML redirect to the HTTPS page?
        When you say “they [are] automatically redirected to the http url” do you mean the http URL loads in the tab?

    33. Hello Tim,
      I have created a page in wordpress and correctly installed it as a page tab app in facebook, yet when trying accessing the app in FB I get the error message that the site is unsecured, as if the main website did not have an SSL certificate.

      Host gator confirms that I do indeed have the certicificate so do you have any idea why Facebook is not recognizing it?
      FYI -The app works fine when I plug in an SSL adapter url as the https.

    34. Hi Tim,

      Very helpful article. I followed your instructions and everything works properly except for the Secure Page Tab URL. I’m using a shared SSL from Hostgator (https://secure623.websitewelcome.com/~myUsername/).
      It works fine when I enter the url in my browser so I know it’s valid,
      but when I try to enter it as the Secure Page Tab URL, I get an error
      stating the Secure Page Tab URL is not a valid URL.

      Looking through the internet I have found several people having the same issue but no solutions. I even read that FB has blocked Hostgator’s websitewelcome.com. Have you heard this? Any ideas of how I can solve this problem?

      Thanks!

      • The only obvious thing I can think of is that the URL doesn’t accept POST requests, just GET. I know Amazon Web Services S3 has this issue which makes it not work as a tab canvas URL. As far as Facebook blocking websitewelcome.com, I’ve not heard about that. although I do see this bug reportwhere a commenter makes this claim, and this question on stackoverflow.
        According to this post, Facebook is blocking all Hostgator shared-SSL domains.
        So perhaps it’s time to abandon Hostgator?

    35. My website address https://signsbyumbree.com/ and my fan page tab app is https://www.facebook.com/SignsByUmbree/app_269534779853550

      For some reason I am receiving this error message when trying to view the tab app.

      405 – HTTP verb used to access this page is not allowed.

      The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access.

      • If your server returns an error — 405 HTTP verb — when Facebook tries to load the HTML page into the iFrame, you may need to change the file extension from .html to .php or .aspx (depending on the server platform you are using). When Facebook loads the iFrame, they do a POST to the index page in order to pass some data to your application and it looks like some servers are set up to not allow a POST to a file with the .html extension.

        • Do I have to do anything special other than changing the extension from html to php? Like going into the html file and editing the header. I’m not a developer just a driven entrepreneur so bare with me.

        • It worked…..Thanks

    Speak Your Mind

    *