MutationObserver im Einsatz: Dynamische Link-Blockade für externe CDNs
Bevor Sie mit dem Lesen beginnen, hier einige nützliche Hinweise und Werkzeuge:
Entdecken Sie weitere nützliche Links, unser Archiv und den aktuellen Livestream in der Speziallink-Sektion rechts.
Beitrag vorlesen lassen (öffnet Popupfenster)
Hinweis zur Nutzung von Künstlicher Intelligenz (KI): Bei der Erstellung einiger Inhalte auf dieser Website, einschließlich dieses Artikels, kommt KI unterstützend zum Einsatz. Ihre Transparenz ist uns wichtig:
Dieser Artikel wurde KI-unterstützt erstellt, basierend auf menschlicher Konzeption und finaler Redaktion. Erfahren Sie hier mehr über unseren Prozess.
Weitere allgemeine Details zu unserem transparenten Umgang mit KI finden Sie hier (öffnet Popup).
Und jetzt viel Freude beim Weiterlesen!
In modernen Webarchitekturen werden Stylesheets selten ausschließlich im statischen HTML-Header deklariert. Insbesondere bei komplexen WordPress-Installationen injizieren AJAX-Calls, Lazy-Loading-Bibliotheken oder komplexe Themes nachträglich DOM-Knoten, die auf Drittanbieter-Ressourcen verweisen. Ein herkömmliches Bereinigungsskript, das lediglich beim Event DOMContentLoaded ausgeführt wird, greift in solchen Fällen zu spät. Bei Studio Enns setzen wir daher auf eine kontinuierliche Überwachung der Dokumentenstruktur mittels der JavaScript-API MutationObserver.
Der Observer wird unmittelbar im Kopfbereich initialisiert und auf document.documentElement mit den Flags childList: true und subtree: true registriert. Sobald ein Plugin versucht, einen neuen <link>-Tag einzuschleusen, analysiert der Callback die Zieladresse (href). Enthält diese Verweise auf Google Fonts oder verbundene CDN-Ressourcen, wird das Element noch vor der Ausführung des Netzwerk-Requests aus dem Baum entfernt (node.remove()). Die abgefangenen URLs werden im Array gesichert, wodurch die Integrität der Seite vollständig erhalten bleibt, ohne dass es zu Darstellungsfehlern oder Skriptabbrüchen kommt.
Dieser Mechanismus fungiert wie eine clientseitige Firewall direkt im Browser des Besuchers. Ergänzt wird die Lösung durch unseren internen Prüfmechanismus fonts_check_advanced-plus-v2.php, mit dem wir automatisierte Scans über alle Unterverzeichnisse fahren. Auf diese Weise erreichen wir auf WordPress-Seiten die gleiche strikte Trennung von Drittanbieter-Ressourcen, wie sie in unseren Typo3-Instanzen unter /CMS/tuepo3/de und Drupal-Instanzen unter /CMS/drupal/node/9 von Haus aus etabliert ist.
Hinterlasse jetzt einen Kommentar