getEmptyImage function causes CSP violation
Author: aniawala-autentiCreated Aug 22, 2025Updated Aug 22, 2025
Hi,
I am using "react-dnd-html5-backend": "^16.0.1"
I'm encountering a CSP (Content Security Policy) violation due to the use of a data: URI in the following function within the library:
let emptyImage: HTMLImageElement | undefined
export function getEmptyImage(): HTMLImageElement {
if (!emptyImage) {
emptyImage = new Image()
emptyImage.src =
'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
}
return emptyImage
}This approach violates strict CSP policies, specifically when img-src does not allow data: URIs, which is a common and recommended security practice. To fix this you could use an externally hosted transparent image.
Source: react-dnd/react-dnd