Data access directly from the browser (using Azure Blobs)

A few weeks ago I blogged about an architectural pattern I had been thinking about, where an application running in the browser could load/save data directly to the (Windows Azure Blob) storage service without going through your server side code. This makes a lot of sense in some scenarios, why consume CPU cycles that you’re paying for on the server to move data from one place to another? If the browser can do this directly, then why not bypass the server and write directly?

I have since built an example ‘todo list’ application that does this, ok there are a lot of pieces missing and it’s very rough, but it’s an illustration. The source is available here: https://github.com/richorama/AjaxBlobExample. There is an example of it running here: http://two10ra.blob.core.windows.net/index.html  – prepare for bugs!

The server side component of the application can run anywhere, and is accessed by the browser using JSONP. I have written this in Node, and it’s running on an Azure Website. It exposes one endpoint, which takes a username and returns a URL to a blob, which the code in the browser can then access for an hour. There’s no real security here, it’s just for fun:

var azure = require("azure");
var app = require('express').createServer();
app.enable("jsonp callback");

var blobService = azure.createBlobService();
blobService.createContainerIfNotExists("container", function(error){});

app.get('/login/:username', function(req, res){
	var url = blobService.generateSharedAccessSignature("container", req.params.username, {
	AccessPolicy : {
		Permissions : "rwdl",
		Expiry : getDate()
	}});
	res.json({url: url.url()});
});

app.listen(process.env.port || 210);	

function getDate(){
	var date = new Date();
	date.setHours((date).getHours() + 1);
	return date;
}

The client side of the application is a static HTML file served out of Blob Storage. It calls the node service using a jQuery AJAX GET using JSONP, and then proceeds to GET and PUT to the blob to read/write data.

There are a couple of things to watch out for;

1. A shared access signature on the blob is not immediately available. I implemented some retry logic in the application.
2. To write to the blob you need to issue a ‘PUT’. Not all browsers will support this (I guess).

The conclusion is that the idea works, but what does this pattern mean?

1. It allows you to think of your API as a set of static files stored in a JSON format. This has obvious scale-out advantage, especially if the blobs are enabled for public read.
2. Your application just governs resources, and provides access to them as the user requires them. In my example, one request to my node server provided an hour of use, with no further involvement. There is huge cost saving here, you could now run a web app with significantly less resource.
3. You lose control of input validation. This would need to be carefully considered before building out this pattern.

Can anyone think of a name for the pattern? Has it been documented before?

 

Advertisement