Multi-Tab Template for Facebook Timeline Page Tabs!
Our TURNKEY template has all the code and files to create a website-like Page Tab.
See it in action, and learn more....


Tweet

How to Prepare for Facebook’s Secure Hosting HTTPS Requirement

September 28, 2011 By Tim Ware 52 Comments

As 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:

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:

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" />

<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!

Technorati Tags: Facebook, Facebook Apps, Facebook Page Tabs, https, SSL certificates, Web Hosting

Filed Under: Facebook Programming Tagged With: Facebook, Facebook Apps, Facebook Page Tabs, https, SSL certificates, Web Hosting

http://zilumim.net tamirc

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 !
- http://www.hyperarts.com/blog/ Tim Ware
  
  Thanks for that!
http://www.facebook.com/santatheresa Theresa Santa

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.
- http://www.hyperarts.com/blog/ Tim Ware
  
  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.
http://www.facebook.com/profile.php?id=223409208 Sandeep Gupta

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
- http://www.hyperarts.com/blog/ Tim Ware
  
  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.
http://www.hyperarts.com/blog/ Tim Ware

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!
http://www.hyperarts.com/blog/ Tim Ware

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.
http://www.hyperarts.com/blog/ Tim Ware

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.
http://www.hyperarts.com/blog/ Tim Ware

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.
- Anonymous
  
  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.
  
  : )
http://www.hyperarts.com/blog/ Tim Ware

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

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
});
- http://www.hyperarts.com/blog/ Tim Ware
  
  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
    
    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.
    - http://www.hyperarts.com/blog/ Tim Ware
      
      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.
    - http://www.hyperarts.com/blog/ Tim Ware
      
      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.
http://www.hyperarts.com/blog/ Tim Ware

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!
kobe tamsut

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
- http://www.hyperarts.com/blog/ Tim Ware
  
  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.
http://www.facebook.com/sirin.ibin Sirin Ibin

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.
- http://www.hyperarts.com/blog/ Tim Ware
  
  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.
http://www.hyperarts.com/blog/ Tim Ware

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.
- http://www.facebook.com/people/Rob-Willox/100000325038446 Rob Willox
  
  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.
  - http://www.hyperarts.com/blog/ Tim Ware
    
    Great news, Rob. Thanks for the update!
http://twitter.com/LSmoD ulises

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??
Volvo Web

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
- http://www.hyperarts.com/blog/ Tim Ware
  
  The tab URL isn’t valid, doesn’t work.
  - Volvo Web
    
    I’m sorry, goo.gl not goo.l
    :p
    http://goo.gl/PXAVL
    - http://www.hyperarts.com/blog/ Tim Ware
      
      Your page tab index page is not hosted securely. When using Secure Browsing, I get the “This Connection is Untrusted.”
      Your tab’s index page and all its assets need to be hosted securely.
http://www.hyperarts.com/blog/ Tim Ware

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.
http://www.hyperarts.com/blog/ Tim Ware

As the article clearly states, browsers vary with regard to security alerts, but all linked assets should use https.
- Elaine Elrod
  
  Thanks so much. Sorry, I had seen that note before but had lost track of where I had seen it.
Volvo Web

Disqua XSS Attack : http://www.ethicalhack3r.co.uk/security/wordpress-plugin-disqus-comment-system-xss/#more-16648
Anonymous

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?
http://twitter.com/PragmaticDesign John-Lee Langford

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?
- http://www.hyperarts.com/blog/ Tim Ware
  
  Both of those URLs, secure & not secure, work fine, John. Don’t use “www.apps.facebook.com”; use “apps.facebook.com” (no “www”).
http://www.facebook.com/maco.quiroga Mauricio Quiroga

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.
- http://www.hyperarts.com/blog/ Tim Ware
  
  You need to provide a URL. I really don’t understand what your issue is.
  - http://www.facebook.com/maco.quiroga Mauricio Quiroga
    
    link to fan page: http://www.facebook.com/factorylapaz?sk=app_128304327276671
    After you ‘like’ this page, it should take you to the content, but it doesn’t. It stays on this welcome page even if you’re a fan.
    
    However, if you’re browsing with an https (https://www.facebook.com/factorylapaz?sk=app_128304327276671) everything works just fine. Hope this helps.
    - http://www.hyperarts.com/blog/ Tim Ware
      
      For some reason, your tab’s fan-only content is only viewable via HTTPS. This must be something in your code, which I can’t troubleshoot.
http://www.facebook.com/mike.uhrich Mike Uhrich

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.
- http://www.hyperarts.com/blog/ Tim Ware
  
  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.
http://www.facebook.com/jaylen.wine Jaylen Wine

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.
- http://www.hyperarts.com/blog/ Tim Ware
  
  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.
http://www.hyperarts.com/blog/ Tim Ware

Make sure all links to images and scripts — any files called into the page — are also under HTTPS.
http://www.facebook.com/xsometer Eran Ravid

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
- http://www.hyperarts.com/blog/ Tim Ware
  
  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?
http://www.facebook.com/eddieographer Eddie Spangler

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.
- Analisa
  
  What’s the URL of your tab?
Bill

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!
- http://www.hyperarts.com/blog/ Tim Ware
  
  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?