5.3.x script-Tag im TinyMCE nicht korrekt

[theobald]

Hallo in die Runde,

ich verwende ein Cookie-Banner eines großen Anbieters. Das erfordet für die korrekte Funktion das Ersetzen der script Tags der Form

<script type="text/javascript"></script>

oder auch der Form

<script></script>

durch

<script type="text/plain" data-usercentrics="ServiceName"></script>

Soweit machen das ja fast alle Provider gleich.

Das spezifische Javascript befindet sich in einem angepassten Template des bekannten Katalogmanagers.

Im Template steht zwar type="text/plain", ausgespielt wird aber tyte="text/javascript" und alle zusätzlichen Attribute werden entfernt.

Das soll nicht sein. Wie kann man das beheben?

Was habe ich bisher versucht?

1. TinyMCE Template angepasst und extended_valid_elements: 'script[type,data-usercentrics]', ergänzt

1. Contao Einstellungen geändert, script-Tag Attribute data-usercentrics hinzugefügt

Das Attribute type wird jedoch weiterhin immer auf text/javascript zurückgesetzt und das Attribute data-usercentrics wird weiterhin entfernt. Im TinyMCE erscheinen beide attribute korrekt. Sie werden erst beim Ausspielen geändert.

Wo muss ich da noch ansetzen, um das gewünschte script Tag zu bekommen?

Beste Grüße vom
Theo

[Spooky]

Warum willst du innerhalb eines TinyMCE ein JavaScript einfügen?

Was genau meinst du mit "Katalogmanager"?

[theobald]

Was genau meinst du mit "Katalogmanager"?

https://catalog-manager.org/

Warum willst du innerhalb eines TinyMCE ein JavaScript einfügen?

Na ich habe ein Template des Catalo-Managers angepasst. Das ist wie ein event_full. An jedem Detail-Element des Manegers hängt eine Karte dran, die den Standort des Objekts zeigt und diese Karte wird mit

<script type"text/plain" data-usercentrics="Mapbox"> 
var Map.init({ options }) ....
</script>

initialisiert. Besser gesagt, sollte initialisiert werden. Das klappt aber leider nicht... weil die Attribute verschwinden... gefiltert werden...

[Spooky]

Ja - aber warum willst du das in einem TinyMCE eintragen? Mach dir dafür ein normales HTML Feld (ggf. mit ACE Editor).

[theobald]

OK - das habe ich aber noch nicht ganz verstanden... Wie bekomme ich dann das HTML-Feld in das Template hinein? Meinst Du über Insert-Tags? (Das habe ich tatsächlich noch nicht probiert - muss ich zugeben...)

[theobald]

OK InsertTags scheinen nicht geeigent... Da das Template seine Daten aus $this bekommnt und die Karte mit

<script>
map.init([$this->latitude, $this->longitude])...
</script>

initialisiert wird, kann ich den script-code leider nicht woanders hin auslagern...
Das Script muss im Template initialisiert werden.

[theobald]

Git es für dieses Problem also keine Lösung?

[Spooky]

Ich habe dein Problem noch nicht so recht verstanden. Warum schreibst du das nicht einfach direkt in das Template?

[theobald]

Ja das habe ich ja gemacht. Siehe oben...

Ich habe ein Template, nur mal so als Beispiel...

<div><?= $this->title ?></div>
<script>
var map.init([$this->longitude, $this->latitude]).render();
</script>

Zur korrekten initialisierung des Cookie-Banners muss nun der Dienst gekennzeichnet werden. Das geschieht wie folgt...

<script type="text/plain" data-usercentrix="ServiceName">
</script>

Contao oder TinyMCE entfernt nun alle Attribute aus script und ersetzt type durch "text/javascript" o.ä. Dadurch kann das Cookie-Banner das Script nicht mehr finden und blockiert den Inhalt.

Wichtig ist nun, dass ich Contao (hier 5.3) oder TinyMCE dazu überreden kann, meine Attribute an dieser Stelle nicht zu filtern!

das ist mir bisher mit allen o.g. Methoden nicht gelungen.

Die Frage war also: Wie kann ich das anstellen? Gibt es da eine Möglichkeit?

[Spooky]

Sorry, ich verstehe immer noch nicht was du meinst. Du sprichst einerseits von Templates, die du bearbeitest - und andererseits von TinyMCE, das passt nicht zusammen. Beschreibe dein Problem mal mit Screenshots, dann wird es vielleicht verständlicher.

[theobald]

Alles kein Problem. Ich denke, wir kommen der Sache schon näher. Also eines habe ich mir noch einmal angesehen. Der Texteditor zum Bearbeiten der Templates ist ACE und nicht TinyMCE. Das ist mein Fehler. Ich dachte, es wäre ein TinyMCE mit ausgeblendetem Menübar.

Also muss die Fragestellung wahrscheinblich lauten:

Wie kann ich den Template-Editor ACE dazu bringen, meine Atrribute im <script> nicht herauszufiltern?

Sorry für meine fehlerhafte Annahme.

[Spooky]

Auch da kann ich dein Problem nicht nachvollziehen.

Bist du als Admin eingelogged?

[theobald]

Ja, aber auch kein Problem. Ich schreibe gleich mal detailliert auf, was ich meine... dauert etwas... sorry...

[theobald]

Also ich verwende den Catalog-Manager und dessen Templates.
Den Catalog-Manager von Herrn Alexander Naumov muss man aber nicht kennen. Das Bundle arbeitet wie viele andere Contao-Bundles mit Templates. Egal ob per html oder Twig.

Sehr ähnlich ist die Arbeitsweise der Core-Bundles news oder events. Deswegen beziehe ich mir hier mal auf diese...
Diese verfügen über je ein modul_template, ein list_template für den Leser und ein detail_template (event_full oder news_full etc) für den Reader.

So auch beim Catalo-Manager.

Mein Listing listet nun alle Objekte auf, die im Catalog gespriechert sind. Das ist analog zum news_list oder event_list.
Klicke ich nun beispielsweise wie beim den Events oder News auf eine Nachricht oder ein Event in dieser Auflistung so gelange ich auf eine Detailseite, wo die News oder Events über meinen Reader mit den Templates news_full oder event_full bereitsgetellt werden.

Ich habe nun in den Templates eines dieser detail_templates (analog der Einzeldarstellung eines Events oder einer Nachricht) angepasst.

Dieses Template bearbeite ich unter Templates->Edit
Das sieht so aus:

screenshot-2024.10.08-16_39_49.png

Wenn man dieses Template so speichert, ist und bleibt das script-Tag unverändert im Template erhalten.

Jedoch wird am Frontend das Tag modifiziert ausgeliefert und zwar mit

<script type="text/javascript">
</script>

Das Attribute type wird umgeschrieben von "text/plain" nach "text/javascript" und das (jedes) Attribute data-*** wird entfernt.

Das geschieht auch dann, wenn man script als zulässiges Tag am BE einträgt und data-usercentrix als zulässiges Attribute.

Es wird dennoch umgeschrieben und entfernt.

Dieses Problem muss ich beheben.

In der Regel sollte das nicht so auftreten, denn fast jeder Privacy-Manager oder Cookie-Bar arbeitet auf diese Weise mit zusätzlichen data-Attributen. Das von mir entwickelte Bundle pdir/klaro-consent-manager macht das genauso.

[Spooky]

Jedoch wird am Frontend das Tag modifiziert ausgeliefert und zwar mit

Wie hast du das geprüft?

[theobald]

Na wie man das so prüft, indem ich in der Developer-Console den Content der Seite inspiziere. Außerdem muss ich es nicht prüfen, da mir das usercentrix-Javascript die Blockierung des Skriptes meldet, da es mein Skript-Tag aufgrund des fehlenden Attributes data-usercentrix nicht identifizieren kann. Es wird nur <script type="text/javascript"> ausgeliefert.

Ich habe den Script-Code in meinem Template zu Testzwecken modifiziert und folgendes geschrieben...

<script type="text/plain" data-usercentrix="ServiceName">
alert('Hier Kuckuck');
</script>

ausgeliefert wird

<script type="text/javascript">
alert('Hier Kuckuck');
</script>

und die alert() popt korrekt auf...

[Spooky]

Na wie man das so prüft, indem ich in der Developer-Console den Content der Seite inspiziere.

Das darfst du nicht machen. Du musst den echten Quelltext der Seite ansehen (view-source:).

[theobald]

OK. Ich vermute mal, wir missverstehen uns... aber das ist auch nicht so einfach zu erklären...

Ich arbeite mit dem neuesten Firefox und untersuche das Template und seine Komponenten am Frontend immer mit

RECHTSKLICK Element Untersuchen(Q)

es ist mir nicht bekannt (und auch nicht einsichtig) dass diese Funktion (bei deaktiviertem cache) nicht den aktuell ausgelieferten Content zeigen sollte...??

Selbst bei einem Page-Reload sehe ich den im Template augenblicklich veränderten Code. Warum sollte das bei script-Tags anders sein?

Ich sehe ja sogar mein eingefügtes alert() und ich sehe die Änderungen ebenfalls sofort, wenn ich es wieder gelöscht habe. Warum sollte das auf das script-Tag ausschließlich nicht wirken und nur dieses gecached werden? Das wäre mir eine neue Erfahrung!

nun gut - wie dem auch sei - diese Fragestellung führt uns etwas weit vom eigentlichen Problem weg.

Fakt ist, das Tag wird modifiziert ausgeliefert und ich möchte diese Modifikation unterbinden oder beeinflussen...

Aber wie das so ist (and so it goes...),

...ich werde mein bisheriges Vorgehen morgen nochmal genau nachstellen und schauen, ob ich in der Kette der Arbeitsschritte irgendwo einen Fehler gemacht habe. Das kann man ja nie wissen...

... soweit jedoch vielen Dank für Deine Unterstützung. Ich melde mich hier wieder, wenn ich alles nochmal sorgfältig geprüft habe...

[Spooky]

es ist mir nicht bekannt (und auch nicht einsichtig) dass diese Funktion (bei deaktiviertem cache) nicht den aktuell ausgelieferten Content zeigen sollte...??

Diese Ansicht zeigt dir den prozessierten DOM, nachdem der Browser das tatsächliche HTML geparsed hat, JavaScript gelaufen ist etc. Du siehst also die Ansicht, nachdem Usercentrics bspw. dein <script> bereits prozessiert hat - und somit das type="text/plain" entfernt bzw. zu type="text/javascript" geändert hat.

Um sicher zu gehen, dass deine Web Applikation das richtige HTML ausspielt, musst du auch den echten Quellcode analysieren.

nun gut - wie dem auch sei - diese Fragestellung führt uns etwas weit vom eigentlichen Problem weg.

Tut es nicht

[zoglo]

Ich arbeite mit dem neuesten Firefox und untersuche das Template und seine Komponenten am Frontend immer mit RECHTSKLICK Element Untersuchen(Q)

Das ist nicht korrekt, du musst den Seitenquelltext anzeigen, das geht auch mit Rechtsklick in dem modernen und neuesten Firefox und anderen Browsern.

[theobald]

Danke Spooky & zoglo, das ist ein wirklich stechendes Argument! Das leuchtet mir ein und ich habe es bisher nicht beachtet. ...muss ich mir genauer ansehen.

!Nochmals vielen Dank!

[theobald]

Ich habe es nochmal eingehend getestet - und habe den Fehler gefunden!

Es liegt tatsächlich nicht am script-Tag. Die wichtige Bibliothek leaflet.js wurde gar nicht geladen, was letztlich die Ursache für alle weiteren Fehler war. Also vielen Dank für Eure Unterstützung! Ich habe wieder wichtige Sachen dazugelernt!