 
                                HTML5
Seifenblasen - aber Bulletproof
Ein Webinar von Mario Heiderich
antwerpes ag
Köln, 18-01-2011
Bitte wer und was?
Mario Heiderich
Forscher für Ruhr-Universität Bochum
Microsoft IE Security Team in Redmond
HTML5 - was ist das eigentlich?
Wo kommt es her – und wer hat's gemacht?
HTML5 und Security
Warum ist das überhaupt ein
Thema?
Vielleicht sogar aktuell das Thema für Webdevs?
Daher...
Ein kurzer Blick auf das Kommende
Heute wird’s was geben
HTML Geschichtsunterricht
Was ist anders an HTML5?
Neuartige Angriffe
Adäquate Verteidigung
Blick über den Tellerrand
HTML5 und SVG
CSS und Parser-Fehler
Fazit und Blick in die Zukunft
All die Jahre...
● 1990 – 1995 :: erste SGML basierte HTML Versionen von CERN/IETF
● 1995 :: W3C veröffentlicht HTML3.0
● 1997 :: HTML3.2 – viel Neues, Java, Frames, Bilder und mehr...
● 1998 :: HTML4 – nach wie vor im Gebrauch – so wie DOM Level 1
● 2000 :: DOM Level 2 Core
● 2003 :: DOM Level 2 HTML, XForms
● 2004 :: HTML5 – eine Idee and XHTML 2.0 vorbei, WHATWG wird gegründet
● 2006 - 2007 :: W3C hat sich's anders überlegt
● 2007 - jetzt :: WHATWG und W3C gemeinsam im HTML5 Boot
HTML5 Heute
HTML5 ist weder fertig...
Noch ansatzweise flächendeckend implementiert
Zwei mal HTML5?
Dennoch existent
Die User wollen's
Die Browser können's (ein bisschen)
Ein halbfertiger Standard der halbwegs unterstützt wird
Hier ein bisschen – dort ein bisschen
What could go wrong!?
Freude machen
Nicht wenig Dinge an HTML5 machen durchaus Sinn.
Und tun nicht weh!
Struktur
<header>, <section>,
<article>, <menu>
Optik
Runde Ecken - oh yes!
Neue Formularele-
Hübsche Validierung im
Browser
mente
Video, Audio, Inline SVG
Gezähmte IFrames
Mehr und mehr CSS
SVG und Canvas
Mehr Awesome
Animationen und Transformationen
WebGL und 3D Beschleunigung
Video und Audio Support – mal so mal so
Schriftarten in Hülle und Fülle
Geolocation
Weniger Flash und Silverlight – mehr „Offenheit“
Barrierefreiheit und Semantik
Aber...
wollten wir nicht eigentlich über unangenehme Dinge sprechen?
Ärger machen
HTML5 als Troublemaker. Aber so richtig.
Formulare
Weiteres
autofocus
History Spoofing
formaction
LocalStorage und
IndexedDB
Safari 5 form data
stealing
Regex DoS
XSS via SVGs
CSS Fehler
Beispielszenario
Frames – Quell des Glücks seit späten 90ern
Frames können überlagert werden
Formulare können autofocus nutzen
–
Frame 1 kann dank CSS Frame 2 überlappen
•
Frame 2 kann mit autofocus Fokus stehlen
–
Frame 1 wird beschrieben – Frame 2 empfängt den Input
–
–
„We should never have added autofocus to HTML5“
–
Srsly?
•
http://www.w3.org/Bugs/Public/show_bug.cgi?id=9602
Mehr Autofocs
<input onfocus=write(1) autofocus>
<input onblur=write(1) autofocus><input autofocus>
<body oninput=alert(1)><input autofocus>
<body
onscroll=alert(1)><br><br><br><br><br><br>...<br><br>
<br><br><input autofocus>
Und viele weitere...
Action!
<form id="test"> ... </form>
<div>Lorem ipsum dolor...</div>
<button form="test" formaction="javascript:alert(1)">X
Was könnte dieser Vektor anrichten?
Formulare von außen beeinflussen?
Submit auf javascript: URI umlenken
Phishing und Form Hijacking
Ohne jeden Event Handler?
HTML5 Rocks!
Gegenwehr
Framebuster, die funktionieren
X-FRAME Header setzen!
Keine Blacklists!
<video poster=javascript:alert(1)>
Keine IDs für <form> Elemente
Und Obacht for Backticks...
Backticks?
`` ← Backticks of Evil!
Warum genau?
Probleme im Internet Explorer 8
Später mehr dazu!
Bleiben noch
Mindestens 5 Angriffstechniken von 500
Formulare
Weiteres
autofocus
History Spoofing
formaction
LocalStorage und
IndexedDB
Safari 5 form data
stealing
Regex DoS
XSS via SVGs
CSS Fehler
Heia Safari!
Alles im Client
<input pattern=^((a+.)a)+$
value=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa!>
Validierung im Browser
Regulärer Ausdruck im Attribut
Denial Of Service vorprogrammiert
history.pushState(null, null, '/unschuldig/')
Angriffe verstecken
Sichtbarer reflektiver XSS – das war einmal!
HTML5 Rocks!
Gegenwehr
Als User im Safari Form Autocompletion abstellen
Unsaubere reguläre Ausdrücke vermeiden!
Kein Vertrauen in das location Objekt
Auch und insbesondere im Internet Explorer
<form id=location href=foo>
<script>alert(location.href)</script>
Bleiben noch
Mindestens 5 Angriffstechniken von 500
Formulare
Weiteres
autofocus
History Spoofing
formaction
LocalStorage und
IndexedDB
Safari 5 form data
stealing
Regex DoS
XSS via SVGs
CSS Fehler
SQL Injection im Browser
HTML5 fordert diverse Client-seitige Datenbanken
sessionStorage, localStorage,
createDatabase(), IndexedDB
Einige nutzen SQLite als Grundlage
Tatsächliche SQL Queries im DOM
Vom XSS zur ClientSQLI
Browser als autarker Attack Server
History auslesen (CSS)
Mails verschicken (Java)
Keylogging (JavaScript)
Webcam und Mikro steuern (Flash)
Scalable Vector Madness
Schön, informativ und barrierefrei
Skalierbar und Interaktiv
Aber alles andere als ein Bild
SVG == Vollständige HTML Applikation
Neuerdings gibt’s Inline SVG
SVG via <img>
Uploads
Embeds und Schriftarten
– http://html5sec.org/?svg
Und schlimmer noch
http://heideri.ch/opera
Und es geht noch schlimmer... /opera/pdf - <img> ruft per Skype an
Rich Text is Rich
Moderne Seiten benötigen Rich Text
User wollen Farben und
Und warum auch nicht...
Rich Text Editoren (RTEs) helfen. Wie es scheint.
Aber RTEs sind böse. Richtig böse.
Sprechen wir über Superwaffen
Styles!
RTE Security
Validierung und Filterung im Client
Sicherheitslücken im Backend
Komplexe DOM Operationen
HTML Tidy oder schlimmer
Viel DOMXSS
<script>
if(link.match(/https?:/)) {
location.replace(link)
}
</script>
Stylebombs
<style>@import "data:,*%7bx:expression(write(1))%7D
";</style>
<div style="font-family:'foo&#10;;color:red;';">XXX
<div
style="background:url(/f#&#127;oo/;color:red/*/foo.jp
g);">X
<x style="background:url('x&#1;;color:red;/*')">XXX</x>
Gegenwehr
Niemals im Browser validieren
Niemals dem RTE vertrauen
Keine hausgemachten Filter. Niemals. Garniemals.
HTMLPurifier rockt – so halbwegs...
HTML4 ist unfassbar komplex
Von HTML5 ganz zu schweigen
Obacht!
Browser 0-Days
Da hilft auch kein HTMLPurifier
Im Gegenteil!
<a style="background:url('/\'\,!@x:expression\(write\
(1\)\)//\)!\'');"></a>
All done
Zeit für ein Fazit?
Formulare
Weiteres
autofocus
History Spoofing
formaction
LocalStorage und
IndexedDB
Safari 5 form data
stealing
Regex DoS
XSS via SVGs
CSS Fehler
Call to Action
Wir brauchen einen HTML5 Purifier
Am besten auch gleich einen SVG Purifier
Wir brauchen bessere Dokumentation
Einheitlichere Specs und Implementierungen
Bessere Security Bulletins
Mehr tatsächlich relevante Info!
Make HTML5 Rock!
Document!
Links
● http://simon.html5.org/html5-elements Überblick über HTML Tags und Elemente
● http://www.w3.org/TR/html5/ Der HTML 5 W3C Spec Draft
● http://www.whatwg.org/specs/web-apps/current-work/multipage/ Der HTML5 WHATWG Spec Draft
● http://html5sec.org/ Der HTML5 Security Cheatsheet – alle erwähnten Angriffsbeispiele und mehr
● http://www.w3.org/TR/html5-diff/ W3C „Differences between HTML4 and HTML5“
● http://en.wikipedia.org/wiki/HTML5 Wikipedia über HTML5
● http://jeremiahgrossman.blogspot.com/2010/08/breaking-browsers-hacking-auto-complete.html
„Attacks against autocomplete and specific input field types“
● http://seclab.stanford.edu/websec/framebusting/
„Busting frame busting“ – Paper über Framebusting und Clickjacking
● http://code.google.com/p/html5security/w/list Artikel über HTML5 Security im Allgemeinen
● http://lists.w3.org/Archives/Public/public-web-security/ W3C HTML Security Mailing List
● HTML5 Testcases
http://slides.html5rocks.com/
http://samples.msdn.microsoft.com/ietestcenter/
Das war's
Vielen Dank für Ihre Aufmerksam...
MO-MENT!
Da war doch noch was!
Die Backticks des Grauens!
Hausaufgabe!
<div id="test">
<img src=x alt="``onerror=alert(1)">
</div>
<script>
alert(document.getElementById("test").innerHTML)
</script>
Bitte mal auf dem Internet Explorer testen
Danach... Happy Fixing :-)
Mehr dazu vielleicht im nächsten Webinar?
Over and Out
Vielen Dank für Ihre Aufmerksamkeit
Fragen willkommen!