CSP mit inspiredminds/contao-glightbox

[BugBuster]

inspiredminds/contao-glightbox (bzw. glightbox, liegt nicht an der Contao Variante) hat ein CSP Problem.

Den einen hatte ich als PR bei contao-glightbox eingereicht und wurde auch schon übernommen und released. (1.0.8)

Aber wenn man ein Bild anklickt und das geöffnet wird, mit Bildunterschrift, werden 2 Style Angaben an gemeckert. Leider zeigt mir der Browser nicht welche.
Also habe ich den zusätzlichen Quelltext durchwühlt und zwei gefunden, die ich auch gleich in die config.yaml entsprechend mit regex definiert habe.

style="max-height: calc(100vh - 85px)"
style="max-width: 745px;"

85px ist die Höhe von der Bildunterschrift, 745px die Breite des Bildes bei meiner Browser-Größe, die kann variieren.

Aber das kann ja nichts bringen, denn Contao bringt ja im Header nur hashes mit für alle gefundenen style Angaben die mit den Definitionen allowed_inline_styles matchen.
Nur, beim Generieren der Seite gibt es ja die beiden speziellen style Angaben ja noch gar nicht, die werden per JS ja erst auf Mausklick generiert.

Das scheint auch schon jemand anderes im Original gefunden zu haben:
https://github.com/biati-digital/glightbox/issues/579
und noch was, was mir nicht aufgefallen ist:
https://github.com/biati-digital/glightbox/issues/568

Auch wenn eine Lösung (für #579) angeboten wurde, es gibt noch kein PR dafür. Grund könnte sein, der Entwickler hat laut einen anderem Ticket geschrieben, das die PRs eh auf Hold liegen, da er seit längerer Zeit an Version 4 arbeitet.

Vielleicht hat ja ein JS Profi von uns verstanden was dort angedeutet wurde und kann das temporär für Contao beheben? (ich kann kein JS)

Ich habe noch eine schräge Idee im Hinterkopf und teste das derweil mal aus.

[BugBuster]

Was ich grad getestet habe.
config.yaml hat diese Einträge:

            max-height: 'calc\(100vh\s*-\s*\d{1,3}px\)'
            max-width: '\d{1,3}px'

Ich habe im Footer eingebaut:

<span style="max-height: calc(100vh - 85px)"></span><span style="max-width: 745px;"></span>

Nun sehe ich Browser leider sofort, das beide Regeln nicht freigegeben sind. Cache wurde natürlich gelöscht.
Warum greifen die nicht?
Auch mit Inhalt im Span geht es nicht, hätte ja sein können das Tags ohne Inhalt nicht beachtet werden.

[BugBuster]

Ah, Mist, Contao generiert das ja nur für Tiny, oder? Probier ich mal.

[BugBuster]

Verdammt, Contao generiert jetzt die passende Hashes, aber der Browser ignoriert diese wenn die per JS noch mal generiert werden.
Idee also futsch.

[Spooky]

Solange das ursprüngliche JavaScript via CSP erlaubt ist, sollte eigentlich auch element.style.<…> = '…' erlaubt sein: https://developer.mozilla.org/en-US/...0JavaScript%3A

[lbableck]

Das ist ja das Problem, es wird ....setAttribute('style', ... verwendet, statt ...style.... Das geht nicht mit CSP.

[Spooky]

Das muss dann einfach dort im Code geändert werden. Mach einfach den entsprechenden Pull Request (unabhängig davon ob er gemerged wird oder nicht) und patche es in deiner Projekt Instanz.

[BugBuster]

Ich habe bei mir lokal mal 5 Zeilen (2 für Bilder, 3 für Video) angepasst. Bisher passt das. Ich bin aber kein JS-ler, von daher nur als Anregung.
Und auch nur die js nicht in der min.js, zum testen die .js eingebunden.

diff --git a/public/js/glightbox.js b/public/js/glightbox.js
index 678f7cb..e187c6e 100644
--- a/public/js/glightbox.js
+++ b/public/js/glightbox.js
@@ -2874,8 +2874,8 @@
               var _slideTriggerNode$get;
               maxHeightValue = (_slideTriggerNode$get = slideTriggerNode.getAttribute('data-height')) !== null && _slideTriggerNode$get !== void 0 ? _slideTriggerNode$get : maxHeightValue;
             }
-            _imgNode.setAttribute('style', "max-height: calc(".concat(maxHeightValue, " - ").concat(descHeight, "px)"));
-            description.setAttribute('style', "max-width: ".concat(_imgNode.offsetWidth, "px;"));
+            _imgNode.style = "max-height: calc(".concat(maxHeightValue, " - ").concat(descHeight, "px)");
+            description.style = "max-width: ".concat(_imgNode.offsetWidth, "px;");
           }
         }
         if (video) {
@@ -2915,14 +2915,14 @@
               width: vwidth * _ratio,
               height: vheight * _ratio
             };
-            video.parentNode.setAttribute('style', "max-width: ".concat(vsize.width, "px"));
+            video.parentNode.style = "max-width: ".concat(vsize.width, "px");
             if (descriptionResize) {
-              description.setAttribute('style', "max-width: ".concat(vsize.width, "px;"));
+              description.style = "max-width: ".concat(vsize.width, "px;");
             }
           } else {
             video.parentNode.style.maxWidth = "".concat(videoWidth);
             if (descriptionResize) {
-              description.setAttribute('style', "max-width: ".concat(videoWidth, ";"));
+              description.style = "max-width: ".concat(videoWidth, ";");
             }
           }
         }

[BugBuster]

Bei Video, über Hyperlink, werden noch Daten von einem cdn nachgeladen, das ist blöd, da das wieder gegen mein csp verstößt.

https://cdn.plyr.io/3.6.12/plyr.js 
https://cdn.plyr.io/3.6.12/plyr.css
https://cdn.plyr.io/3.6.12/plyr.svg

...
Da müsste also noch viel mehr umgebaut werden, sofern man Video darüber machen will und nicht über das neue Video Element.

[Spooky]

cdn.plyr.io kannst du ja als Quelle erlauben ansonsten. Du kannst per config aber auch lokale Plyr Assets zur Verfügung stellen.

[zoglo]

Bei Video, über Hyperlink, werden noch Daten von einem cdn nachgeladen, das ist blöd, da das wieder gegen mein csp verstößt.

https://cdn.plyr.io/3.6.12/plyr.js 
https://cdn.plyr.io/3.6.12/plyr.css
https://cdn.plyr.io/3.6.12/plyr.svg

...
Da müsste also noch viel mehr umgebaut werden, sofern man Video darüber machen will und nicht über das neue Video Element.

CSP Verstöße sind ja eher etwas für die Library (Glightbox) die hier genutzt wird, das hat mit der Extension ja nur indirekt was zu tun.
Wenn deine CSP-Direktive nicht greifen und kein externes JS erlauben, dann musst du dir die Libraries entsprechend konfigurieren.

In der Readme gibt es eine Möglichkeit die plyr-Konfiguration anzupassen, das solltest du zuerst tun:
https://github.com/biati-digital/glightbox#video-player

[BugBuster]

Bringt alles nichts.
Als externe Domain freigeben geht nicht, weil das erst bei Mausklick nachgeladen wird, da greift dann die Regel nicht mehr. So wie bei dem Style Problem, wofür es aber eine Lösung gibt. (schon gefixt)
Die plyr.js und .css von eigener Domain laden lassen - über glighbox config definiert, geht zwar, aber dann lädt der intern doch wieder was nach aus dem cdn. Das hatte ich dann mal hart gepatcht, aber der Video Container bringt dann wieder Style Angaben mit die wieder nicht erlaubt sind.

Egal, ich brauche keine glightbox für Video, ich dachte nur, wenn ich beim Fix für Bilder schon dabei war, könnte ich das auch noch "schnell" mal angehen für Video.

[BugBuster]

Für Bilder mit aktivierter Zoom Option (default) sind noch zwei Zeilen zu fixen.

diff --git a/public/js/glightbox.js b/public/js/glightbox.js
index e187c6e..17e1ada 100644
--- a/public/js/glightbox.js
+++ b/public/js/glightbox.js
@@ -605,8 +605,8 @@
     }, {
       key: "zoomOut",
       value: function zoomOut() {
-        this.img.parentNode.setAttribute('style', '');
-        this.img.setAttribute('style', this.img.getAttribute('data-style'));
+        this.img.parentNode.style = '';
+        this.img.style = this.img.getAttribute('data-style') ? this.img.getAttribute('data-style') : '';
         this.slide.classList.remove('zoomed');
         this.zoomedIn = false;
         this.currentX = null;

[Spooky]

Bringt alles nichts.
Als externe Domain freigeben geht nicht, weil das erst bei Mausklick nachgeladen wird,

Das ist egal, was genau hast du denn nun in deinen CSP Direktiven eingetragen?

[BugBuster]

Normalerweise das, damit geht nichts von außen:

default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: https:; font-src 'self'

Das habe ich dann mal erweitert für js, css und svg nachladen:

default-src 'self'; script-src 'self' https://cdn.plyr.io/; style-src 'self' https://cdn.plyr.io/; img-src 'self' https://cdn.plyr.io/ data: https:; font-src 'self'

[Spooky]

Sollte dann passen. Was war die CSP Fehlermeldung bzgl. der cdn.plyr.io Ressourcen?

[BugBuster]

Kann heute Abend nochmal testen und schauen, aber im Prinzip dieselbe, als wäre die Domain Freigabe nicht enthalten. Cache wurde bei jeder Anpassung gelöscht, auch Browser.

[Spooky]

Kann heute Abend nochmal testen und schauen, aber im Prinzip dieselbe, als wäre die Domain Freigabe nicht enthalten.

Poste die genaue Fehlermeldung.