Welcome

 This page is for testing new browser techniques. For example, this page can be edited and published using the browser's property "contentEditable". I can upload this page using the controls on the bottom on the page. The webserver checks my credentials and then a CGI-script saves the data on the server. This is true WYSIWYG!

 Almost every web developer knows about two methods of sharing data between the browser and the server: GET and POST. The former is a request from the browser to get a resource pointed at by the URL. Using the latter, the browser can send data to an executable run on the server. However, there are other methods defined in HTTP, which have existed from the very beginnings of the web: PUT and DELETE. Until today, no browser supports these two methods natively. But with a little Javascript and server-side scripting we can unleash the power of these ancient techniques! There are 4 steps to this:

Tricking the Apache

 Not only the browser is unaware of the existence of PUT and DELETE. Apache also has no inbuilt support for them. Of course, this has security reasons. We don't want anybody to be able to overwrite and delete our content! In this step we will redirect all requests with the method PUT or DELETE to our own script using mod_rewrite, which is enabled in almost all servers. At the same time we ensure that we are the only ones who can edit files using HTTP authentication. Therefore we put a .htacces file into the directory which we want to make editable:

AuthType Basic
AuthName "Editing files"
AuthUserFile /absolute/path/to/user/list/.htusers
<Limit PUT DELETE>
  require valid-user
</Limit>

RewriteEngine On
RewriteCond %{REQUEST_METHOD} (put|delete) [NC]
RewriteRule ^.*$ /path/to/our/publishing/script.pl

This tells Apache that the methods PUT and DELETE need authentication. Read this document on how to set up basic authentication. The file also contains a rewrite rule that redirects all requests with these methods to our script.

WARNING: Basic authentication sends the password unencrypted to the server. This poses a security risk which I don't take responsibility for!

At the other end of the line

The browser still can't send PUT requests on its own. We have to use Javascript and XMLHttpRequest for that. This function saves the current document with all changes under the current URL:

function save_page()
{
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("PUT", document.URL, false);
    xmlhttp.send(document); 
    if(xmlhttp.status == 201)
    {
        alert("Page successfully saved!");
    }
    else
    {
        alert("Failed to save. Server returned error: " + xmlhttp.responseText);
    }
}

 In our current state, the function will probably display some bunch of HTML code formatted as plain text. Because the script does not exist yet, this should be an error either saying that the resource does not exist or that there was some misconfiguration.

Is there anybody out there?

 The uploading script is the biggest potential security risk. Because people could identify possible loopholes in my code if I post it here, I only give pseudocode. It is very important to check the URL given by the browser thoroughly! Relative paths are especially dangerous. Don't be fooled by the range of URLs a browser may pass to the server: Anyone can forge HTTP requests that contain relative paths, strange ASCII characters and so on. The data part of the request is also potentially dangerous. In an attempt to fill up the server's hard disk or to clog up the line an attacker may send insane amounts of data. Also, never allow access to executable files! Be very, very careful! Alas, the pseudocode:

1. check if the method equals PUT or DELETE; else send error status "405 Method not allowed"
2. check if the URL points to a resource you want users to be editable; else send error status "403 Forbidden"
3. check if the resource actually exists or a new resource should be created (dangerous!!!); else send error status "404 File not found"
4. make a backup of the old file!
5. copy the input (stdin) to the file
6. send back status "201 Resource created"

 Now you should be able to upload files using PUT over Javascript and XMLHttpRequest! Here is some information on security risks of server-side scripting.

Making your content editable

 Now, we can save our pages on the server, we want to be able to actually change them before we do so ;) Fortunately HTML5 added the property "contenteditable" to our Swiss army knife. With it we can make the content of tags editable:

<p contenteditable="true">Edit me!</p>

Unfortunately little more than typing, deleting, pasting and drag'n'dropping works out of the box. To format your document, you need even more Javascript! See this page for more info.

 That's it, basically! Just one note: Everything that changes on your page will be saved to permanent storage. That has some implications. See that little biker on the cloud? When I put this document on the server, its position will also be saved. Now, when someone opens this page, the biker will start out in the position it was, when I saved this file. If your page contains a lot of dynamic content, this can become a hassle. It may also be, that the structure of your page degrades after a lot of editing, so always make local backups of your files! Only make your page editable where it's needed!

 For DELETE you just need a little more scripting on both ends. Happy hacking!