Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to load tiles - 403 Forbidden from whitelisted domain #12568

Closed
tommed opened this issue Feb 10, 2023 · 10 comments
Closed

Unable to load tiles - 403 Forbidden from whitelisted domain #12568

tommed opened this issue Feb 10, 2023 · 10 comments

Comments

@tommed
Copy link

tommed commented Feb 10, 2023

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

error

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

However:

whitelist

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
Copy link
Author

tommed commented Feb 21, 2023

Anyone?

@stepankuzmin
Copy link
Contributor

Hi @tommed,

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

@stepankuzmin
Copy link
Contributor

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

@tommed
Copy link
Author

tommed commented Feb 22, 2023

@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
Copy link
Member

mourner commented Feb 22, 2023

@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
Copy link
Author

tommed commented Feb 22, 2023

@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
Copy link
Author

tommed commented Feb 23, 2023

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:

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
Copy link
Contributor

robertcepa commented Feb 25, 2023

@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
Copy link
Author

tommed commented Feb 25, 2023

@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
Copy link
Author

tommed commented Mar 6, 2023

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

@tommed tommed closed this as completed Mar 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants