Hello,

As a developper, I now have to work on an existing application with a setup of leaflet using OSM that is already in place. The application is displaying a map on a page (client side application using Angular). If I deploy the code somewhere, the map is working fine. But during the development phase, the project runs in local (served on localhost:4200). But in local the map does not load and I can see many calls failing in the network tab of the debugger. I can see that the app can't load tiles because it gets an HTTP 403 forbidden as a reponse.

Below you can find a example of a call done for a tile that is failing:

curl 'https://a.tile.openstreetmap.org/18/134243/87922.png' \
-H 'authority: a.tile.openstreetmap.org' \
-H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36' \
-H 'accept: image/avif,image/webp,image/apng,image/svg+xml,image/,/*;q=0.8' \ -H 'sec-fetch-site: cross-site' \
-H 'sec-fetch-mode: no-cors' \
-H 'sec-fetch-dest: image' \
-H 'referer: http://localhost:4200/' \
-H 'accept-language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7' \
--compressed

After some more investigation I found that in local it works on Safari but not on Chrome. So the problem seems to come from headers added by the browser.

UPDATE 1:
On chrome I can retrieve a tile if the referer if different than localhost.
On Safari it works even with referer is equal to localhost.
It seems to be related to user-agent and/or referer.

I have the impression that OSM is validating those 2 headers: referer and user-agent
If this statement is correct:

  • Chrome user agent is not accepted
  • localhost referer is not accepted

Chrome
version used: Version 99.0.4844.74 (Build officiel) (x86_64)
user-agent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36"

Safari
version used: Version 15.3 (17612.4.9.1.8)
user-agent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.3 Safari/605.1.15"

Do you think this is a normal behavior ? If OSM need one of those 2 headers to be validated on the server side, I'm not getting why it does not reconize Chrome user-agent as a valid one. Am I missing something ?

asked 16 Mar, 15:39

X4V1PXS's gravatar image

X4V1PXS
11113
accept rate: 0%

edited 16 Mar, 16:51

2

It's unclear exactly what you are trying to do and where localhost fits in?

Normally a leaflet map would use localhost if there are tiles being served locally. Do you believe that you are doing that?

(16 Mar, 16:35) SomeoneElse ♦

I'm working on a projet as a developper. During the development phase, the project runs in local (served on localhost:4200). Leaflet is set up to have a map on a page. It works everywhere but not in local. After some investigation I saw that it's due to 2 headers: user-agent and/or referer. I added more details as an update in the original post. If something is not clear, please tell me and I'll add all the needed informations.

(16 Mar, 16:44) X4V1PXS
2

Now just look at the other side. The OWG has to try to block users that are not following the Tile Usage Policy and overusing the systems. The problem is: some of them just fake user-agent and referrer, therefore they'll have to block those combinations (right now it's maybe localhost as referrer + Chrome as User-Agent) that are used by bad actors, which might result in false positives while blocking, so this may happen anytime. Works today, stops tomorrow (the same would happen if e.g. Fastly would stop sponsoring their CDN resources for OSM). But please remember: the OWG is working on this voluntarily in their free time for the OSM project. So if the application is a project for work, it's best to find a reliable tile provider (when you pay someone money, you have someone to complain to if sth. is not working). If the project is just for fun, you may think about setting up your own tileserver (see https://www.switch2osm.org for a guide), which will cost time (and server resources=money) as well.

(16 Mar, 16:59) Spiekerooger

So is there a way to get localhost working or no? If so, what are the steps?

Thanks.

(17 Mar, 12:46) Pintosack

If the OWG blocks localhost right now, you can't do anything about but either not use localhost or use a different tile provider or host tiles yourself. The problem with localhost is that the OWG won't be able to distinguish your application. So be creative in making UA and Referrer unique and best include a way to contact you. See https://operations.osmfoundation.org/policies/tiles/ for more information.

(17 Mar, 12:51) Spiekerooger
4

Maybe this will help someone else, for those using leaflet, we fixed it by changing http to https on the tileLayer png. Seems to work on localhost in Chrome & Edge.

(17 Mar, 14:05) Pintosack
showing 5 of 6 show 1 more comments

Set up your own tile server (see here) or use a third-party supplier (see here).

permanent link
This answer is marked "community wiki".

answered 17 Mar, 12:53

SomeoneElse's gravatar image

SomeoneElse ♦
35.6k70363847
accept rate: 16%

edited 17 Mar, 12:54

The answer from Pintosack works for me. Thanks!

Maybe this will help someone else, for those using leaflet, we fixed it by changing http to https on the tileLayer png. Seems to work on localhost in Chrome & Edge.

permanent link

answered 17 Mar, 14:52

Captainfreedom's gravatar image

Captainfreedom
161
accept rate: 0%

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

×277
×18

question asked: 16 Mar, 15:39

question was seen: 1,950 times

last updated: 17 Mar, 14:52

powered by OSQA