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!