Page 1 of 1

Content Security Policy vs Base64 Images data:image/svg+xml

Posted: Sun Jan 03, 2021 7:54 pm
by Matthias2
Those who have configured their content security policy cannot use SVG-generated Base64 graphics, such as the well-known "Hamburger Menu" in the Bootstrap4 Theme, for example.

Allow "data:" as an exception?
Allowing "data:" in the img-src directive is considered unsafe: See also: ... cy/img-src

Use your own graphic instead
Using the example of the Bootstrap4 Theme:


Code: Select all

background-image: url ("data: image / svg + xml; charset = utf8,% 3Csvg viewBox = '0 0 30 30' xmlns = 'http: //'%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 ")
(this code would generate the Hamburger Menu)

Replace with

Code: Select all

background-image: url ("/templates/YOURTEMPLATE/img/menu_icon.png")
The code is not that fancy and flexible, but more secure.

You can take the menu graphics from here, for example