Contact Us
  • Facebook Secure Browsing (HTTPS), iFrame Tabs & Mixed Content Warnings

    Facebook Secure Browsing HTTPSOne of the big developments in the March 2011 Facebook Page overhaul was support for iFrames in Fan Page custom tabs. Until then, iFrames were only allowed on canvas pages and, even there, required the user to click an image or text to “activate” (load) the iFramed content.

    Custom iFrame Tabs Shouldn’t Mix Secure and Nonsecure Content

    Because iFramed pages are hosted on non-Facebook servers — allowing developers to use standard Web coding (HTML, CSS, JavaScript, etc.) — they are subject to the same rules governing any other Web page. This includes making sure that pages aren’t coded to display both secure (linked using “https”) and nonsecure (linked using “http”) content when “calling” files (images, external CSS and JavaScript, etc.) to display on, or enhance the functionality of, the page.

    In this article, I explain why Facebook custom iFrame tabs must now accommodate the many users now browsing Facebook under HTTPS, what files need to be secure — and how to make them secure — and various associated pitfalls developers must avoid.

    I will also show how Amazon Web Services can provide a secure, economical and non-technical hosting solution for those with less experience in Web development and who are using an iFrame Custom Tab application like TabPress where you can add code but don’t have to create a Facebook app.

    Facebook Introduces Secure Browsing (https)

    In January 2011, Facebook announced a new account setting called “secure browsing (https)”:

    Here is how Amazon Web Services describes their offering:

    Starting today we’ll provide you with the ability to experience Facebook entirely over HTTPS. You should consider enabling this option if you frequently use Facebook from public Internet access points found at coffee shops, airports, libraries or schools. The option will exist as part of our advanced security features, which you can find in the “Account Security” section of the Account Settings page.

    Jan 2011: Facebook Announces 9.6M Users Browsing Facebook over HTTPS

    Developers should take this issue very seriously. On April 15, 2011, Facebook announced on the Developer Blog: “Today, 9.6 million people are browsing Facebook over HTTPS and the trend is continuing to increase. ”

    Facebook secure browsing under HTTPS combined with iFramed content on Page tabs creates potentially BIG problems with browsers, problems that can be avoided.

    Page Tab Applications MUST Specify a Secure Tab URL

    Developers must make sure they specify a “Secure Tab URL” under “Facebook Integration” in the application editing interface:

    Secure Tab URL

    If a Secure Tab URL isn’t specified, the tab will not display any content to a user browsing Facebook with “secure browsing (https)” enabled!

    Of course, the domain specified in the Secure Tab URL has to have an SSL Certificate.

    Admins will see this popup dialog if they try to access a tab on their Page that doesn’t have a Secure Tab URL specified:

    Facebook Warning to Admins if No Secure Tab URL

    Users who click on a tab while browsing under “secure browsing (https)” when that tab has no Secure Tab URL specified will be presented with the option to switch to HTTP browsing (this from the Redbull “Games” tab):

    Warning to Users Requesting they Switch to HTTP

    Facebook Enables Automatic Temporary Switching to HTTP

    On April 19, 2011, on the Facebook Blog, it was announced:

    Today, we’re improving HTTPS so if you start using a non-HTTPS application on Facebook, we automatically switch your session back to HTTPS when you’re finished.

    This, of course, was driven by some very large brands whose apps wouldn’t work under HTTPS (the Redbull Fan Page has over 17M fans), but the benefit is to all of us, to some degree. But it doesn’t really affect the gist of this article: avoid mixing HTTP and HTTPS content that generates browser security warnings. I don’t think this “improvement” addresses that issue.

    HTTPS Secure Browsing and Mixed Secure and Nonsecure Content Warnings

    If a Page tab does have a secure URL, but the URLs for CSS, JavaScript, images or embedded files use the HTTP protocol instead of HTTPS, AND the Facebook user has opted for “secure browsing (https)” in the Account Settings, Internet Explorer, Google Chrome, Firefox and Opera create a fairly significant problem, displaying a warning when the tab attempts to load, either as a popup window (this example is IE 8):

    Internet Explorer Mixed Content Security Warning

    or at the bottom right of the browser (this example is Firefox):

    Firefox Security Alert

    Make Sure You Avoid Calling ANY Files via HTTP!

    First, remember this DOES NOT INCLUDE files you hyperlink to, such as other Web pages or websites, or PDF downloads, etc.

    Files that MUST Be HTTPS to Avoid the Mixed Secure and Nonsecure Content Warning:

    • Images — <img /> tag;
    • External CSS (.css) and JavaScript (.js) files;
    • Embedded files, such as Flash and Video. YouTube is served over SSL, so you can simply change its embed-video URLs from “http” to “https” and they work fine. (Unfortunately, Vimeo doesn’t yet serve its videos over SSL.)

      <iframe title="YouTube video player" width="480" height="390" src="https://www.youtube.com/embed/A7F2X3rSSCU" frameborder="0" allowfullscreen></iframe>

    • URLs in your DOCTYPE or <html> tag:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    • Calls to the JavaScript SDK when incorporating Facebook Social Plugins:

      <div id="fb-root"></div><script src="https://connect.facebook.net/en_US/all.js#appId=127182060688835&xfbml=1"></script>

      *See the note below on errors with Activity Feed and Recommendations tags.

    Root-relative or File-relative URLs are OK

    Root-relative or file-relative links avoid the issue of mixing secure and nonsecure content because they don’t specify either HTTP or HTTPS. So linking this way, if possible, avoids the mixed-content pitfalls:

    Root-relative link, which begins with “/” representing the document root:

    <link rel="stylesheet" type="text/css" href="/directory-name/stylesheet.css" />

    File-relative link, where “./” or just the file name means same directory, “../” means one directory up:

    <link rel="stylesheet" type="text/css" href="../my-css-files/stylesheet.css" />

    Facebook Social Plugins Bug: XFBML Tags Pull in Profile Images Via HTTP!

    The HyperArts Fan Page “XFBML Tags” tab — our test area for the XFBML Social Plugins — was persistently generating the secure/nonsecure content warning, even though I’d changed every URL to HTTPS, except of course links to external websites).

    It turns out that even when a user is viewing Facebook under “secure browsing (https)”, Facebook pulls in the user profile images over HTTP rather than HTTPS for two XFBML tags: Activity Feed and Recommendations.

    Of course, these two social plugins may be intended for use ONLY on external websites, and not for Facebook tabs. Whatever the case, I created a bug report on Bugzilla: Bug 16821.

    Amazon Web Services (AWS): A Hosting Solution for Those Without a Secure Server

    Amazon Web ServicesFor those folks who are using an iFrame app that allows you to enter your own code (eg TabPress) and who don’t have access to a server with an SSL Certificate, I would recommend checking out Amazon Web Services, and specifically their Simple Storage Service (S3) product.

    NOTE: You cannot use the S3 service to host the actual index page of an app (eg index.php). Facebook uses HTTP POST request to fetch the index page of an iFrame app, and S3 doesn’t support POST requests. You can, however, use the S3 service to host all other content you link to in your index page.

    Amazon S3 provides a simple web services interface that can be used to store and retrieve any amount of data, at any time, from anywhere on the web. It gives any developer access to the same highly scalable, reliable, secure, fast, inexpensive infrastructure that Amazon uses to run its own global network of web sites. The service aims to maximize benefits of scale and to pass those benefits on to developers.

    The service is free for the first year and then it’s pay as you go. Your free tier includes 5 GB of Amazon S3 storage, 20,000 Get Requests, 2,000 Put Requests, 15GB of data transfer in, and 15GB of data transfer out each month for one year. Once you start paying, the pricing is quite reasonable.

    Images, video, CSS (.css) and JavaScript (.js) files can be stored, using either HTTP or HTTPS (just get the URL of the file you’ve uploaded and change it to the HTTP/HTTPS protocol you wish to use. You can even store all you website files using AWS S3. It’s pretty cool.

    You create “buckets” and can create “folders” within them to organize your files. After uploading a file, you can get its URL by right-clicking it and selecting Properties. By default, the URL is HTTPS, but you can change it to HTTP if you’re not using it for a Facebook iFrame tab.

    NOTE: Be aware that you can’t use SSL (https) on buckets that have a “.” in them, eg mybucket.bucket1.s3 etc. Use either a single name (eg mybucket) or use a dash “-” instead (eg mybucket-bucket1.s3 etc). (Read more about bucket limits and restrictions.) (Thanks to David Heriot!)

    Access Denied Error: Edit Your Bucket Policy

    If you try to access the object you uploaded via the URL in Properties, and you get this error: “This XML file does not appear to have any style information associated with it. The document tree is shown below.”
    AWS S3 Error - Access Denied

    There’s a fix. You highlight the bucket and click “Edit bucket policy” in the bottom screen, under Properties > Permissions:

    Edit Bucket Policy

    Paste in this policy:


    {
    "Version": "2008-10-17",
    "Id": "c2f6151d-4f3c-4381-8569-15f0ef85e107",
    "Statement": [
    {
    "Sid": "AllowPublicRead",
    "Effect": "Allow",
    "Principal": {
    "AWS": "*"
    },
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
    }
    ]
    }

    Make sure you replace “YOUR-BUCKET-NAME” with the name of the bucket whose policy you’re editing.

    Other Resources

    Comments

    1. Excellent explanation and resources!

      The Firefox Amazon S3 Organizer makes it easy to modify bucket permissions.

      https://addons.mozilla.org/en-US/firefox/addon/amazon-s3-organizers3fox/

      Dave

    2. Thanks for the detailed document! I’ve decided not to use the secure option on FB for now… At least until everyone’s got their stuff figured out.

    3. Please scratch my last comment. I read it as “the tab will not display”.

    4. Is it possible/recommended to use same url for http and https then check with php which method is used and deliver the appropriate content to the user?

    5. Many Thanks Tim – especially for the social plugins warning 🙂

    6. Be aware that you can’t use SSL (https) on buckets that have a “.” in them, eg mybucket.bucket1.s3 etc. Use either a single name (eg mybucket) or use a dash “-” instead (eg mybucket-bucket1.s3 etc).

      See http://docs.amazonwebservices.com/AmazonS3/latest/dev/index.html?BucketRestrictions.html for more info

    7. I too just switched over to the https sessions, I got a message from a friend to let me know about this option!

    8. Unfortunately, we can’t use Amazon S3 for Facebook iframe hosting. Facebook iframe does an HTTP POST to the endpoint to request the page.

      S3 doesn’t support POST other than for file uploads. I’m not sure about the logic behind FB doing a POST request when a GET should be all that’s needed !

      • Hi Linda. Yes, I just confirmed this is the case. I had tested adding images, CSS and JS files to S3 and that worked fine.

        But it does appear that you can’t use AWS S3 for hosting the actual index page of an application.

        I will modify this post to reflect this, and thanks so much for the heads up, and to David, as well!

        • Hi Tim,

          Thanks for verifying this for us. At least we can still host any images, CSS and JS files we need to. I went ahead and got an Amazon S3 account for offsite backup of my photos, videos and music files and it also now offers me the ability to use it for https files for Facebook.

          Linda…

    9. Linda is quite correct – if you try it your app will return an error as follows;


      This XML file does not appear to have any style information associated with it. The document tree is shown below.


      <Error>
      <Code>MethodNotAllowed</Code>

      <Message>
      The specified method is not allowed against this resource.
      </Message>
      <ResourceType>OBJECT</ResourceType>
      <Method>POST</Method>
      <RequestId>96714880455D12A4</RequestId>

      <HostId>
      obDwkpFEQNFqeTjk4iXd0cdUky+k6WDVqVE60VBuVfFWQw0+KDFD3HyYkmesqL7Z
      </HostId>
      </Error>

    10. Struggling here. Rackspace say their Cloud File system would support GET/POST but doesn’t support https yet. Anyone know of a system that would work, aside of course, of just upgrading your web server to SSL?

      David Heriot

      • Try Amazon Web Services S3 account, as described in this post.

        • Tim, doesn’t work, as Linda testifies. Using an html file located in S3 as your canvas url (secure or unsecure) results in the error shown by Malcolm. Storing files certainly works, but only when the canvas url is held on another server.

          David Heriot

          • Hey folks, I’m going to do some testing around this to confirm. I appreciate the heads up. Honestly, I only test S3 for hosting content placed into the index.php main page, and not with the index page itself. Stay tuned!

    11. is there anyway besides s3 service? I mean is there any other solution where we don’t have to host in s3 and our fanpage won’t show secure tab warning? s3 is free for 1year and after that we have to buy, right? May be there must be any fix for secure tab warning without hosting in other accounts.

    12. I tried using Microsoft’s cloud service, Azure, but couldn’t get that to work either. I contacted Microsoft and we ran a Fiddler trace to capture the traffic. Seems that Azure doesn’t like Facebook’s use of HTTP POST either (see http://developers.facebook.com/docs/guides/canvas/ for more info). Microsoft recommended instead a regular server with SSL, which is what I’m going to use. Remember though that only need the tab url needs to be located on an SSL server – files can still be stored on cloud storage like S3.

    13. Tim,

      Can we use regular hosting instead of S3?

      • Yes, as long as you have a security certificate for the domain. And you can’t host your Facebook app index page on S3 anyway, just any other files & assets called on the page.

    14. Hi
      I’m trying to get my app working but am getting the ‘update your secure url’ message with everything.

      Even when I take out the Connect.facebook.net/… script the tab still asks to update the url – dispite the direct url showing the ssl as green.

      https://assets.over9.co.uk/thomastantrum/madbymoonlight/

      It shows the SSL as working but the connect facebook code is linking to http files not https – is there anyway around this?

    15. I’m a little confused. From what I understand, Amazon’s S3 works for all content except the index page, in which case I’d need a secure server. If I had a secure server, why wouldn’t I just have all the content there?

      I have the same question as Mike. Is there another solution? Do any web hosts offer SSL at no extra charge? I need to change mine soon anyway. Thanks!

      • I’m not aware of a free SSL hosting. You can use Amazon S3 to host all assets you pull into a custom iFrame app like TabPress where the index page is secure and your assets are hosted securely at Amazon S3.

    16. Oh, I get it! I wasn’t making the connection that the index page is within TabPress and that, by default, makes it secure. Thanks as always for the quick response.

    17. Just wanted to say THANK YOU so much for this explanation and detailed solution. You have saved me a ton of aggravation. The S3 integration for hosting our CSS and images has worked seamlessly.

    18. Brilliant detailed post and it has solved a problem I have that has nothing to do with Facebook pages. My friend has a site that shows the mixed security message even though she has SSL certificate and now I realize it’s the links to Youtube clips that need changing to https. Thanks.

    19. From what I’m reading Google Maps cannot be embedded using https (unless you pay for a premier api)…is this true? I’ve tried & do get IE errors…thinking it might be safer to skip the embed & ‘fake it” with an image & link…

    20. Plz someone help me
      How to Specifiy a different stylesheet for iFrame on Facebook,how can one make Facebook use a specific CSS file when it shows content through the iframe.

      I want to apply a specific stylesheet for the content of an external wordpress site when it is shown in an iframe on Facebook.. When visited directly, the page would call the regular CSS. When seen through the iframe, it would call a facebook-specific CSS.

    21. neoAndrej says:

      Hi Tim. What SSL hosting do you use for index application files?

      • We host them ourself. Here’s a company that says they host Facebook apps for free, but I haven’t tried them: http://hostfb.com/

        Let me know what solution you choose, or why you didn’t choose some, so others can benefit from your research.

        Thanks!

    22. neoAndrej says:

      Thank you Tim for the link. It is interesting but why free? It is strangely. I want to choose http://hostgator.com. Jo Barnes recommend it and they give free SSL with Bussiness account. I do not want to choose Amazon because I need one more hosting for SSL index pages.

    23. Hi Tim,
      the fix for “Access Denied Error” doesn’t work for me. pretty sure i did everything all right though. have you already been reported that it failed? any idea of the problem?
      thanks for this quality post anyway!

      • Sevy, All I know is the fix worked for me. I’m not sure what you might have done wrong. Sorry!

        Also, remember, you can host style sheets, external JS and images, but NOT the actual index page of your iFrame tab app.

    24. Thnx for sharing! I bumped in too this.

    25. Interesting article thank you. For those needing a free solution to the SSL / HTTPS conundrum on Facebook iframes this article might also be very helpful

      http://www.thecaymanhost.com/product-reviews/facebook-iframe-pages-ssl-and-https

    26. Also in case useful to others, FREE SSL image hosting servicehttp://www.sslpic.com/

    27. David Jung says:

      Are you sure that the links in the DOCTYPE need to be changed?  I understood those to be URIs not URLs – and in the case of namespaces I think they can be any string – URIs are only used by convention.  So, changing that string changes the identification of the namespace.

      • Hi David. Actually, I’m not sure. Of course, a bit of testing would resolve the question. I’ll test it to see if it matters. You may know more about the DOCTYPE than I do.
        Thanks! Tim

    28. Do you know if it is possible to use google cloud storage 
      service to host the actual index page of an app (eg index.php).   I am terying but keep getting  ”
      Bad request, please check with your software provider” Not sure if that’s a google thing or something on my end…

      Thanks in advance for the help,

      Dave

    Trackbacks

    1. […] existing apps–alongside new ones–to fit within HTTPS specifications (like this one, here), many users are being left behind. And, unsurprisingly, we just figured out how to make the […]

    2. […] Hyperarts – Facebook Secure Browsing (HTTPS), iFrame Tabs & Mixed Content Warnings &#8211… […]

    Speak Your Mind

    *