I have successfully integrated the mapbox API to create an interactive map on my website. To ensure the security of my access token, I have set up a proxy to handle the API requests externally. However, I am facing a challenge when it comes to hiding the access token during the initialization of the map on the client side.
The current code snippet initializes the map as intended, but I am concerned that anyone inspecting my code in the browser or viewing it on GitHub will be able to access my token:
const accessToken = 'myKey';
mapboxgl.accessToken = accessToken;
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12',
center: [-46.625290, -23.533773],
zoom: 12,
minZoom: 5,
language: 'pt'
});
Although I have restricted the access token to specific URLs, I am unsure if this provides adequate protection for my token.
If you have any suggestions or solutions to help secure my access token, please feel free to share them. Thank you!