data: URI scheme used to include SVG images

[mrrossmullen]

Feature Request

• I’ve read and understood the Contributing guidelines and have done my best effort to follow them.
• I’ve read and agree to the Code of Conduct.
• I’ve searched for any related issues and avoided creating a duplicate issue.
• I've searched the community forums to check for related issues or feature requests

Is this feature request relating to an existing component? Please describe.

• Component name: all
• Component version: <= latest

The Design-System-Components library makes use of the data: scheme to include specific SVG images, for example:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E %3Cpath fill='%23fff' d='M64 0l64 64-16 16-64-64'/%3E %3Cpath fill='%23fff' d='M64 0l16 16-64 64L0 64'/%3E%3C/svg%3E"

The use of the data: scheme in this way will prevent a strict Content Security Policy (CSP) from being applied to any service which relies on this library. The CSP must include the scheme-source of data: to allow these images to load.

By allowing a scheme-source of data: in the CSP, a threat actor can inject arbitrary data: URIs resulting in unintended content being displayed on the service using the library.

Do you have a suggestion for a new component?

We recommend that the library replaces the use of the data: scheme with an alternate method of including SVG images that do not require services using the library to allow the scheme-source of data: in the CSP.

Reference: MDN Web Docs CSP: img-src