- The note on whitelisting the data protocol which is referenced says
data: Allows data: URIs to be used as a content source. This is insecure; an attacker can also inject arbitrary data: URIs. Use this sparingly and definitely not for scripts.
This is not in a part specific to the risks of data URIs in images, and I have not seen any substantive evidence that data URIs in images can execute code in a modern browser any respect, never mind XSS a page.
<embed> elements, or a direct part of the host DOM i.e.
MDN calls out explicitly that
- External resources (e.g. images, stylesheets) cannot be loaded, though they can be used if inlined through data: URIs.
:visited-link styles aren't rendered.
- Platform-native widget styling (based on OS theme) is disabled.
- It doesn't appear to be possible to specify a MIME as part of the
data: protocol whitelisting statement as suggested as a possible mitigation. The only content security policy directive I've seen able to restrict MIME type is
plugin-types, which restricts only for
<embed> (see general CSP docs).
I will agree with the accepted answer in the respect that if you don't have to use
data-uris, and can do so with little pain, it's easier to just keep your CSP and not use them. However, if you're working with images at all, that is usually a huge pain.