I recently delved into the wonderful world of securing websites. I'm using letsencrypt to generate my certificates and also adding some headers in my nginx config. The issue I've noticed has to do with inline SVGs, or more specifically, images defined in CSS with a "data" scheme.

background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink…%23f7f7f7' /><rect y='40' width='50' height='10' fill='%23f7f7f7' /></svg>");



With no CSP set, this loads completely fine. When I have CSP set to the following, it loads fine in desktop Chrome but fails to load in mobile Chrome and mobile Firefox:

add_header Content-Security-Policy "default-src https:";



I have to switch my policy to the following for it to work universally:

add_header Content-Security-Policy "default-src https: 'unsafe-inline' 'unsafe-eval'; img-src 'self' data:";



So I am wondering if there is a reason for the discrepancy between desktop browsers and mobile browsers when dealing with CSP? I would expect that the policy would be adhered to on all browsers, not ignored or only loosely adhered to by some.