Browser based API management for serverless web apps

I’ve become very interested in writing serverless web apps lately. What I mean by this is, the app consists only of HTML, JS and CSS files, hosted anywhere but a (public) server. It could be in my localhost, it could even be right on my desktop, or, hosted in your browser via a web app store install.

Chances are my serveless app will need to use some other service via an API. The thing about a serveless app is you will need to store API keys in public view, probably as a Javascript variable. There is no backend that is my proxy with the needed keys, secrets or tokens for that API, or to handle POSTs.

What’s an alternative to this? Move the API keys from the app to the user, all powered by the browser.

For the lack of a better example, consider someone has developed an app that pulls in a Twitter stream, allows you to draw mustaches on all the avatars, then save that image off. Silly, but is enough to illustrate the example.

The process would go something like this:

  • I install (or load) the app, via the browser.
  • The browser looks at a manifest file (or some such) to see information about the app.
  • The app tells the browser it needs to use the Twitter and Imgur API.
  • The browser alerts the user of this, much like apps that request the users geo-location.
    • The browser allows a 1-click ability for the user to “create an account with service X”.
    • The browser goes out and creates these accounts and stores the API information in the browser.
    • The browser has new javascript apis available to the app:
      • api.twitter.get(“1/statues/public_timeline.json”, callback);
      • api.imgur.post(“1/image/upload”, options_hash, callback);

    Now I can write a serverless app and not worry about someone jacking my API keys.

    Other benefits:

    • A great new tool in development with the Javascript api.
    • The browser doesn’t have to ask me to create an account again, once I have a Twitter account, all apps use that.
    • Would move rate limits to a user, rather than an application.
    • Let’s the user know (permissions?) what this app will be doing with your data. Maybe even only allowing part of them, for example: I want to get Twitter avatars and draw on them, but I don’t care to save them.
    • I can’t wait to use postMessage more, but until APIs start supporting it, we will still need to POST. The browser  will do this for us so our app can post cross domain.

    Your ideas?