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.
Feature Request
Is this feature request relating to an existing component? Please describe.
all
<= 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 ofdata:
to allow these images to load.By allowing a scheme-source of
data:
in the CSP, a threat actor can inject arbitrarydata:
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 ofdata:
in the CSP.Reference: MDN Web Docs CSP: img-src