rigacci.org

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== OpenStreetMap Access Blocked Referer is required ======

I was running a web page that includes a map made with the **[[https://leafletjs.com/|Leaflet]]** JavaScript library and map tiles from the **[[https://www.openstreetmap.org/about|OpenStreetMap]]** project. One day, suddenly, the map started to display some tiles broken, with the following image:

{{.:osm:openstreetmap-access-blocked-referer-is-required.png?direct&280|OpenStreetMap Access Blocked Referer is required}}

It turned out to be a simple URL issue for the tile server: while I was using the obsolete scheme **%%http://%%**, the current **[[https://operations.osmfoundation.org/policies/tiles/|policies for tile server usage]]** require to use the **%%https://%%**.

Also the **referrerPolicy** should be set as follow:

<code javascript>
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'
});
</code>

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

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

===== Web References =====

  * **[[https://wiki.openstreetmap.org/wiki/Blocked_tiles|Blocked tiles]]**
  * **[[https://operations.osmfoundation.org/policies/tiles/|Tile Usage Policy]]**