Unable to load tiles - 403 Forbidden from whitelisted domain

[tommed]

mapbox-gl-js version: 2.12.1

browser: Google Chrome 110.0.5481.77

Steps to Trigger Behavior

1. Added URLs to whitelist (including localhost)
2. Tested locally and works with map mapbox://styles/mapbox/streets-v11
3. Published to live server, receiving 403 when requesting the tiles

new mapboxgl.Map({
        container: 'map',
        style: "mapbox://styles/mapbox/streets-v11",
        center: { "lat": 51.502803, "lon": -0.124354 },
        zoom: 11,
    })

Link to Demonstration

From URL: https://staging.mps.ukp.vipro.online/dashboards/location-tracker

However:

Expected Behavior

Would have expected it to load.

Actual Behavior

403 Forbidden error. Interestingly, the map itself works fine, it just doesn't display any of the tiles.

[tommed]

Anyone?

[stepankuzmin]

Hi @tommed,

Thanks for opening the issue, this looks like a bug.

[stepankuzmin]

@tommed I couldn't reproduce this issue, and the link you provided requires authorization. Could you please share the request headers?

[tommed]

@tommed I couldn't reproduce this issue, and the link you provided requires authorization. Could you please share the request headers?

No problemo. I'll get you these details tomorrow. Thanks for looking at this.

[mourner]

@tommed sorry for the late response — we've looked into this but haven't been able to reproduce, it seems to work properly on the Mapbox API side. Perhaps there's something in your environment that interferes with the browser setting Referrer headers for requests, e.g. some security policy or a particular extension?

[tommed]

@tommed sorry for the late response — we've looked into this but haven't been able to reproduce, it seems to work properly on the Mapbox API side. Perhaps there's something in your environment that interferes with the browser setting Referrer headers for requests, e.g. some security policy or a particular extension?

No problem, will provide additional info as above.
Are you able to check logs to see why the 401 was sent from your servers for the requests coming from https://staging.mps.ukp.vipro.online ?

[tommed]

Ok so,

General

Request URL: https://api.mapbox.com/v4/mapbox.mapbox-streets-v8,mapbox.mapbox-terrain-v2.json?secure&access_token=MY_API_TOKEN_REDACTED
Request method: GET
Status code: 403 Forbidden
Remote address: 13.224.234.145:443
Referrer policy: same-origin

Request

Accept: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,en-GB;q=0.8,mt;q=0.7
Connection: keep-alive
Host: api.mapbox.com
Origin: https://staging.mps.ukp.vipro.online
sec-ch-ua: "Chromium";v="110", "Not A(Brand";v="24", "Google Chrome";v="110"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Response

Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Link
Age: 32
Cache-Control: max-age=43200,s-maxage=300
Connection: keep-alive
Content-Length: 23
Content-Type: application/json; charset=utf-8
Date: Thu, 23 Feb 2023 08:29:38 GMT
ETag: W/"17-bqIm6pxC4cx+ZoszvXxsClwgWw8"
Vary: Accept-Encoding
Via: 1.1 a3e4fc96eb3662731567c2fe42feda9a.cloudfront.net (CloudFront)
X-Amz-Cf-Id: AZmtoqpCUaIBWXESVoQUewSAVMkaSDx5boaXOVQO980TIdJi8Ap2_Q==
X-Amz-Cf-Pop: LHR62-C3
X-Cache: Error from cloudfront
X-Content-Type-Options: nosniff

CSP

The site's CSP (which obviously isn't blocking this outbound call otherwise it wouldn't be receiving the 401 from your servers), is as follows:

content-security-policy: default-src 'self' https://*.mapbox.com;img-src 'self' data: https://*.mapbox.com;style-src 'self' 'unsafe-inline' https://*.mapbox.com;connect-src 'self' https://mps.ukp.vipro.online https://login.windows.net https://*.mapbox.com;media-src 'self' https://*.mapbox.com;worker-src 'self' blob:;

Mapbox API Settings

Approved URLs:

• http://localhost:5173/
• https://api.mapbox.com
• https://mps.ukp.vipro.online/
• https://staging.mps.ukp.vipro.online/
• https://vnext.mps.ukp.vipro.online/

I've triple-checked the mapbox API key in the request and it is indeed accurate.
Let me know if you need anything else to diagnose.

Refereer

As mentioned by @mourner, I have changed the Referrer policy to origin-when-cross-origin just in case the same-origin was causing the problem (although as you can see, the Origin header is still being sent to your servers regardless). But this also returned a 403 forbidden:

Request URL: https://api.mapbox.com/v4/mapbox.mapbox-streets-v8,mapbox.mapbox-terrain-v2.json?secure&access_token=MY_MAPBOX_API_TOKEN_REDACTED
Request method: GET
Status code: 403 Forbidden (from disk cache)
Remote address: 13.224.234.145:443
Referrer policy: origin-when-cross-origin

Lastly, I even tried setting the referrer policy to unsafe-url but it still returns a 403.

[robertcepa]

@tommed origin-when-cross-origin should work. These requests are cached so try clearing the cache manually (in Chrome, go to Network tab in DevTools, right-click on the request, and select Clear browser cache). At least, that fixed it for me.

In our case, we cannot change the global referrer policy for security reasons. I just opened a PR with a change that lets us set referrerPolicy in transformRequest callback in order to relax the referrer policy only for the requests to Mapbox API.

[tommed]

@robertcepa that's a great solution; seems odd to be able to override the global referrer policy using JavaScript, sounds like something a script injection could also achieve - but I'm assuming smarter brains than my own have decided to allow this in browsers and most likely for this exact scenario. I'll keep an eye on your PR as ideally we don't want to relax our referrer policy either.
Many thanks!

[tommed]

You were right. It was a browser caching thingy. Thanks for the update - shame about having to reduce the referrer policy, but understand the logic behind it. Thanks for everything