reactjs - How can I use an access token for a React-Leaflet tilelayer without it being exposed on the frontend? - Stack Overflow

admin管理员组

文章数量:1335356

Here's what a React Leaflet TileLayer component that requires an access token looks like:

<TileLayer
  url='/{z}/{x}/{y}{r}.png?access-token=1234567890'
  attribution='<a href="; title="Tiles Courtesy of Jawg Maps" target="_blank">&copy; <b>Jawg</b>Maps</a> &copy; <a href=";>OpenStreetMap</a> contributors'
/>

But even if I use an environment variable from a .env file like

const jawgAccessToken = import.meta.env.VITE_JAWG_TOKEN

<TileLayer
  url=`/{z}/{x}/{y}{r}.png?access-token=${jawgAccessToken}`
  attribution='<a href="; title="Tiles Courtesy of Jawg Maps" target="_blank">&copy; <b>Jawg</b>Maps</a> &copy; <a href=";>OpenStreetMap</a> contributors'
/>

instead of hardcoding it, that would be still be exposed because my React components are on the frontend. How do I get access to this tilelayer without exposing my secret token?

I was thinking of doing a relay from my frontend to my backend, like replacing the url in the TileLayer component with a url for my backend, where I'd handle a GET request by making a GET request to the Jawg url and then returning that to the frontend. But I doubt that's sufficient and this seems like a common enough problem (surely other people have needed to use tilelayer access tokens without exposing them?) that I was hoping someone would have the best practice answer to this problem.

Thank you!

Here's what a React Leaflet TileLayer component that requires an access token looks like:

<TileLayer
  url='https://tile.jawg.io/jawg-sunny/{z}/{x}/{y}{r}.png?access-token=1234567890'
  attribution='<a href="https://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank">&copy; <b>Jawg</b>Maps</a> &copy; <a href="https://www.openstreetmap./copyright">OpenStreetMap</a> contributors'
/>

But even if I use an environment variable from a .env file like

const jawgAccessToken = import.meta.env.VITE_JAWG_TOKEN

<TileLayer
  url=`https://tile.jawg.io/jawg-sunny/{z}/{x}/{y}{r}.png?access-token=${jawgAccessToken}`
  attribution='<a href="https://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank">&copy; <b>Jawg</b>Maps</a> &copy; <a href="https://www.openstreetmap./copyright">OpenStreetMap</a> contributors'
/>

instead of hardcoding it, that would be still be exposed because my React components are on the frontend. How do I get access to this tilelayer without exposing my secret token?

I was thinking of doing a relay from my frontend to my backend, like replacing the url in the TileLayer component with a url for my backend, where I'd handle a GET request by making a GET request to the Jawg url and then returning that to the frontend. But I doubt that's sufficient and this seems like a common enough problem (surely other people have needed to use tilelayer access tokens without exposing them?) that I was hoping someone would have the best practice answer to this problem.

Thank you!

• reactjs
• leaflet
• react-leaflet

Share Improve this question Follow edited Nov 20, 2024 at 18:25 JohnDoeVsJoeSchmoe asked Nov 20, 2024 at 18:20 JohnDoeVsJoeSchmoeJohnDoeVsJoeSchmoe 71122 gold badges99 silver badges2727 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

looks like the "best practices" answer is to add a URL restriction when creating the access token

本文标签：