This is an old revision of the document!

OpenStreetMap Access Blocked Referer is required

I was running a web page that includes a map made with the Leaflet JavaScript library and map tiles from the OpenStreetMap project. One day, suddenly, the map started to display some tiles broken, with the following image:

It turned out to be a simple URL issue for the tile server: while I was using the obsolete scheme http://, the current policies for tile server usage require to use the https://.

Also the referrerPolicy should be set as follow:

const osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
const osmAttrib = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
var osm = new L.TileLayer(osmUrl, {
    minZoom: 6,
    maxZoom: 18,
    attribution: osmAttrib,
    referrerPolicy: 'strict-origin-when-cross-origin'
});

Some tutorials on the net state that the following header can solve the problem, but it was not the case:

<html>
  <head>
    <meta name="referrer" content="no-referrer-when-downgrade">

Web References

Blocked tiles