Unable to use any mapbox token with mapbox-gl-js other than default public token
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
### mapbox-gl-js version
v3.14.0
### Browser and version
Chrome 139.0.7258.155, Frefox 142
### Expected behavior
The map should load with a URL restricted token if the request originates from a permitted URL.
### Actual behavior
Using any custom made token, with or without URL restriction, the requests fail with 403 errors. The behaviour is not consistent - on some loads (after using hard refresh), the errors persist though the map does load, continuously throwing the errors as the map is panned/zoomed. Mostly, the map fails to load.
Switching to the default public key, no errors are thrown, the map loads as expected.
I have tried creating new keys from scratch, with or without URL restrictions, same result.
### Link to the demonstration
_No response_
### Steps to trigger the unexpected behavior
I am unable to provide a working example as this would mean leaving broken maps on my site and/or exposing a key.
The steps to reproduce are simple enough:
Create a new token using the default scope:
styles:tiles
styles:read
fonts:read
datasets:read
vision:read
Use this key to load a map.
Note: the key in the logs below has been deleted.
### Relevant log output
```shell
XHRGET
https://api.mapbox.com/raster/v1/mapbox.mapbox-terrain-dem-v1/11/1032/755.webp?sku=101sgBSQP0FN0&access_token=pk.eyJ1IjoiZW56ZWRvbmxpbmUiLCJhIjoiY21mM2FhbXYxMnhoMTJqb2EzeHd6YjZidSJ9.S4rrB2WWP3uwjknU7kjyHg
[HTTP/3 403 15ms]
XHRGET
https://api.mapbox.com/v4/mapbox.mapbox-bathymetry-v2,mapbox.mapbox-streets-v8-lite,mapbox.mapbox-terrain-v3,mapbox.mapbox-models-v1,mapbox.mapbox-poi-v2/13/4127/3022.vector.pbf?sku=101sgBSQP0FN0&access_token=pk.eyJ1IjoiZW56ZWRvbmxpbmUiLCJhIjoiY21mM2FhbXYxMnhoMTJqb2EzeHd6YjZidSJ9.S4rrB2WWP3uwjknU7kjyHg
NS_BINDING_ABORTED
XHRGET
https://api.mapbox.com/v4/mapbox.mapbox-streets-v8,mapbox.mapbox-terrain-v2,mapbox.mapbox-bathymetry-v2,enzedonline.5s0vmpfh,enzedonline.cm7o8cvgx00g61mqip1wphr1k-77rgv,enzedonline.cm7o8ecak1c531pkxcmzl3idx-2dlnv,enzedonline.7insx2wu/12/2064/1511.vector.pbf?sku=101FNf1vS1C9e&access_token=pk.eyJ1IjoiZW56ZWRvbmxpbmUiLCJhIjoiY21mM2FhbXYxMnhoMTJqb2EzeHd6YjZidSJ9.S4rrB2WWP3uwjknU7kjyHg
[HTTP/3 403 51ms]
XHRGET
https://api.mapbox.com/raster/v1/mapbox.mapbox-terrain-dem-v1/12/2064/1511.webp?sku=101FNf1vS1C9e&access_token=pk.eyJ1IjoiZW56ZWRvbmxpbmUiLCJhIjoiY21mM2FhbXYxMnhoMTJqb2EzeHd6YjZidSJ9.S4rrB2WWP3uwjknU7kjyHg
[HTTP/3 403 207ms]
Object { status: 403, url: "https://api.mapbox.com/v4/mapbox.mapbox-bathymetry-v2,mapbox.mapbox-streets-v8-lite,mapbox.mapbox-terrain-v3,mapbox.mapbox-models-v1,mapbox.mapbox-poi-v2/13/4129/3024.vector.pbf?sku=101FNf1vS1C9e&access_token=pk.eyJ1IjoiZW56ZWRvbmxpbmUiLCJhIjoiY21mM2FhbXYxMnhoMTJqb2EzeHd6YjZidSJ9.S4rrB2WWP3uwjknU7kjyHg", message: "", stack: "" }
evented.ts:174:21
Error:
Ve ajax.ts:89
l ajax.ts:161
promise callback*l ajax.ts:156
Fe tile_request_cache.ts:152
promise callback*Fe/< tile_request_cache.ts:142
promise callback*Fe/< tile_request_cache.ts:133
Fe ajax.ts:195
Fe ajax.ts:252
De ajax.ts:270
Ne ajax.ts:362
loadTile raster_dem_tile_source.ts:33
_loadTile source_cache.ts:159
_addTile source_cache.ts:865
_updateRetainedTiles source_cache.ts:718
update source_cache.ts:620
It source_cache.ts:87
fire evented.ts:152
_tileJSONRequest raster_tile_source.ts:123
n load_tilejson.ts:107
Qe load_tilejson.ts:114
frame browser.ts:39
Qe load_tilejson.ts:114
load raster_tile_source.ts:103
onAdd raster_tile_source.ts:136
addSource style.ts:2024
r style.ts:769
_load style.ts:880
promise callback*_load style.ts:879
_request style.ts:603
frame browser.ts:39
loadJSON style.ts:601
_loadImports style.ts:644
r style.ts:860
_load style.ts:887
_request style.ts:592
u ajax.ts:188
promise callback*u ajax.ts:177
l ajax.ts:159
promise callback*l ajax.ts:156
Fe ajax.ts:197
Fe ajax.ts:252
n ajax.ts:263
loadURL style.ts:586
load style.ts:506
_updateStyle map.ts:2343
setStyle map.ts:2314
Map map.ts:755
add_mapbox map-block.js:97
initialiseMap map-block.js:86
MapBlock map-block.js:57
promise callback*MapBlock map-block.js:56
(index):1766
promise callback* (index):1765
evented.ts:174:21
```
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the custom-token requests and compare them with the default public token, then trace the request path through ajax.ts and the stack entries in load_tilejson.ts, raster_tile_source.ts, and source_cache.ts. Done means identifying why valid custom-token requests receive 403 responses and verifying that map loading and tile requests work with the affected token configuration.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100