#3671·react-dnd

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:

bash
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.