JavaScript greift nicht mit Cloudflare und Rocket Loader

Das CDN Cloudflare kommt ja mit einigen technischen Finessen daher, die teilweise auf fast magische Weise Pageloads verkürzen und die Sicherheit erhöhen sollen. Der Rocket Loader ist eines dieser kleinen Wunder. Er sorgt dafür, dass alle JavaScript Assets über einen einzigen Request asynchron geladen werden und somit nicht das Rendern des HTML blockieren (asynchrones Laden wäre noch einmal ein Thema für sich, doch darum soll es hier nicht gehen). Wenn alles funktioniert bringt der Rocket Loader also einige Vorteile und in den meisten Fällen eine deutlich verkürzte Ladezeit mit sich. Allerdings kann er auch zu Problemen führen, wie wir gleich erläutern werden.

Einstellungen gehen über Cloudflare verloren

In unserem Fall sollte die TYPO3 Extension cookieconstent2 einen Hinweis zur Verwendung von Cookies einblenden. Die Standardeinstellungen der Extension (z.B. Layout und Text) können in einer Templatedatei namens Configuration.html überschrieben werden. Dies funktionierte wie erwartet, bis der Development Mode bei Cloudflare ausgeschaltet wurde. Ab diesem Moment wurden unsere Anpassungen einfach ignoriert und der Cookiehinweis mit den Standardeinstellungen angezeigt.

Die Fehlerursache war nicht gleich offensichtlich. Wie ist es möglich, dass Einstellungen nicht mehr greifen, sobald der Traffic über das CDN geleitet wird? Das Script, welches das gesamte Overlay im DOM einbindet, wurde nach wie vor geladen. Genauso war das zugehörige CSS verfügbar. Einzig unsere Änderungen wurden plötzlich ignoriert. Eine kurze Recherche zeigte, dass die im HTML-Template festgelegten Settings von TYPO3 in ein JavaScript Objekt cookieconent_options übertragen und das Script als Asset im HTML eingebunden wurde. Das Objekt war in der Konsole des Inspectors nur verfügbar, wenn der Traffic nicht über das CDN lief, obwohl die Datei weiterhin geladen wurde.

Einstellungen als Objekt in JavaScript

Einstellungen als Objekt in JavaScript

Fehlerhaftes JavaScript stört Cloudflares Rocket Loader

Die Lösung des Problems war nun nicht mehr kompliziert. Da die Einstellungen als HTML hinterlegt waren, war hier eine Zeile auskommentiert worden. Dieses Kommentar verursachte aber Probleme sobald es in das JavaScript Objekt übertragen wurde. Interessanterweise konnten Browser diesen Fehler offensichtlich ignorieren, denn das Plugin funktionierte vorerst wie gewünscht.

Sobald der Traffic nun über Cloudflare lief, wurden wie beschrieben alle Scripte über den Rocket Loader asynchron eingebunden. Erst dieser konnte das JavaScript scheinbar nicht interpretieren und die Einstellungen gingen somit verloren. Scheinbar ist der Rocket Loader etwas weniger nachsichtig was Fehler anbelangt, als beispielsweise Chrome oder Firefox.

Fazit

Viele Technologien, die unsere Websites immer schneller und performanter werden lassen, erhöhen gleichzeitig auch deren Komplexität, wodurch auch das Debugging immer komplizierter werden kann. Bei Problemen mit JavaScript ist es generell ratsam, zu testen ob diese auch vorliegen wenn die Website nicht über ein CDN aufgerufen wird. Denn je tiefer dieses in den Aufbau des DOM eingreift, desto höher ist auch die Wahrscheinlichkeit, dass einmal etwas schief läuft.

Links für mehr Info

Hier erklärt Cloudflare was der Rocket Loader genau macht: https://blog.cloudflare.com/56590463/

Auf Stackexchange wird in diesem Thread erläutert, wie das in etwa funktioniert: https://webmasters.stackexchange.com/questions/60276/how-does-cloudflares-rocket-loader-actually-work-and-how-can-a-developer-ensur

Rocket Icon by icons8.com

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.