Wer sich seine Content-Security-Policy (CSP) eingerichtet hat, bekommt keine SVG generierte Grafiken auf seinen Seiten angezeigt. Die Funktion wird in einigen CSS zum Beispiel zur Generierung des bekannten Hamburger-Menü-Icons verwendet.
Aus so einem Code
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
wird so eine Grafik
Das ist praktisch und kann sehr flexibel zum Einsatz kommen.
Dem steht jedoch eine sichere Content-Security-Policy entgegen
Das ist solche eine Beispiel-Richtlinie:
Die img-src Directive lässt data: nicht als Quelle zu. Man kann data: in seiner CSP zulassen, zum Beispiel img-src https://* data:;, dies gilt jedoch als unsicher und wird nicht empfohlen. Links dazu:
- developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src
- w3.org/TR/CSP3/#csp-directives
Stay blogged. 😎
Dein Matthias Düsi