UI: Load svgs from files instead of from data tags

[viktorerlingsson]

WHAT is this pull request doing?

Load svg's from files instead of from data-tag to abide by Content Security Policy.

Fixes console error:

Refused to load the image 'data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23f7f5f2' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e' because it violates the following Content Security Policy directive: "img-src 'self'".

HOW can this pull request be tested?

Start LavinMQ, make sure the arrow in the vhost dropdown is shown. And usermenu button in mobile.

[ThomasSarlin]

Shouldn't the same error appear due to this line? :)

lavinmq/static/main.css

Line 1919 in fb03806

content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21' stroke='%23F7F5F2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z' stroke='%23F7F5F2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

[viktorerlingsson]

Shouldn't the same error appear due to this line? :)

lavinmq/static/main.css

Line 1919 in fb03806

content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21' stroke='%23F7F5F2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z' stroke='%23F7F5F2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

Hmm, yes, sort of. But that is never loaded because #usermenu-button is display:none, so there's no error. Maybe that can just be removed then @bengtmagnus ?

[carlhoerberg]

An alternative could be to modify the CSP: Content-Security-Policy: img-src data: avoids a http request for a tiny svg, but might have other downsides..

[viktorerlingsson]

An alternative could be to modify the CSP: Content-Security-Policy: img-src data: avoids a http request for a tiny svg, but might have other downsides..

Yeah, I think allowing data: might increase the risks for some XSS, so this felt like the safest option.

[carlhoerberg]

A third alternative could be to replace it with a utf8 character, if there's one similar enough

[carlhoerberg]

Eg. ˅ ("\u{2c5}")

[carlhoerberg]

Good! But let's fix all content: url() in the css as @ThomasSarlin mentioned while we're at it.

[bengtmagnus]

Yes! The #usermenu-button is because it is only visible on mobile. I can check and fix them all 👍