Map output from OSM returns blocked tiles, due to defective request or not following referer-policy #2236

Activity

1. Otavio-Novais commented on Jun 10, 2026

   

   Otavio-Novais

   on Jun 10, 2026

   More actions

   Hi everyone!

   I've been exploring the project recently and wanted to look into this issue as a way to get started. After looking into how referrerPolicy is handled, here is what I found:

   Folium successfully passes Leaflet's referrerPolicy to the tile layer, so the package functionality is working as intended. However, the 403 Forbidden error from OpenStreetMap happens when the generated HTML map is opened directly from the local disk (file:// protocol), especially in browsers like Firefox.

   In these cases, the browser security policy restricts or completely omits the standard HTTP Referer header for local files. Since OpenStreetMap's tile policy strictly requires a valid Referer, the server rejects the request.

   It looks like this is a browser/origin limitation regarding local files rather than a rendering bug in Folium. For anyone encountering this, a reliable workaround is to serve the generated HTML file over a local HTTP server (for example, by running python -m http.server in the directory) or to use a tile source that doesn't enforce strict Referer checks.

   Let me know if I missed anything or if there's any other way I can help!

   👍React with 👍2Reacted by M5oul and clarisma

   🚀React with 🚀1Reacted by Oliver Arend
2. hansthen commented on Jun 11, 2026

   

   hansthen

   on Jun 11, 2026

   Last edited by hansthen

   Collaborator

   More actions

   This is a duplicate of #2215. As @Otavio-Novais notes, this is out of our control. This is caused by a combination of browser policies and OSM tile policy, neither of which are part of Folium.
3. clarisma commented on Sep 2, 2026

   

   clarisma

   on Sep 2, 2026

   Last edited by clarisma

   More actions

   Update

   Corrected code below. The OSM tile servers are now accepting X-Requested-With headers in lieu of a Referrer.

   ---

   We've encountered the same issue in GeoDesk.

   Local HTML files opened via file:// by definition don't have a Referer header, and hence can't comply with the OpenStreetMap's Tile Usage policy requiring referers.

   As an alternative, tile requests may set an X-Requested-With header (I confirmed this with the OSM Operations Working Group).

   You'll need to include the leaflet-header plugin and set the header as part of the tile layer.

   As an example, for GeoDesk's GOL Tool, this looks as follows:

   <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
   <script src="https://unpkg.com/leaflet-wms-header@1.0.13/index.js"></script><style>
   

   var tileLayer = L.TileLayer.wmsHeader(tilesUrl, {minZoom: 0, maxZoom: 19, attribution: tilesAttrib},[{header: 'X-Requested-With', value: 'geodesk-gol/2.3.6'}], null);
   

    
   (Change geodesk-gol/2.3.6 to the Folium-specific identifier).

   👍React with 👍1Reacted by jess
4. hansthen commented on Sep 3, 2026

   

   hansthen

   on Sep 3, 2026

   Collaborator

   More actions

   @clarisma Thanks for investigating. I had some hope that it would work.
5. tonny62 commented on Sep 16, 2026

   

   tonny62

   on Sep 16, 2026

   Last edited by tonny62

   More actions

   If any one facing this issue in an application developed using Django, here's my fix.

   setting.py
   SECURE_REFERRER_POLICY = "strict-origin-when-cross-origin"
   
6. viktortoenkoel commented on Oct 7, 2026

   

   viktortoenkoel

   on Oct 7, 2026

   Last edited by viktortoenkoel

   More actions

   Agreed that it's a clash between OSM and Local Browser Policy and that folium has nothing to do with it.

   At the same time we folium users have even less chance to do anything.

   Could someone with folium knowledge maybe look into if setting of "X-Requested-With" header would be possible ideally as a folium level parameter?
7. hansthen commented on Oct 8, 2026

   

   hansthen

   on Oct 8, 2026

   Last edited by hansthen

   Collaborator

   More actions

   I see how this can be annoying. There is a user space fix that may work (not tested yet).

   create_tile = folium.JsCode("""
       function(coords, done) {
           const url = this.getTileUrl(coords);
           const img = document.createElement('img');
           fetch(url, {
             headers: {
               "X-Requested-With": "<whatever>"
             },
           })
           .then((response) => {
               img.src = URL.createObjectURL(response.body);
               done(null, img);
           })
           return img;
       }
   """)
   
   folium.TileLayer.include(create_tile=create_tile)
   tiles = folium.TileLayer(
       tiles="OpenStreetMap",
   )
   m = folium.Map(
       tiles=tiles,
   )
   

   🎉React with 🎉1Reacted by viktortoenkoel
8. viktortoenkoel commented on Oct 9, 2026

   

   viktortoenkoel

   on Oct 9, 2026

   More actions

   thank you, I can confirm that it works, I've ended up using this version:

       create_tile = folium.JsCode("""
           function(coords, done) {
               const url = this.getTileUrl(coords);
               const img = document.createElement('img');
   
               fetch(url, {
                   headers: {
                       "X-Requested-With": "<whatever>"
                   }
               })
               .then(response => {
                   if (!response.ok) {
                       throw new Error(`HTTP ${response.status}`);
                   }
                   return response.blob();
               })
               .then(blob => {
                   img.onload = () => done(null, img);
                   img.onerror = () => done(new Error("Image loading failed"));
                   img.src = URL.createObjectURL(blob);
               })
               .catch(error => {
                   console.error("Tile loading failed:", url, error);
                   done(error);
               });
   
               return img;
           }
       """)