mapbox / mapbox/mapbox-gl-js

Unable to use any mapbox token with mapbox-gl-js other than default public token

Open
#13,544 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged bug :lady_beetle:
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.

Image

### 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.