Working Draft

Für diese außerplanmäßige Bonusfolge haben wir uns mit unserem Gast Hans-Christian Otto zusammengesetzt, um über die kritischen Sicherheitslücken in PHP zu sprechen, die unter dem Namen PHP2Shell für Aufsehen sorgen. Gemeinsam schauen wir uns an, wie die Schwachstellen in der PHP-Runtime funktionieren, warum sie so gefährlich sind und weshalb ihre Entdeckung und Veröffentlichung für so viel Aufregung gesorgt haben.

Dabei geht es uns nicht nur um die technischen Hintergründe und die Rolle von KI bei der Suche nach Sicherheitslücken. Wir sprechen auch über die Menschen, die solche Probleme in Open-Source-Projekten beheben müssen, über den Umgang mit Sicherheitsmeldungen und über die Frage, wer eigentlich die Verantwortung für die Finanzierung kritischer Software-Infrastruktur trägt.

Shownotes

[00:01:05] PHP2Shell: Kritische Sicherheitslücken in PHP

Wir beginnen mit den technischen Hintergründen von PHP2Shell und klären, warum die Schwachstellen nicht etwa in WordPress, TYPO3 oder anderen PHP-Anwendungen stecken, sondern in der PHP-Runtime selbst. Wir besprechen die Möglichkeiten zur Remote Code Execution, die potenziellen Folgen für Datenbanken und sensible Nutzerdaten sowie die Frage, welche Installationen tatsächlich angreifbar sind. Außerdem rekonstruieren wir den ungewöhnlichen Ablauf der Veröffentlichung: von den ersten Entdeckungen durch KI-gestützte Sicherheitsanalysen über vorzeitig bekannt gewordene Informationen bis zu den kurzfristig koordinierten Sicherheitsupdates. Dabei diskutieren wir auch die öffentliche Berichterstattung, die unter anderem heise online und Golem aufgegriffen haben.Anschließend beschäftigen wir uns mit der Rolle künstlicher Intelligenz bei der Entdeckung von Sicherheitslücken. KI-Systeme finden zunehmend auch Fehler, die über Jahre unentdeckt geblieben sind. Das ist einerseits ein Gewinn für die Sicherheit, andererseits stellt es die Maintainer von Open-Source-Projekten vor erhebliche Herausforderungen. Wir sprechen über die steigende Zahl an Security Reports, die aufwendige Prüfung vermeintlicher Schwachstellen und die begrenzten Ressourcen der Projekte. Der Bericht der PHP Foundation gibt uns Einblicke in die Arbeit hinter den Sicherheitsupdates. Wir diskutieren außerdem, wie angemessen die öffentliche Alarmierung bei solchen Sicherheitslücken ist und was passiert, wenn KI-gestützte Sicherheitsforschung künftig immer häufiger vergleichbare Funde liefert.

Schließlich richten wir den Blick auf die Finanzierung und langfristige Absicherung kritischer Open-Source-Infrastruktur. Am Beispiel der PHP Foundation und ihrer öffentlich einsehbaren Finanzierung diskutieren wir, wie wenig Geld teilweise hinter Software steckt, von der ein erheblicher Teil des Internets abhängt. Wir betrachten die Beiträge großer Unternehmen und die Rolle der staatlich finanzierten Sovereign Tech Agency, die auch andere grundlegende Projekte wie cURL und FFmpeg unterstützt. Zum Schluss kommen wir noch einmal auf die PHP-Sicherheitsupdates zurück und sprechen über die praktischen Herausforderungen koordinierter Releases, die Verteilung von Patches und den Umgang mit vorab informierten Unternehmen.

Links

Sovereign Tech Agency auf Wikipedia

Überblick über die staatliche Initiative und die zahlreichen Open-Source-Projekte, die sie finanziell unterstützt.

AI Just Found a Bug That Puts up to 70% of the World’s Websites at Risk

Artikel des Wall Street Journal über die Entdeckung der PHP-Sicherheitslücken mithilfe künstlicher Intelligenz und ihre potenzielle Tragweite.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Wir schauen uns in dieser Revision eine Reihe neuer und neuerdings breit verfügbarer Browser-Features an. Diesmal geht es fast ausschließlich um HTML und CSS: von 3D-Modellen und 360-Grad-Bildern über bessere Responsive Images bis zu neuen Möglichkeiten für Farben, Layout und Typografie.

Dabei landen wir zwischendurch bei VR-Brillen, progressiven Bildvorschauen, teurem Arbeitsspeicher und der Frage, warum moderne KI-Webseiten eigentlich alle gleich aussehen.

Shownotes

[00:01:49] <model> und 3D im Browser

Safari bekommt mit <model> ein HTML-Element zum nativen Einbetten von 3D-Modellen. Ähnlich wie bei <picture> oder <video> lassen sich unterschiedliche Quellen und ein statisches Bild als Fallback angeben. Wir überlegen, wo das jenseits von Apples VR- und AR-Welt praktisch werden könnte, etwa bei Produktansichten in Shops, Modellbibliotheken oder einfachen 3D-Previews, für die man dann nicht gleich Three.js oder WebGPU auffahren muss.

[00:12:50] <img controls>

Auch das controls-Attribut für Bilder kommt aus Safari. Anders als zunächst von manchem vermutet, soll es nicht primär dazu dienen, animierte GIFs anzuhalten, sondern unter anderem die Navigation in 360-Grad-Bildern ermöglichen. Das wäre ein einfacher nativer Weg, solche Aufnahmen direkt als Bild in eine Webseite einzubauen.

[00:16:26] CSS Image Animation

Für die Kontrolle animierter Bilder existiert stattdessen die CSS Image Animation Specification. Mit image-animation könnten Animationen etwa gestoppt werden, was sich insbesondere zusammen mit prefers-reduced-motion anbietet. Wir diskutieren allerdings auch, wie relevant klassische animierte Bildformate heute noch sind, nachdem viele vermeintliche GIFs technisch längst Videos sind.

[00:22:05] Speicherpreise, HBM und alte Hardware

Ein kurzer Ausflug führt uns von hochauflösenden Videos zu den aktuellen Preisen für RAM, SSDs und andere Hardware. Wir sprechen über chinesische Speicherhersteller und erinnern uns an AMDs Radeon R9 Fury, die bereits 2015 HBM-Speicher verwendete. Unsere Hoffnung: Wenn neue Hardware teuer bleibt, müssen wir eben wieder mehr aus der vorhandenen herausholen.

[00:29:06] contrast-color()

Mit contrast-color() steht uns inzwischen browserübergreifend eine CSS-Funktion zur Verfügung, die zu einer gegebenen Farbe Schwarz oder Weiß als kontrastierende Farbe auswählt. Wir sprechen über den zugrunde liegenden WCAG-Kontrast und darüber, dass die frühere Idee hinter color-contrast() ambitionierter war: Aus einer Liste möglicher Farben sollte eine ausreichend kontrastreiche ausgewählt werden. Mit modernen CSS-Farbfunktionen wie color-mix() lässt sich das heutige Ergebnis immerhin weiterverarbeiten, beispielsweise um statt reinem Schwarz oder Weiß eine zur eigenen Farbpalette passende Variante zu erzeugen.

[00:36:08] Typed attr()

Die CSS-Funktion attr() wird deutlich nützlicher: Attributwerte lassen sich typisieren und damit beispielsweise als Länge oder Farbe in beliebigen CSS-Properties einsetzen, statt wie früher im Wesentlichen auf content beschränkt zu sein. Firefox und Chrome unterstützen das bereits, Safari Technology Preview ebenfalls. Wir verweisen dazu auf Kevin Powells Vortrag „CSS is eating JavaScript“ vom CSS Day.

[00:39:43] sizes=“auto“

sizes="auto" ist nun in allen Browsern verfügbar und vereinfacht Responsive Images insbesondere bei wiederverwendbaren Bildkomponenten, deren tatsächliche Darstellungsgröße im Voraus schwer anzugeben ist. Bei lazy geladenen Bildern kennt der Browser das Layout bereits, bevor er die passende Ressource auswählt, und kann deshalb die tatsächliche Bildgröße selbst bestimmen. Damit bleibt die manuelle Größenangabe vor allem für Bilder relevant, die früh geladen werden müssen.

[00:42:56] Gap Decorations

Chrome unterstützt Gap Decorations für Layouts mit Gaps, unter anderem Grid, Flexbox und Multicolumn. Damit lassen sich die Zwischenräume zwischen Zeilen oder Spalten direkt dekorieren, statt dafür Borders und zusätzliche Layout-Tricks einzusetzen. Für andere Browser ist das zunächst Progressive Enhancement.

[00:45:55] Progressive Bildvorschauen

Wir streifen Überlegungen zu nativen niedrig aufgelösten beziehungsweise weichgezeichneten Bildvorschauen, die später durch das vollständig geladene Bild ersetzt werden. Dabei geht es auch um die Wiederbelebung des früheren lowsrc-Ansatzes. Patrick Brosset beschreibt aktuelle Überlegungen dazu, während Jake Archibald ausführlich auf bestehende und mögliche zukünftige Verfahren für Progressive Image Rendering eingeht.

[00:52:31] flex-wrap: balance und bessere Typografie

An alog zu text-wrap: balance soll flex-wrap: balance dafür sorgen, umgebrochene Flex-Items ausgewogener auf die entstehenden Zeilen zu verteilen. Von dort kommen wir zu kleinen CSS-Helfern für bessere Typografie: text-wrap: balance für Überschriften, text-wrap: pretty für Fließtext und hyphenate-limit-chars, mit dem sich unter anderem Mindestwortlängen und die Zahl der Zeichen vor und nach einer Trennstelle bestimmen lassen.

[00:55:12] Performative UI

Mit Performative UI schauen wir uns eine Parodie auf die inzwischen ziemlich einheitliche Designsprache von KI-Webseiten an. Die React-Komponenten liefern typische Versatzstücke wie Gradient-Überschriften, animierte Counter und Statusanzeigen gleich fertig mit. Für uns Anlass für die Frage, ob heutige Design-Spielereien irgendwann genauso gewöhnlich werden wie runde Ecken nach der Einführung von border-radius.

[00:55:33] column-height

Zum Abschluss geht es um column-height, das derzeit in Chrome unterstützt wird und Multicolumn-Layouts für lange Inhalte praktikabler machen soll. Statt wenige extrem lange Spalten zu erzeugen, lässt sich ihre Höhe begrenzen. Der Inhalt fließt zunächst durch die nebeneinanderliegenden Spalten und anschließend in eine weitere Reihe von Spalten. Dadurch muss man beim Lesen nicht mehr bis zum Ende einer langen Spalte scrollen und anschließend wieder ganz nach oben zur nächsten springen.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Wir sprechen mit Golo Roden, Gründer von The Native Web (The Native Web auf YouTube), diesmal nicht über Node.js, Event Sourcing oder Domain-Driven Design, sondern über Konferenzen. Golo war bereits in den Revisionen 160, 314 und 456 bei uns zu Gast und bringt inzwischen auch reichlich Erfahrung als Konferenzveranstalter und Speaker mit.

Anlass für unser Gespräch ist Golos Heise-Artikel „Die beste Konferenz meines Lebens und was sie anders gemacht hat“ über den IT Business Summit. Wir überlegen gemeinsam, was eine Konferenz zu einem besonderen Erlebnis macht und warum dafür nicht nur gute Vorträge, sondern vor allem viele bewusst gestaltete Details entscheidend sind.

Shownotes

[00:01:06] Was macht eine richtig gute Konferenz aus?

Golo erzählt zunächst von seinem Weg als Entwickler, Berater und Konferenzveranstalter. Mit The Native Web war er an der Entstehung der enterJS beteiligt und veranstaltet inzwischen mit der tech:lounge Live! eine bewusst kleine Konferenz mit etwa 60 bis 80 Personen. Statt ein möglichst breites Programm über einen Call for Papers zusammenzustellen, wird dort zunächst ein Thema gewählt und anschließend überlegt, welche Vorträge in welcher Reihenfolge einen sinnvollen roten Faden ergeben. Danach werden passende Speaker gesucht. Wir sprechen darüber, warum Konferenzen mehr bieten müssen als Informationen, die sich ebenso gut in Videos vermitteln lassen, und warum insbesondere kleinere Veranstaltungen gute Voraussetzungen dafür bieten, Begegnungen und gemeinsame Erlebnisse zu schaffen.

Am Beispiel des IT Business Summit beschreibt Golo, wie sich viele kleine Entscheidungen zu einem besonderen Gesamterlebnis addieren können. Das beginnt mit einem gemeinsamen Abendessen für Speaker und Teilnehmende, einer bewusst gewählten Location und einer Sitzordnung, bei der Menschen gezielt miteinander in Kontakt gebracht werden. Am nächsten Morgen gibt es dadurch bereits bekannte Gesichter und erste Anknüpfungspunkte. Auch das Programm wird inszeniert: Eine interaktive Eröffnung bringt die Teilnehmenden miteinander ins Gespräch, eine gut vorbereitete Moderation führt durch den Tag und Speaker werden hinter der Bühne vorbereitet, statt mit Notebook und Kabeln vor dem Publikum auf ihren Auftritt zu warten. Technik, Moderation und Ablauf greifen dabei so ineinander, dass sich sowohl Vortragende als auch Publikum wertgeschätzt fühlen. Selbst das typische Tief nach der Mittagspause wird bewusst durchbrochen.

Wir kommen immer wieder auf denselben Gedanken zurück: Eine gute Konferenz überlässt Gemeinschaft und Atmosphäre nicht einfach dem Zufall. Veranstalter können Situationen schaffen, in denen Menschen leichter miteinander ins Gespräch kommen, Speaker und Publikum nicht voneinander separieren und Details wie Location, Essen, Pausen oder Technik ebenso ernst nehmen wie das Vortragsprogramm. Bei der tech:lounge Live! gehört dazu beispielsweise bewusst hochwertiges, komplett veganes Catering. Wir vergleichen diese Erfahrungen mit anderen kleineren Veranstaltungen und sprechen über die besondere Atmosphäre, die etwa die SmashingConfs, die beyond tellerrand oder die Fronteers Dark Mode schaffen können. Gerade bei überschaubaren Teilnehmerzahlen lässt sich vieles persönlicher gestalten und es wird möglich, dass aus einzelnen Details am Ende genau jene schwer greifbare „Magie“ entsteht, wegen der uns eine Konferenz noch Jahre später in Erinnerung bleibt.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/