Working Draft

By Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« SchaeferNews Technology Education How To Tech News

Working Draft episodes

February 03, 2015 Revision 206: ES6 Template Strings, Jobwechsel, Spartan
Ganz unverhofft gesellte sich diese Revision der gute Chris Heilmann auf einen Plauderabend zu uns.
[00:00:45] News
„WebKit’s JavaScriptCore and Web Inspector now have a code coverage profiler that tells you what JS code has executed“
Die News der Woche ist dieses neue Feature des kommenden Safari bzw. des jetzigen WebKit-Nightlys, mit Hilfe dessen man ungenutzte Code-Stellen in seinem JavaScript ausfindig machen kann.
Schaunotizen
[00:03:02] ES6 Template Strings
Die neuen ESCMAScript 6/2015 Template Strings erlauben in ihren Backticks viele neue String-Spielereien, wie etwa Multiline-Strings, Variablen-Ersetzung innerhalb des Strings, Filterung und Internationalisierung. Mit dem Browsersupport sieht es leider noch nicht so gut aus, aber es gibt Transpiler und Polyfills dafür.
[00:17:25] Chris Heilmann geht zu Microsoft
Dass für Chris bei Mozilla die Luft ein wenig raus war, war ja bekannt. Dass er jetzt zu Microsoft geht war hingegen ein ganz schöne Überraschung (Aaron Gustafson übrigens ebenfalls). Wir sprachen mit Chris über seine Zeit bei Mozilla und seine Aufgaben und Pläne im neuen Job. Außerdem durfte auch Microsofts Spartan Browser in unserer Diskussion nicht fehlen.
[01:06:42] Erkenntnis der Woche
display: flex doesn’t work for button elements
Rodney erzählt von seinen erfolglosen Versuchen, die Firefox-Buttons in eine Flexbox-Konstruktion zu zwängen. Er erzählt uns außerdem, warum das alles sowas von nicht funktioniert und welchen Workaround-Joker man erfolgreich ziehen kann.
[01:17:40] Keine Schaunotizen
JavaScript Application Architecture On The Road To 2015
Addy Osmani legt uns seine Sicht auf die JavaScript-Architektur des Jahres 2015 in einem ellenlangen Artikel dar. Lesenswert!
A Vision for Our Sass
Felicity Evans formuliert und erklärt in diesem ALA-Artikel Ihr Manifest für guten SASS-Code-Stil. Gehen wir sehr mit d’accord!
Useful SVGO[ptimization] Tools
Sara Soueidan bietet hier ein kleines Roundup an verschiedenen GUIs und Ausprägungen des SVG-Optimierers SVGO auf. Gutes Thema!
Using WEBP/JPEG 2000/JPEG-XR/APNG Now With Picturefill and Modernizr
Zoltan “Du Lac” Hawryluk, Urgestein der Webszene, widmet sich der Frage, welche Vorzüge die verschiedenen exotischeren Bildformate abseits von JPEG haben und wie man sie im Alltag einsetzen kann. Erschöpfend, gut!
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 25 min
February 03, 2015 Revision 206: ES6 Template Strings, Jobwechsel, Spartan
Ganz unverhofft gesellte sich diese Revision der gute Chris Heilmann auf einen Plauderabend zu uns.
[00:00:45] News
„WebKit’s JavaScriptCore and Web Inspector now have a code coverage profiler that tells you what JS code has executed“
Die News der Woche ist dieses neue Feature des kommenden Safari bzw. des jetzigen WebKit-Nightlys, mit Hilfe dessen man ungenutzte Code-Stellen in seinem JavaScript ausfindig machen kann.
Schaunotizen
[00:03:02] ES6 Template Strings
Die neuen ESCMAScript 6/2015 Template Strings erlauben in ihren Backticks viele neue String-Spielereien, wie etwa Multiline-Strings, Variablen-Ersetzung innerhalb des Strings, Filterung und Internationalisierung. Mit dem Browsersupport sieht es leider noch nicht so gut aus, aber es gibt Transpiler und Polyfills dafür.
[00:17:25] Chris Heilmann geht zu Microsoft
Dass für Chris bei Mozilla die Luft ein wenig raus war, war ja bekannt. Dass er jetzt zu Microsoft geht war hingegen ein ganz schöne Überraschung (Aaron Gustafson übrigens ebenfalls). Wir sprachen mit Chris über seine Zeit bei Mozilla und seine Aufgaben und Pläne im neuen Job. Außerdem durfte auch Microsofts Spartan Browser in unserer Diskussion nicht fehlen.
[01:06:42] Erkenntnis der Woche
display: flex doesn’t work for button elements
Rodney erzählt von seinen erfolglosen Versuchen, die Firefox-Buttons in eine Flexbox-Konstruktion zu zwängen. Er erzählt uns außerdem, warum das alles sowas von nicht funktioniert und welchen Workaround-Joker man erfolgreich ziehen kann.
[01:17:40] Keine Schaunotizen
JavaScript Application Architecture On The Road To 2015
Addy Osmani legt uns seine Sicht auf die JavaScript-Architektur des Jahres 2015 in einem ellenlangen Artikel dar. Lesenswert!
A Vision for Our Sass
Felicity Evans formuliert und erklärt in diesem ALA-Artikel Ihr Manifest für guten SASS-Code-Stil. Gehen wir sehr mit d’accord!
Useful SVGO[ptimization] Tools
Sara Soueidan bietet hier ein kleines Roundup an verschiedenen GUIs und Ausprägungen des SVG-Optimierers SVGO auf. Gutes Thema!
Using WEBP/JPEG 2000/JPEG-XR/APNG Now With Picturefill and Modernizr
Zoltan “Du Lac” Hawryluk, Urgestein der Webszene, widmet sich der Frage, welche Vorzüge die verschiedenen exotischeren Bildformate abseits von JPEG haben und wie man sie im Alltag einsetzen kann. Erschöpfend, gut!
1 hr 25 min
January 31, 2015 Revision 205: Perceived Performance, Ampersand.js
Zur 205. begrüßen Anselm und Stefan Schrödingers Co-Host (ist er aktiv, ist er es nicht?) Kahlil Lechelt wieder im virtuellen Studio. Die (Wieder-)Entdeckung eines vielversprechenden Frameworks hat ihn zurückgerufen.
[00:01:03] News
IO.js
Node.js ohne Node.js? Ein Open Source Fork der JavaScript-Umgebung beschäftigt die Szene. Dieser Beitrag klärt auf.
Firefox 35
Allerlei sinnvolle Neuerungen in der 35er Version des Fuches.
Schaunotizen
[00:04:40] Perceived Performance & fetch()
Folgender Gedankengang: Ein Polyfill zum kommenden fetch-Befehl wird veröffentlicht und kommt gut an (in Kürze: verdauliches XHR mit Promies). Ein gewisser Steve Souders bringt seine Meinung, dass es doch ideal wäre mit diesem Standard auch Ladebalken steuern zu lassen, um dem User eine gewisse Geschwindigkeit anzuzeigen, oder im schlimmsten Fall vorzugaukeln. Hat bei eBay ja auch gut funktioniert. Wir sprechen — im Vorgaukel-Falle — von unseren eigenen Erfahrungen und überlegen, wie so ein Standard ideal aussehen könnte.
[00:26:46] Ampersand.js
Aufgepumptes Backbone.js mit saftiger Tool-Chain im Hintergrund? Kahlil hat Ampersand für sich entdeckt und schwärmt uns im Beinah-Monolog entsprechend vor. Wer damit noch nichts zu tun hatte bisher, und sich nicht irgendwelchen Hype-Frameworks verschrieben hat, sollte durchaus einen längeren Blick darauf werfen. Ebenso erwähnt: Jade als Templating-Language und das Buch der AmpersandJS Entwickler Human Javascript.
[00:55:18] Keine Schaunotizen
GitHub Cheat Sheet
Was mit Git und GitHub doch alles möglich ist. Tolle Kniffe, die oft unentdeckt bleiben.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
58 min
January 31, 2015 Revision 205: Perceived Performance, Ampersand.js
Zur 205. begrüßen Anselm und Stefan Schrödingers Co-Host (ist er aktiv, ist er es nicht?) Kahlil Lechelt wieder im virtuellen Studio. Die (Wieder-)Entdeckung eines vielversprechenden Frameworks hat ihn zurückgerufen.
[00:01:03] News
IO.js
Node.js ohne Node.js? Ein Open Source Fork der JavaScript-Umgebung beschäftigt die Szene. Dieser Beitrag klärt auf.
Firefox 35
Allerlei sinnvolle Neuerungen in der 35er Version des Fuches.
Schaunotizen
[00:04:40] Perceived Performance & fetch()
Folgender Gedankengang: Ein Polyfill zum kommenden fetch-Befehl wird veröffentlicht und kommt gut an (in Kürze: verdauliches XHR mit Promies). Ein gewisser Steve Souders bringt seine Meinung, dass es doch ideal wäre mit diesem Standard auch Ladebalken steuern zu lassen, um dem User eine gewisse Geschwindigkeit anzuzeigen, oder im schlimmsten Fall vorzugaukeln. Hat bei eBay ja auch gut funktioniert. Wir sprechen — im Vorgaukel-Falle — von unseren eigenen Erfahrungen und überlegen, wie so ein Standard ideal aussehen könnte.
[00:26:46] Ampersand.js
Aufgepumptes Backbone.js mit saftiger Tool-Chain im Hintergrund? Kahlil hat Ampersand für sich entdeckt und schwärmt uns im Beinah-Monolog entsprechend vor. Wer damit noch nichts zu tun hatte bisher, und sich nicht irgendwelchen Hype-Frameworks verschrieben hat, sollte durchaus einen längeren Blick darauf werfen. Ebenso erwähnt: Jade als Templating-Language und das Buch der AmpersandJS Entwickler Human Javascript.
[00:55:18] Keine Schaunotizen
GitHub Cheat Sheet
Was mit Git und GitHub doch alles möglich ist. Tolle Kniffe, die oft unentdeckt bleiben.
58 min
January 22, 2015Revision 204: Fokus, Build-Tools, Links
Wer keine spannenden Themen hat, muss eben selbst spannend sein. Und so grillten Hans, Peter, Stefan und Anselm Fokus-Forscher Rodney zu seinen neuesten Forschungsergebnissen und wärmten kurz (und ohne nennenswerten Erkenntnisgewinn) die große Build-Tool-Debatte wieder auf.
Schaunotizen
[00:00:15] Neues von der Fokus-Front
Nach seinem ersten Bericht in Revision 198 meldet sich Rodney wieder zu Wort und berichtet von neuen Erkenntnissen aus seinem Fokus-Forschungs-Projekt, speziell von neuen Erkenntnissen rund um Shadow DOM, , Canvas-Element und . Letzteres ist interessanterweise je nach Browser unterschiedlich zu bedienen. Tabindex in Shadow DOM funktioniert in Chrome auf sinnvolle Weise, ist in Firefox (wie auch der Rest von Shadow DOM) noch buggy. In wirken sich die bekannten Probleme von Image Maps verwirrend aus. Die Fokussierbarkeit von Canvas-Subtrees könnte für Focus Transitions genutzt werden. Aus Rodneys bisherigen Erkenntnissen lassen sich drei Empfehlungen ableiten:
Repariert Browser-Bugs mit Rodneys Scriptsammlung
niemals positiven tabindex benutzen, nur 0 und -1 sind brauchbare Werte
niemals accesskey benutzen
Als nächste Themen wird sich Rodney blutige SVG-Details sowie fokus-relevante Pseudoklassen (:focus, :active etc) zur Brust nehmen.
[00:42:15] How to Use npm as a Build Tool
Keith Cirkel hat keine Lust mehr auf Grunt und Gulp und erklärt daher mal, wie man auch NPM als Build-Tool einsetzen kann (wie auch andere vor ihm). Wir mit all unseren Monster-Projekten sind nur mäßig überzeugt: große Aufgaben können durchaus komplexe Tools erfordern. Peter gibt wieder eine Theorie von den in jedem Projekt vorhandenen hässlichen Ecken zum besten und will trotzdem für sein nächstes Projekt mal Makefiles versuchen.
[00:55:31] Keine Schaunotizen
appcache-nanny
Soll den Umgang mit dem gefürchteten Application Cache etwas verschönern.
The 2014 CSS Report: Examining how CSS is being used in the wild
Datenpunkte zum CSS-Einsatz in freier Wildbahn.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
59 min
January 22, 2015 Revision 204: Fokus, Build-Tools, Links
Wer keine spannenden Themen hat, muss eben selbst spannend sein. Und so grillten Hans, Peter, Stefan und Anselm Fokus-Forscher Rodney zu seinen neuesten Forschungsergebnissen und wärmten kurz (und ohne nennenswerten Erkenntnisgewinn) die große Build-Tool-Debatte wieder auf.
Schaunotizen
[00:00:15] Neues von der Fokus-Front
Nach seinem ersten Bericht in Revision 198 meldet sich Rodney wieder zu Wort und berichtet von neuen Erkenntnissen aus seinem Fokus-Forschungs-Projekt, speziell von neuen Erkenntnissen rund um Shadow DOM, , Canvas-Element und . Letzteres ist interessanterweise je nach Browser unterschiedlich zu bedienen. Tabindex in Shadow DOM funktioniert in Chrome auf sinnvolle Weise, ist in Firefox (wie auch der Rest von Shadow DOM) noch buggy. In wirken sich die bekannten Probleme von Image Maps verwirrend aus. Die Fokussierbarkeit von Canvas-Subtrees könnte für Focus Transitions genutzt werden. Aus Rodneys bisherigen Erkenntnissen lassen sich drei Empfehlungen ableiten:
Repariert Browser-Bugs mit Rodneys Scriptsammlung
niemals positiven tabindex benutzen, nur 0 und -1 sind brauchbare Werte
niemals accesskey benutzen
Als nächste Themen wird sich Rodney blutige SVG-Details sowie fokus-relevante Pseudoklassen (:focus, :active etc) zur Brust nehmen.
[00:42:15] How to Use npm as a Build Tool
Keith Cirkel hat keine Lust mehr auf Grunt und Gulp und erklärt daher mal, wie man auch NPM als Build-Tool einsetzen kann (wie auch andere vor ihm). Wir mit all unseren Monster-Projekten sind nur mäßig überzeugt: große Aufgaben können durchaus komplexe Tools erfordern. Peter gibt wieder eine Theorie von den in jedem Projekt vorhandenen hässlichen Ecken zum besten und will trotzdem für sein nächstes Projekt mal Makefiles versuchen.
[00:55:31] Keine Schaunotizen
appcache-nanny
Soll den Umgang mit dem gefürchteten Application Cache etwas verschönern.
The 2014 CSS Report: Examining how CSS is being used in the wild
Datenpunkte zum CSS-Einsatz in freier Wildbahn.
59 min
January 10, 2015 Revision 203: AngularJS x.x
Unser Peter musste sich in letzter Zeit berufsbedingt deutlicher mit AngularJS auseinandersetzen und hatte sich doch eine Meinung gebildet. Verbunden mit genereller Verwunderung über die kürzliche AngularJS 2.0 Ankündigung war das für uns Grund genug, diesem Framework noch eine weitere Episode zu spendieren. Hilfestellung bot Pascal Precht, der dem Kommentar- und Fragefeuerwerk entgegenstand.
Schaunotizen
[00:01:08] AngularJS x.x
Phase 2 des Hype Cycles erfolgreich überstanden, nähern wir uns beim AngularJS Framework in raschen Zügen Phase Nummer 3: Desillusionierung. Von vielen Seiten hört man, AngularJS soll man gar nicht verwenden (andere Frameworks übrigens auch nicht), andere meinen sogar, das Toolset eignet sich sowieso nur für Demos und ist von der Pieke auf gebrochen. Es helfe Google mit der kommenden Version, die alles umreisst, was wir bislang kennen!
Doch warum wirkt Angular 2.0 wie eine große Entschuldigung seitens Google und als wehmütiger Versuch, jetzt alles richtig zu machen? Und warum bringt dieser Versuch wieder die Gemüter zum kochen? Sollte man Angular 1.x nun komplett in die Tonne werfen? Warum braucht’s wieder eine eigene Sprache und Tool-Chain mit AtScript, und warum sagt man ständig, AtScript sei keine eigene Sprache? Frage um Fragen und ein Thema nach dem anderen. In ihrer Mitte ein tapferer Jungentwickler namens Pascal Precht, der uns die Welt von AngularJS erklärt und aufzeigt, warum alles so katastrophal und verwirrend wirkt.
Apropos verwirrend: Wir finden die AngularJS Quellen für 1.x in diesem GitHub Repository, für Angular 2.x in jenem. Man erkenne den feinen Unterschied.
Zum Schluß noch ein kleiner Disclaimer: Wir bemühten uns redlichst, etwaige Vergleiche zu anderen und anderwertigen Frameworks zu vermeiden um entsprechenden Grundsatzdiskussionen aus dem Weg zu gehen, allerdings rutscht uns das eine oder andere Schlüsselwort in den Gesprächsverlauf rein. Seht es uns nach und erkennt die Anstrengung, den Fokus wieder auf Angular zu richten.
[01:13:50] Keine Schaunotizen
AngularJS: Login und Sicherheit
von unseren Kollegen bei AngularJS.de!
Integrating Web Components with AngularJS
Unser Gast beschreibt eine laut Eigenaussage „Hacky Solution“, wie man jetzt schon Web Components in AngularJS 1.3 verwenden kann. Also noch vor der 2.0er Revolution. Diese Erklärung gibt es auch in audiovisueller Darbietung samt Kollegin Carmen Popoviciu auf der letztjährigen NG Europe Konferenz
Moderne Web-Entwicklung mit AngularJS
Robin und Phil, die ihr schon vom Podcast kennen solltet, zeigen euch ausführlich eine Einleitung in die aktuelle Angular JS Version, die sie bei der Rhein Java User Group zum Besten gaben. Sehr detailliert und empfehlenswert, sowie eine gute Einleitung für die Workshops, die sie zusammen mit Peter geben.
Thoughtram
Apropos Workshop. Auch Gast Pascal zeigt euch die Vor- und Nachteile von Angular 1.x live und in Farbe. Buchbar auf dieser Seite
vivus.js
Themenwechsel. Animierte Strokes bei SVG, einfach steuerbar per Bibliothek. Vivus macht das für euch.
The origin of the tag
Schon etwas älter, nicht minder interessant: Wie ist eigentlich der Tag entstanden? Der Erfinder plaudert aus dem Nähkästchen. Spoiler: Entsteht so wie alle großartigen blöden Ideen.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 20 min
January 10, 2015 Revision 203: AngularJS x.x
Unser Peter musste sich in letzter Zeit berufsbedingt deutlicher mit AngularJS auseinandersetzen und hatte sich doch eine Meinung gebildet. Verbunden mit genereller Verwunderung über die kürzliche AngularJS 2.0 Ankündigung war das für uns Grund genug, diesem Framework noch eine weitere Episode zu spendieren. Hilfestellung bot Pascal Precht, der dem Kommentar- und Fragefeuerwerk entgegenstand.
Schaunotizen
[00:01:08] AngularJS x.x
Phase 2 des Hype Cycles erfolgreich überstanden, nähern wir uns beim AngularJS Framework in raschen Zügen Phase Nummer 3: Desillusionierung. Von vielen Seiten hört man, AngularJS soll man gar nicht verwenden (andere Frameworks übrigens auch nicht), andere meinen sogar, das Toolset eignet sich sowieso nur für Demos und ist von der Pieke auf gebrochen. Es helfe Google mit der kommenden Version, die alles umreisst, was wir bislang kennen!
Doch warum wirkt Angular 2.0 wie eine große Entschuldigung seitens Google und als wehmütiger Versuch, jetzt alles richtig zu machen? Und warum bringt dieser Versuch wieder die Gemüter zum kochen? Sollte man Angular 1.x nun komplett in die Tonne werfen? Warum braucht’s wieder eine eigene Sprache und Tool-Chain mit AtScript, und warum sagt man ständig, AtScript sei keine eigene Sprache? Frage um Fragen und ein Thema nach dem anderen. In ihrer Mitte ein tapferer Jungentwickler namens Pascal Precht, der uns die Welt von AngularJS erklärt und aufzeigt, warum alles so katastrophal und verwirrend wirkt.
Apropos verwirrend: Wir finden die AngularJS Quellen für 1.x in diesem GitHub Repository, für Angular 2.x in jenem. Man erkenne den feinen Unterschied.
Zum Schluß noch ein kleiner Disclaimer: Wir bemühten uns redlichst, etwaige Vergleiche zu anderen und anderwertigen Frameworks zu vermeiden um entsprechenden Grundsatzdiskussionen aus dem Weg zu gehen, allerdings rutscht uns das eine oder andere Schlüsselwort in den Gesprächsverlauf rein. Seht es uns nach und erkennt die Anstrengung, den Fokus wieder auf Angular zu richten.
[01:13:50] Keine Schaunotizen
AngularJS: Login und Sicherheit
von unseren Kollegen bei AngularJS.de!
Integrating Web Components with AngularJS
Unser Gast beschreibt eine laut Eigenaussage „Hacky Solution“, wie man jetzt schon Web Components in AngularJS 1.3 verwenden kann. Also noch vor der 2.0er Revolution. Diese Erklärung gibt es auch in audiovisueller Darbietung samt Kollegin Carmen Popoviciu auf der letztjährigen NG Europe Konferenz
Moderne Web-Entwicklung mit AngularJS
Robin und Phil, die ihr schon vom Podcast kennen solltet, zeigen euch ausführlich eine Einleitung in die aktuelle Angular JS Version, die sie bei der Rhein Java User Group zum Besten gaben. Sehr detailliert und empfehlenswert, sowie eine gute Einleitung für die Workshops, die sie zusammen mit Peter geben.
Thoughtram
Apropos Workshop. Auch Gast Pascal zeigt euch die Vor- und Nachteile von Angular 1.x live und in Farbe. Buchbar auf dieser Seite
vivus.js
Themenwechsel. Animierte Strokes bei SVG, einfach steuerbar per Bibliothek. Vivus macht das für euch.
The origin of the tag
Schon etwas älter, nicht minder interessant: Wie ist eigentlich der Tag entstanden? Der Erfinder plaudert aus dem Nähkästchen. Spoiler: Entsteht so wie alle großartigen blöden Ideen.
1 hr 20 min
December 29, 2014Revision 202: Sicherheitslücken – DOM Clobbering, XSS via CSS, ES6 Fallen
Wir haben uns kurz vor Heiligabend den Mario Heiderich eingeladen, um über grauenvolle, abstruse und schier unlösbare Sicherheitslücken moderner Browser zu reden. Der richtige Stoff für besinnliche Weihnachtsstimmung und frohlockende Ausblicke ins neue Jahr!
Schaunotizen
[00:00:11] DOM Clobbering, XSS via CSS, Template Injection, etc.
Mario Heiderich, ehemaliger Webentwickler, heutiger Security-Experte, erzählt uns von den ganzen, dunklen Seiten der modernen Webentwicklung, die verheerende Schäden anrichten können, ohne das wir uns richtig wehren können. So beschreibt er aktuelle Sicherheitslücken in den Template Engines von AngularJS oder KendoUI und hält auch fest, dass diese Dinge gerne von den Bibliotheksherstellern auch mal auf die lange Bank geschoben werden (wie beispielsweise Frederic Hembergers jQuery Pull Request von „neulich“ zeigt). Es gibt Hilfestellungen, wie beispielswiese Marios DOMPurify, mit dem man Zeichenketten auf verdächtigen Code prüfen und gegebenenfalls bereinigen kann.
Es muss allerdings nicht immer JavaScript sein. Mit CSS kann man mit Hilfe der @-moz-document Regel und Regular Expressions im Firefox ganz einfach Session Token aus der URL klauen. Mario erklärt ausserdem, wie man die Paint-Zyklen der Browser und CSS Filter dazu ausnutzen kann, um auf bestimmte Zeichen zu schließen, die der Benutzer eingibt. Zukünftige Spaßquelle bieten SVGs im Allgemeinen und SVGs in Webfonts im Speziellen.
Ebenfalls lückenreich und angriffsanfällig ist der DOM. Mit In the DOM, no one will hear you scream gibt es einen mittlerweile sehr bekannten Talk von Mario, der uns das Prinzip des DOM Clobbering näherbringt. Der Abwärtskompatibilität von HTML sei es geschuldet, dass man derartige Dinge überhaupt durchführen kann.
Dass man allerdings auch mit kommenden Technologien allerlei Unfung anstellen kann, zeigt der Ausblick auf Template Strings in EcmaScript 6. Mario sieht sich in seiner Rolle für die nächsten Jahre auf jeden Fall beschäftigt.
Abhilfe gewünscht? Mario lässt uns nicht im Schneeregen stehen, sondern gibt auch ein paar hilfreiche Schutzhinweise. Für hundertprozentige Absicherung empfiehlt die Workingdraft Crew eine Ausbildung zum Reisbauer auf dem zweiten Bildungsweg.
Weitere Links zu den Themen, die besprochen wurden:
XSS CHallenge Wiki von Mario
Sicherheitslücken im Test auf html5sec.org
EcmaScript 6 Compatibilty Table
Mustache Security
Zu guter Letzt gibt es noch einige Hinweise auf themenbezogene Konferenzen.
[01:35:37] Keine Schaunotizen
HTTPS Mythen
Golem klärt auf, was es mit den herumschwirrenden HTTPS Gerüchten und Mythen tatsächlich auf sich hat.
Let’s make a Firefox Extension, the painless way
Ein knackiges Tutorial beschreibt, wie man Extensions für Firefox entwickelt.
Flexbox Adventures
Schon wieder ein Flexbox Tutorial? Ja! Dieses zeigt allerdings interaktiv und ausführlich, was es mit den Properties flex-grow, flex-shrink und flex-basis auf sich hat.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 39 min
December 29, 2014 Revision 202: Sicherheitslücken – DOM Clobbering, XSS via CSS, ES6 Fallen
Wir haben uns kurz vor Heiligabend den Mario Heiderich eingeladen, um über grauenvolle, abstruse und schier unlösbare Sicherheitslücken moderner Browser zu reden. Der richtige Stoff für besinnliche Weihnachtsstimmung und frohlockende Ausblicke ins neue Jahr!
Schaunotizen
[00:00:11] DOM Clobbering, XSS via CSS, Template Injection, etc.
Mario Heiderich, ehemaliger Webentwickler, heutiger Security-Experte, erzählt uns von den ganzen, dunklen Seiten der modernen Webentwicklung, die verheerende Schäden anrichten können, ohne das wir uns richtig wehren können. So beschreibt er aktuelle Sicherheitslücken in den Template Engines von AngularJS oder KendoUI und hält auch fest, dass diese Dinge gerne von den Bibliotheksherstellern auch mal auf die lange Bank geschoben werden (wie beispielsweise Frederic Hembergers jQuery Pull Request von „neulich“ zeigt). Es gibt Hilfestellungen, wie beispielswiese Marios DOMPurify, mit dem man Zeichenketten auf verdächtigen Code prüfen und gegebenenfalls bereinigen kann.
Es muss allerdings nicht immer JavaScript sein. Mit CSS kann man mit Hilfe der @-moz-document Regel und Regular Expressions im Firefox ganz einfach Session Token aus der URL klauen. Mario erklärt ausserdem, wie man die Paint-Zyklen der Browser und CSS Filter dazu ausnutzen kann, um auf bestimmte Zeichen zu schließen, die der Benutzer eingibt. Zukünftige Spaßquelle bieten SVGs im Allgemeinen und SVGs in Webfonts im Speziellen.
Ebenfalls lückenreich und angriffsanfällig ist der DOM. Mit In the DOM, no one will hear you scream gibt es einen mittlerweile sehr bekannten Talk von Mario, der uns das Prinzip des DOM Clobbering näherbringt. Der Abwärtskompatibilität von HTML sei es geschuldet, dass man derartige Dinge überhaupt durchführen kann.
Dass man allerdings auch mit kommenden Technologien allerlei Unfung anstellen kann, zeigt der Ausblick auf Template Strings in EcmaScript 6. Mario sieht sich in seiner Rolle für die nächsten Jahre auf jeden Fall beschäftigt.
Abhilfe gewünscht? Mario lässt uns nicht im Schneeregen stehen, sondern gibt auch ein paar hilfreiche Schutzhinweise. Für hundertprozentige Absicherung empfiehlt die Workingdraft Crew eine Ausbildung zum Reisbauer auf dem zweiten Bildungsweg.
Weitere Links zu den Themen, die besprochen wurden:
XSS CHallenge Wiki von Mario
Sicherheitslücken im Test auf html5sec.org
EcmaScript 6 Compatibilty Table
Mustache Security
Zu guter Letzt gibt es noch einige Hinweise auf themenbezogene Konferenzen.
[01:35:37] Keine Schaunotizen
HTTPS Mythen
Golem klärt auf, was es mit den herumschwirrenden HTTPS Gerüchten und Mythen tatsächlich auf sich hat.
Let’s make a Firefox Extension, the painless way
Ein knackiges Tutorial beschreibt, wie man Extensions für Firefox entwickelt.
Flexbox Adventures
Schon wieder ein Flexbox Tutorial? Ja! Dieses zeigt allerdings interaktiv und ausführlich, was es mit den Properties flex-grow, flex-shrink und flex-basis auf sich hat.
1 hr 39 min