I’m having great difficulty with this topic. I’m building a Gatsby/React mapping web app for the Swiss paddlesports community (GitHub repo) using Leaflet to load a custom tile layer from Mapbox.

I’d like to add URL restrictions to my Mapbox token for security. However I can’t figure out how to get Leaflet to send a Referer header to Mapbox to enable this. I found Mapbox tiles not showing on Leaflet map using Google Chrome from @pfalbaum where it looks like they had this working, however so far I can’t figure out how they did this

Can anyone offer any advice on how to use URL-restricted Mapbox tokens with Leaflet?

  • 1
    Browsers send the referer header by themselves. Inspect your network requests. Commented Oct 19, 2021 at 14:48

1 Answer 1


I managed to fix this, and in case its useful for anyone else thought I'd offer the solution here!

The issue turned out to have nothing to do with Leaflet or Mapbox, but instead to be about Gatsby Cloud's hosting configuration. It defaults to setting a Referrer-Policy of same-origin, which instructs the browser not to send the referer header on requests to other domains.

The defaults can be changed using the gatsby-plugin-gatsby-cloud plugin. I used the following configuration in gatsby-config.js to retain the other security defaults while setting the Referrer-Policy to strict-origin-when-cross-origin:

      resolve: `gatsby-plugin-gatsby-cloud`,
      options: {
        mergeSecurityHeaders: false,
        allPageHeaders: [
          "X-Frame-Options: DENY",
          "X-XSS-Protection: 1; mode=block",
          "X-Content-Type-Options: nosniff",
          "Referrer-Policy: strict-origin-when-cross-origin"

Hope this is helpful for someone 🙂

  • very very helpful - thanks
    – amcc
    Commented Dec 13, 2021 at 0:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.