Skip to content

Draft: SVG problem

Jürgen Voskuhl requested to merge fix_svg_problem into main

Seit den Merges gestern erscheint auf der Seite https://docs.fitko.de/fit/fit-sb/ die eingebundene svg-Sitemap-Grafik schwarz. Um das Nutzererlebnis nicht zu beeinträchtigen, habe ich die CSP-Rule aus dem main Branch entfernt und in den Branch dieses MRs eingefügt.

Im Rahmen dieses MRs wird der Fehler analysiert und behoben.

Es handelt sich nicht um ein grundsätzliches Problem mit svg-Dateien: Die Seite https://docs.fitko.de/fit/fit-sb/processes/members/meetings/ enthält ebenfalls eine interaktive svg-Grafik, welche korrekt angezeigt wird. Das Problem kann ich (@OC000024143138) zudem in meiner lokalen Umgebung nicht reproduzieren (d.h. da wird auch die Sitemap-Grafik korrekt angezeigt)!

Eine weitere Merkwürdigkeit: Der Fehler tritt auf, wenn man auf der Startseite auf Föderales IT-Standardisierungsboard klickt oder wahlweise die Seite direkt aufruft.
Steigt man z. B. über diese Seite ein und kehrt von dort zur FIT-SB-Startseite zurück, indem man auf Föderales IT-Standardisierungsboard klickt (erster Link im Sidebar-Menü), wird die Sitemap-Grafik nunmehr problemlos angezeigt.

Nachdem die erste Vermutung in Richtung Tailwind als Ursache ging, lieferte eine weitergehende Analyse die CSP-Regeln als Ursache. Ich habe die daher aus dem main Branch entfernt, konkret diese Zeilen:

    <FilesMatch "\.(html|css|js)$">
        Header set Content-Security-Policy "default-src 'self'; img-src 'self' data:; script-src 'self' 'sha256-i73kd7kOyvsO1swfYOEO6BJ7iubFkFtQbUP+VpZPx34=' 'sha256-rbL1FS1QyKs7DuiTfaNIZuaoeW4c1vrW0bZFVGcIJtw=' 'sha256-pBkmluod9Ko4GzDfbWgKM/wxzujFXUdGVOePkwOQT+c='; style-src-attr 'self' 'unsafe-hashes' 'sha256-z1feagJIYQX5xSgilbQgdvBTP2Vm7MYfTpWz4KU5sxs=' 'sha256-hnO/FXXmZf4wdCRroOvzCibl0PiD7VTTA+VTv2brO84=' 'sha256-o5A58a8c40yEMDiK8vuT+XhzDig6INUxwaQT5T6IR9s='; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests"
    </FilesMatch>

Die Fehlermeldungen (aus der Browser-Console) lauten:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src-attr 'self' 'unsafe-hashes' 'sha256-z1feagJIYQX5xSgilbQgdvBTP2Vm7MYfTpWz4KU5sxs=' 'sha256-hnO/FXXmZf4wdCRroOvzCibl0PiD7VTTA+VTv2brO84=' 'sha256-o5A58a8c40yEMDiK8vuT+XhzDig6INUxwaQT5T6IR9s='". Either the 'unsafe-inline' keyword, a hash ('sha256-FYEr9RqA0U5kv9uPYTrL+msM2Ngn3aL5SrQ988AYMVs='), or a nonce ('nonce-...') is required to enable inline execution.
Edited by Jürgen Voskuhl

Merge request reports