Why leaflet needs to add invisible pixel on page?

How to reproduce

• Leaflet version I’m using: 1.3.1
• Browser (with version) I’m using: Chrome 65
• OS/Platform (with version) I’m using: Win10
• step 1: Enable Strict CSP policy
• step 2: Load the page with leaflet library and map.

What behaviour I’m expecting and which behaviour I’m seeing

No errors.

Leaftlet wants to add image like this

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

this is the code in minified file that adds it

    var Qt = Object.create || function() {
        function t() {}
        return function(i) {
            return t.prototype = i,
            new t
        }
    }()
      , ti = 0
      , ii = /\{ *([\w_-]+) *\}/g
      , ei = Array.isArray || function(t) {
        return "[object Array]" === Object.prototype.toString.call(t)
    }
      , ni = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
      , oi = 0
      , si = window.requestAnimationFrame || p("RequestAnimationFrame") || m
      , ri = window.cancelAnimationFrame || p("CancelAnimationFrame") || p("CancelRequestAnimationFrame") || function(t) {
        window.clearTimeout(t)
    }

Why? before I make an exception for this I want to know why leaflet needs to add invisible pixel.

[ghybs]

Hi,

A possible workaround would be to provide your own “empty” / dummy image that you can whitelist, and replace Leaflet’s emptyImageUrl value by the path to that image.

Unfortunately since Leaflet is built by rollup, it is much more difficult to modify this value while using the officially built file. You now have to override all methods that use this value (2x in GridLayer and 1x in TileLayer).

Live demo: https://plnkr.co/edit/vJc0QNqMozn6EQqypR9E?p=preview

It uses an “emptyImage.gif” file which path is referenced in the 3 overridden methods in modifyEmptyImageUrl.js script.

[techsin]

@cherniavskii that kinda defeats the purpose of csp policy though. But I do get that’s it’s a trade and an option.