Content Security Policy vs Base64 Images data:image/svg+xml
Posted: Sun Jan 03, 2021 7:54 pm
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
(this code would generate the Hamburger Menu)
Replace with
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
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 ")
Replace with
Code: Select all
background-image: url ("/templates/YOURTEMPLATE/img/menu_icon.png")
You can take the menu graphics from here, for example
https://de.wikipedia.org/wiki/Datei:Hamburger_icon.svg