Was ist ein Polyfill?
MDN definiert einen Polyfill als Code, meist JavaScript, der in älteren Browsern moderne Funktionen bereitstellt, die sie nicht selbst beherrschen. Der Trick: Der Polyfill bildet die offizielle Schnittstelle nach. Dein übriger Code merkt gar nicht, dass er mit einer Nachrüstung arbeitet.
Den Begriff prägte der Entwickler Remy Sharp 2009 beim Schreiben eines Buchs über HTML5, den erklärenden Blogbeitrag veröffentlichte er 2010. Das Wort spielt auf Polyfilla an, eine britische Spachtelmasse. Ein Polyfill füllt also die Lücke im Browser.
Laut MDN ist die eingebaute Lösung des Browsers immer schneller. Ein Polyfill ist deshalb eine Brücke auf Zeit, kein Dauerzustand.
Polyfill, Transpiler, Shim
- Transpiler wie Babel: schreibt neue Schreibweisen in alte um, etwa Pfeilfunktionen. Fehlende Bausteine wie Promise kann er so nicht ersetzen. Die kommen aus Polyfill-Bibliotheken wie core-js.
- Shim: korrigiert vorhandenen Code, oft mit eigener Schnittstelle. Ein Polyfill dagegen ahmt eine Schnittstelle nach, die fehlt.
- Ponyfill: setzt einen Standard um, ohne sich als dieser auszugeben. Er verändert nichts Globales im Browser.
- Feature Detection: prüft, ob der Browser eine Funktion kann. Oft entscheidet sie, ob ein Polyfill nachgeladen wird.
Brauchst du heute noch Polyfills?
Meist kaum. Seit dem Ende des Internet Explorer können Chrome, Edge, Firefox und Safari fast alles Gängige selbst. Orientierung gibt Baseline von web.dev: Eine Funktion gilt als breit verfügbar, wenn alle diese Browser sie seit 30 Monaten unterstützen.
Trotzdem schleppen viele Seiten Altlasten mit. Der Web Almanac 2024 zeigt:
Messwert, Handy
Wert
Seiten mit altem JS
67 %
Seiten mit core-js
41 %
JavaScript je Seite
558 KB
davon ungenutzt
206 KB
„Altes JS“ heißt: Umwandlungen oder Nachrüstungen, die moderne Browser nicht brauchen. Die ungenutzten 206 KB betreffen alles JavaScript, nicht nur Polyfills. Sie zeigen aber, wie viel Ballast unterwegs ist.
Der polyfill.io-Angriff 2024
polyfill.io war ein bequemer Dienst: eine Zeile Code, und der Server lieferte passende Polyfills für jeden Browser. Im Februar 2024 kaufte ein neuer Eigentümer Domain und Projekt. Der ursprüngliche Autor warnte damals schon, keine Website brauche diese Polyfills heute noch.
Case A · Lieferkette
Schadcode über cdn.polyfill.io, Juni 2024
100.000+
Websites laut Sansec
384.773
Hosts laut Censys
Mobile Besucher auf Wettseiten umgeleitet
Der Code griff nur zu bestimmten Zeiten und schonte Admins. Rund 237.700 der Hosts lagen bei Hetzner, laut Censys vor allem in Deutschland.
Case B · Folgen
Gegenmaßnahmen innerhalb weniger Tage
25.06.2024
Google sperrt Shop-Anzeigen
27.06.2024
Domain gesperrt
Google Ads für betroffene Shops gestoppt
Cloudflare schrieb Aufrufe auf eine sichere Kopie um, der Registrar setzte die Domain auf Halt.
Die Lehre geht über Polyfills hinaus: Jedes Skript von einer fremden Domain läuft mit allen Rechten auf deiner Seite. Wechselt die Domain den Besitzer, wechselt auch der Code.
Häufige Fehler
Fehler 1 · Polyfill-Dienste von fremden Domains einbinden
Bequem, aber du gibst die Kontrolle ab. Wenn du einen Polyfill brauchst, liefer ihn von deinem eigenen Server.
Fehler 2 · Alles auf Verdacht laden
Ein pauschaler Import von core-js packt Nachrüstungen für Browser ein, die keiner deiner Besucher nutzt. Laut web.dev werden umgewandelte Dateien meist größer als das Original.
Fehler 3 · Browserziele nie festlegen
Ohne klare Zielbrowser in Browserslist rechnet das Bauwerkzeug womöglich noch mit dem Internet Explorer. Die 67 % aus dem Web Almanac zeigen, wie verbreitet das ist.
Fehler 4 · Nie wieder aufräumen
Ein Polyfill ist zum Entfernen gedacht, sobald die Browser aufgeholt haben. Schau einmal im Jahr nach, was noch nötig ist.
So prüfst du deine Website
- Quelltext durchsuchen: Such nach „polyfill.io“, „bootcdn“ oder „staticfile“. Findest du etwas, raus damit.
- PageSpeed Insights laufen lassen: Der Hinweis „Legacy JavaScript“ meldet unnötige Nachrüstungen samt Größe.
- Mit dem Entwickler sprechen: Browserslist auf aktuelle Browser setzen und in Babel nur die Polyfills einbauen, die der Code nutzt.
Häufige Fragen
Brauche ich auf meiner Website noch Polyfills?
Meist nur wenige oder gar keine. Moderne Browser unterstützen die gängigen Funktionen selbst. Prüf mit PageSpeed Insights, ob unnötiger alter Code ausgeliefert wird.
Was ist beim polyfill.io-Angriff passiert?
Nach einem Eigentümerwechsel lieferte der Dienst im Juni 2024 Schadcode aus, der mobile Besucher auf Wettseiten umleitete. Sansec zählte über 100.000 betroffene Websites. Google stoppte Anzeigen für betroffene Shops.
Was ist der Unterschied zwischen Polyfill und Transpiler?
Ein Transpiler wie Babel schreibt neue Schreibweisen in alte um. Ein Polyfill rüstet fehlende Funktionen nach. In der Praxis arbeiten beide oft zusammen.
Machen Polyfills meine Seite langsamer?
Unnötige ja, weil der Browser mehr Code laden und verarbeiten muss. Laut Web Almanac 2024 liefern 67 % der Handy-Seiten alten Code an moderne Browser aus.
