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:


<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; frame-ancestors 'none'; child-src 'none';">

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