November 18, 2009Web · Photos · JavaScript · Security · Performance · User Experience

Building a Better Photo Uploader

Chris Putnam

At Facebook, we're always looking for ways to make sharing more efficient. Today we're announcing a significant upgrade to our Photos product: a new and improved photo uploader that’s available for testing as a Facebook Prototype. Since Photos launched in 2005, the photo-uploading experience on Facebook has relied on the use of a third-party ActiveX control (and its sister Java applet). Over the years we have seen a growing number of complaints with this old uploader. In a recent poll, we discovered a significant percentage of users were unable to upload photos due to technical issues. Many more found it functional, but only just. That's when we resolved to build a modern replacement. We had the following goals for the new uploader:

  • -Don't depend on Java.
  • -Uploads should be asynchronous; that is, you should be able to browse around on Facebook while an upload is ongoing.
  • -The uploader's UI needs to integrate well with current and future revisions of Facebook's chrome.
  • -UI iteration needs to be easy (no recompiling code).
  • -Updates and deployment of any binaries should be as secure, seamless and user-friendly as possible.

With these goals in mind we considered some of the existing options out there -- Adobe Flash, Google Gears, Yahoo! Browser Plus -- but none of them carried the specific functionality we needed. This brought on an interesting challenge: We'd build a headless browser plug-in that could securely provide powerful JavaScript APIs -- like filesystem browsing, background uploading threads, and thumbnailing -- to our front-end code. With this system we are able to build the uploader's UI entirely in HTML and CSS, where iteration is cheap and easy.

How it Works

When you use the new photo uploader for the first time, you'll be asked to install the Facebook Plug-In. This installation flow has been engineered to be as seamless as possible. If you have the Java runtime installed, we use a small applet to download the installer and run it in the background. If not, we provide a direct download link to an installer for your platform. In either case, no browser restart is required to continue. Once you've installed the plug-in, you can enjoy the new photo uploader. As soon as it's opened, the uploader immediately takes advantage of the new custom APIs we've built: There is a simple photo browser built entirely in HTML and CSS right there in the Facebook frame. [While it looks like magic, it's really just a bunch of cool hacks.] The photos in thumbnail view are served by a light-weight local web server thread, while the filesystem information is provided through a JavaScript API.

After selecting photos and starting an upload, you'll discover another great feature--asynchronous uploading. The plug-in spins off a background thread to perform the upload regardless of what the browser is doing in the foreground. Then the local web server provides JSONP endpoints to retrieve progress information or cancel the ongoing upload, without needing to re-embed the plug-in itself. With this approach you can even navigate away from Facebook entirely without worrying about your uploads.

Security

Security is our top concern with this project. Part of the reason we're making this feature available early through prototypes is to solicit your feedback. We've spent long hours architecting a secure experience. Here are some of the key points:

  • -The local web server that serves thumbnails and other special API endpoints only runs bound to 127.0.0.1, and its secure URIs are protected with a hashing mechanism.
  • -The plug-in will refuse to run on non-Facebook domain names.
  • -In the event of an XSS hole on Facebook or a network hijacker, our plug-in has strong mechanisms to prevent unauthorized access to trusted functionality. (To learn more, please see this discussion topic.)
  • -All code downloads are securely signed and verified, including the entire install flow and any future updates.
  • -In the unlikely event of a security hole in the plug-in itself, Facebook can easily deactivate it remotely using a "kill switch.” This is achieved every time the plug-in starts up by connecting securely to Facebook servers and comparing a minimum-version number.

If you believe you have discovered a security concern with the browser plug-in or any other part of this project, we would greatly value your input. Please send your security reports to fbplugin-feedback@publists.facebook.com.

Rollout

Our new photo uploader is currently available as a Facebook Prototype for testing purposes. To try it out, you can visit the Prototypes section of our Application Directory and activate the prototype “New Photo Uploader.” Depending on the results of these tests, we hope to roll it out to all users soon.

Keep Updated

Stay up-to-date via RSS with the latest open source project releases from Facebook, news from our Engineering teams, and upcoming events.

Subscribe
Facebook © 2017