sebadorn.de

Mozilla made their Observatory service public, which lets you check the security of sites. A first run resulted in an F for sebadorn.de. Following some of the sug­gestions I could improve that to a B-.

1. Redirect HTTP to HTTPS

Thanks to Let’s Encrypt I already offered HTTPS, but I didn't enforce it. Now visitors to http://sebadorn.de are redirected to https://sebadorn.de. I did so by adding the following rule to my .htaccess file:

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP_HOST} ^sebadorn\.de [NC]
	RewriteCond %{SERVER_PORT} 80
	RewriteRule ^(.*)$ https://sebadorn.de/$1 [R,L]
</IfModule>

2. Add some more headers

<IfModule mod_headers.c>
	Header always edit Set-Cookie (.*) "$1; HttpOnly; Secure"
	Header set Content-Security-Policy "frame-ancestors 'self'"
	Header set X-Content-Type-Options "nosniff"
	Header set X-Frame-Options "SAMEORIGIN"
	Header set X-XSS-Protection "1; mode=block"
</IfModule>

Set-Cookie

Cookies about to be set received additional directives: HttpOnly and Secure. HttpOnly disallows cookies being read by JavaScript and Secure enforces an HTTPS connection. (Source)

X-Content-Type-Options

Setting this header to nosniff tells browsers not to try and guess the MIME type of contents, which potentially prevents XSS attacks. (Source)

X-Frame-Options

Setting this header to SAMEORIGIN or DENY prevents other pages from displaying the site in a frame which prevents clickjacking. (Source)

X-XSS-Protection

Setting this header to 1; mode=block tells browsers to try and detect XSS attacks and in this case stop loading the page. (Source)

Im Januar habe ich zum zweiten Mal bei der Mozilla Dev Derby einen Beitrag eingereicht. Das Thema lautete diesmal Drag&Drop und da dachte ich mir, dass sich doch etwas Hübsches finden lassen müsste. Eine erste Idee, auf die ich mich ziemlich versteift hatte, gab ich später doch wieder auf – ich hätte meinen eigenen Ansprüchen nicht Genüge tun können. Von mir stammt nun Pete's Adventure (Mirror), eine kurze interaktive Geschichte, mit der ich doch sehr zufrieden bin. Code und Ressourcen sind auf GitHub zu finden.

Drag&Drop

Drag&Drop mit JavaScript ist nicht schwer. Ein paar wenige (dumme) Besonderheiten muss man nur kennen. Zum Beispiel, dass es in Firefox nur funktioniert, wenn auch irgendwelche Daten gesetzt sind. Ein leerer String reicht da schon:

var note = document.getElementById( "note" );
note.addEventListener( "dragstart", function( e ) {
    e.dataTransfer.setData( "text/plain", "" );
}, false );

Ein Drop wird zudem nur erkannt, wenn man die Events dragenter und dragover für das Element stoppt:

function stop( e ) {
    e.preventDefault();
}
var dropzone = document.getElementById( "dropzone" );
dropzone.addEventListener( "dragenter", stop, false );
dropzone.addEventListener( "dragover", stop, false );
dropzone.addEventListener( "drop", doSomething, false );

Das dürften auch schon die größten Stolpersteine gewesen sein. Nun warte ich weiter auf das Ergebnis des Wettbewerbs, das eigentlich sehr bald verkündet werden müsste.

---

Update 2013-03-02: Ha, nächster Tag und das Ergebnis ist da. Erster Platz!

---