OpenStreetMap tiles: “Access blocked” and “Referer is required”

Why the map tiles of tile.openstreetmap.org show “Access blocked” instead of the map, which web frameworks remove the Referer header by default, and how to fix it in the server, in Leaflet, OpenLayers and MapLibre, or by moving to another tile service.

What you see

Some or all tiles of the map show a yellow and black striped picture instead of streets:

403
Access blocked
Referer is required by tile usage policy of OpenStreetMap's volunteer-run servers: osm.wiki/Blocked

Other blocks say “App is not following the tile usage policy of OpenStreetMap's volunteer-run servers” or mention missing attribution. The 403 is part of the picture. The HTTP status of the tile itself can be 200, so the network tab of the browser may show no error at all. Look at the picture.

Often only a few tiles are blocked at first and the rest load, so the map looks patchy. Since spring 2026 many sites and tools that had shown these tiles for years started to get blocked tiles, among them Plotly image exports, Lizmap, Datasette and plugins of several content management systems.

Why the tiles are blocked

The tile servers of OpenStreetMap are run by volunteers, mainly for the map on openstreetmap.org and for editing. Other sites may use them under the tile usage policy. Among other things it says:

• Browsers must send a valid Referer header. A site must not set a Referrer-Policy that stops it.
• Apps outside a browser must send their own User-Agent with the name of the app.
• Tiles must be cached as the headers of the server say, or for at least 7 days, and requests must not send Cache-Control: no-cache.
• The OpenStreetMap credit must be visible on the map.
• No bulk downloading and no offline use: only tiles that a person is looking at.

A request that breaks a rule gets the blocked picture. There is no service guarantee, and the policy says that commercial services in particular should expect that access may be withdrawn at any time.

Find the cause

1. Open the developer tools of the browser, tab Network, and reload. Click a tile request to tile.openstreetmap.org.
2. Under Request Headers, look for Referer. If it is missing, the page or the browser removed it; read on below.
3. Check which policy the page sends:

curl -sI https://www.example.com/ | grep -i referrer-policy
curl -s  https://www.example.com/ | grep -i 'name="referrer"'

The values no-referrer and same-origin send no Referer to other sites, so they cause the block. These values work: strict-origin-when-cross-origin (the default of browsers), origin, origin-when-cross-origin, strict-origin and no-referrer-when-downgrade.

Fix the policy of the site

Most blocks come from a security setting that looks harmless. Two common frameworks send a policy without Referer by default:

Security plugins of WordPress and other systems, hosting panels and CDNs often have a Referrer-Policy setting as well. Search the response headers for it if you set none yourself. The policy strict-origin-when-cross-origin sends other sites only the address of your site, without the path of the page, so it gives away little.

Fix it for the map only

If the strict policy of the site should stay, set a policy for the tile requests alone. It overrides the policy of the page. Tested in Chromium with a page that sends Referrer-Policy: no-referrer:

// Leaflet 1.8 and later
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
  referrerPolicy: "strict-origin-when-cross-origin",
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// ol/source/OSM sends origin-when-cross-origin by default (OpenLayers 10.11);
// with ol/source/XYZ, set it yourself:
new TileLayer({
  source: new XYZ({
    url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
    referrerPolicy: "strict-origin-when-cross-origin",
    attributions: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  })
});

const map = new maplibregl.Map({
  container: "map",
  style: myStyle, // with a raster source for tile.openstreetmap.org
  transformRequest: (url) => url.startsWith("https://tile.openstreetmap.org/")
    ? { url, referrerPolicy: "strict-origin-when-cross-origin" }
    : { url }
});

Leaflet 1.9.4 is still the current release and sends no policy of its own, so the option is needed there. Versions older than 1.8 do not have it; update Leaflet or change the policy of the site.

Local files, notebooks and apps

• A page opened as a file (file:///…) has no address to send as Referer. The OpenStreetMap wiki suggests an X-Requested-With header with the name of your app (in Leaflet with a plugin such as leaflet-header, in MapLibre in transformRequest with headers), or serving the page from a local web server.
• Desktop and mobile apps, scripts and headless browsers (Plotly image export through Kaleido is one) must identify themselves: a User-Agent with the name of the app and a contact, or the headers above. Update the library first; Plotly, for one, has fixed its image export.
• Visitors whose privacy add-on or antivirus removes the Referer see blocked tiles on a correct site. They can add an exception for tile.openstreetmap.org; in Firefox, network.http.sendRefererHeader must be 2. You cannot fix this from the site, which is one more reason for sites with many visitors to use a tile service of their own.

Blocks that headers do not fix

Prefetching areas, offline maps, ignoring the cache and missing attribution get blocked as well, and no header changes that. A block of this kind ends once the app follows the policy. If the app needs offline maps, bulk downloads or heavy use, the policy asks you to run your own tiles or use another service built from OpenStreetMap data.

Moving to another tile service

For a website or app with steady traffic, a tile service with its own key and allowance is the sustainable choice; the OpenStreetMap data and its credit stay the same. With Leaflet, overpass.ch vector tiles need the maplibre-gl-leaflet plugin, which draws the vector map inside Leaflet. Your markers, popups and layers stay as they are:

<!-- in the page: maplibre-gl.css, maplibre-gl.js 5.x (UMD) and leaflet-maplibre-gl.js,
     see the code on /maps -->
// before
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 19 }).addTo(map);

// after
L.maplibreGL({
  style: "https://api.overpass.ch/v1/YOUR_KEY/maps/styles/light.json"
}).addTo(map);

The style shows the OpenStreetMap credit by itself. Create a key of the type “Maps only” and limit it to your website, so a copy of it is useless elsewhere. The full Leaflet, OpenLayers and MapLibre code is on the map tiles page.