Javascript adventure: WebDav Client

MyFiles – Webdav service.

Programmed in ASP and JS; proxy on top of webdav server using Javascript Ext JS API to present user-friendly interface. Uploads through drag/drop; simple one-click downloads. File previews.

When we installed a webdav server to allow remote access to staff and students’ home drives, I wanted to make an easy-to-use front end. Of course, you can add it via network places in Windows. I even made a button on a webpage that opens this using NavigateHttpFolder(), but that doesn’t work in anything except IE and even then doesn’t work very well.

So after some experimentation, I started using javascript xmlhttp methods to do PROPFIND, GET and HEAD methods on the webdav server. (Which, incidentally, just runs IIS 6 with a virtual folder pointing to a share full of user folders. And pass-through authentication.)  This proved quite successful – I could list folder contents as long as the JS sent the username and password. I could then download files with a GET request, but JS security made it difficult to turn this into a ‘download’ on the client’s computer.

The final solution employs ASP pages to handle the actual uploads and downloads. ASP running on the server itself proxies the request; for downloads, the vbscript does an xmlhttp GET request and then sets the http header (content type and size) and simply binarywrites the content out. This way, the JS interface simply gives you a link to ‘download.asp’ with a querystring, and your browser downloads the file without any problems.

Of course, using this mixture of client and server side processing presents some security problems. The browser will cache your credentials and use these for xmlhttp requests subsequent to the first successful request, but a server side, of course, won’t know your credentials unless they’re passed. So this is how it works:

User logs in. Credentials submitted are encrypted and sent back to the browser as a session cookie. They’re used on PROPFIND requests to show folder structure and contents. Then for uploads or downloads, the server-side scripting gets the encrypted credentials from the cookie, decrypts it with a shared key and uses this to access the user’s files.

All communication is over https (with a 403.4 custom error redirect to make things easier) so your password is safe. It’s lightly encrypted just to protect it if the session cookie gets accessed.

Uploads are similar to downloads: An extension to the Ext JS code allows it to support drag-drop uploading, and a custom dll catches and relays the file bitwise back to the webdav server.

So that’s it: A simple, easy-to-use front end that lets you access your files from any browser. The Ext JS framework is a joy to work with, and makes the UI implementation a doddle.

And yes, the whole thing was written in Notepad++!