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

[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: https://developer.mozilla.org/en-US/doc ... cy/img-src

https://www.w3.org/TR/CSP3/#csp-directives

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

search

Code: Select all

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 ")

(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
https://de.wikipedia.org/wiki/Datei:Hamburger_icon.svg