Flickr for Dojo

I’ve been working on a little Dojo based application which talks to Flickr, so I put together a little library which uses Dojo to talk to Flickr using it’s rest JSON interface.

Use
It’s pretty simple to use, just include the JavaScript file:

<script src="flickr.js"></script>

Tell the library what your keys are:

flickr.keys(API_KEY, SECRET_KEY);

And you’re set to go.

The main entry-point is flickr.call. As the first argument, you pass in a hash of arguments, as described in the Flickr API documentation. The method you’re calling is included in this hash. The second argument is optional and is a callback to be called with the response from the Flickr servers. The response will come back in JSON format so it is easy to handle it in JavaScript. The Flickr JSON response format is discussed in detail on the Flickr site.

So what would all this look like? Something like this will load interesting photos from Flickr and add them to the current document:

flickr.keys(API_KEY, SECRET_KEY);
var pagenum = 1;
function interesting () {
    flickr.call({method:'flickr.interestingness.getList',
            page: pagenum, per_page: 10}, interesting_cb);
    pagenum++;
}
function interesting_cb (response) {
    if (response.stat != 'ok') {
        var error = document.createElement('div');
        error.appendChild(document.createTextNode(response.message));
        document.body.appendChild(error);
        return;
    }
    for (var i in response.photos.photo) {
        var photo = response.photos.photo[i];
        var img = document.createElement('img');
        img.classname = 'interesting';
        img.setAttribute('src', 'http://farm'+photo.farm+
                '.static.flickr.com/'+photo.server+'/'+photo.id+
                '_'+photo.secret+'_s.jpg');
        img.setAttribute('width', '75');
        img.setAttribute('height', '75');

        var a = document.createElement('a');
        a.setAttribute('href', 'http://www.flickr.com/photos/'+
                photo.owner+'/'+photo.id);
        a.appendChild(img);

        document.body.appendChild(a)
    }
}

Implementation
I’m not actually using all that much from Dojo. The main thing I’m taking is the crypto library, specifically dojo.crypto.MD5. The way I’m making the actual JSON calls is by appending elements to the page. Perhaps at some point I’ll move to using Dojo’s ScriptSrcIO but right now I’m not.

The current version of the code is attached: flickr.js

Flickr Authentication Security

Recently Flickr closed a little security hole I found in their API authentication. I was able to convince their servers to hand out a token to me based on a user’s cookies and the API key and secret key of an application the user had used. Then with the JSON form of the Flickr API I had full access to the user’s account.

The there two flaws in Flickr’s security that exposed this problem. The first was that the security is based on the assumption that applications can keep a key secret. This is easy for web applications that make server to server API calls, but for anything that a user downloads and especially open source software it’s impossible to keep the key secret. My experiment used the secret key from Flock which is open source – the secret key can be found in subversion, and the secret key from Flickr’s own MacOS X uploader application which can be easilly extracted from the download from their site. Secondly the Flickr server was giving out new authentication tokens without requiring user approval.

The exploit itself is a little state-machine making a series of Flickr API calls and using one IFRAME. It goes like this:

  • Request a frob (via JSON)
  • Request authentication (via an IFRAME)
  • Request the auth token (via JSON)
  • Do evil (via JSON)

In my case the evil consisted of posting a comment on the user’s most recent photo.

The security hole is now closed, but if you’re interested in seeing how to access the Flickr API entirely from JavaScript in a web page take a look at the attached exploit: sploitr.html and the md5 library: md5.js

Rules of RDF

At Flock I’ve become the RDF expert. It turns out, in the context of building on the Mozilla platform RDF can be a really flexible, advanced and performant way of modelling data and binding it to ui, however it can be very confusing. There’s some rules I’ve found come in handy:

  1. There are no nodes. There are only arcs. Nodes only exist in terms of being the source or target of an arc.
  2. There are no arcs. We all agree to interpret RDF triples as a directed graph, but really, they’re just triples, just statements.
  3. There is no XML. Most of the time when we see a representation of RDF triples its in a serialized XML form. There are many different, valid ways to express the same RDF graph as XML. The tree of the XML document doesn’t match the RDF graph (usually). Don’t try to treat RDF as XML.

I originally posted this in my livejournal but it didn’t make sense to most of my non-technical readers, and probably not much sense to most of my technical readers. Hence this blog.