Token not included in Sprite request when `sprite` property in style is a full URL #188

gavinr-maps · 2023-07-26T17:50:22Z

Describe the bug

(original issue: #186)

This bug is regarding when using a protected vector tile service and thus passing a token property in the options object (second parameter) like this:

L.esri.Vector.vectorTileLayer("993b3e810d814760918716aa9633f713", {
  token: "YOUR-TOKEN-HERE",
}).addTo(map);

That token should be passed to the request for the sprites too, but in some cases it is not being included:

When the sprite property of the style JSON (root.json) is NOT a full URL starting with http....,
- Expected: the token gets added onto the sprite request
- Actual: the token gets added onto the sprite request ✅
When the sprite property of the style JSON (root.json) IS a full URL starting with http...,
- Expected: the token gets added onto the sprite request
- Actual: the token is not added onto the sprite request ❌

Reproduction

In ArcGIS Pro, add a vector Feature Class to the map
Right-click the layer > "Sharing" > "Share as web layer"
In the "Share as web layer" panel, select "Layer Type: Vector Tile"
Ensure that you are NOT sharing the layer with "Everyone"
Publish the layer, note the item ID
Create a new OAuth App https://developers.arcgis.com/applications/
Note the client ID and Client Secret
Create a new JS Bin, using the code in the "demo template" below, and replace the item ID, client ID, and client secret into the code.
Open the test application in the browser, and in the developer tools observe that the token is being included in the Sprite requests. (simialr to item 1 above)
Find the layer just created in https://developers.arcgis.com/layers/ and click "Open style editor" for that layer
Make a small change (any change), and save the layer as a new item ("Save As"). Note the Item ID
Create a new JS Bin, using the code in the "demo template" below, and replace the client ID, client secret, and this second item ID into the code.
Open this second test application in the browser, and in the developer tools observe that the token is NOT included in the Sprite requests. (similar to item 2 above)

Logs

No response

System Info

Leaflet version 1.9.4
Esri Leaflet version 3.0.10
Esri Leaflet Vector version 4.1.0

Additional Information

I think this is where the issue is:

esri-leaflet-vector/src/Util.js

Lines 207 to 216 in cad5b19

    
           if (style.sprite && style.sprite.indexOf('http') === -1) { 
        
             // resolve absolute URL for style.sprite 
        
             style.sprite = styleUrl.replace( 
        
               'styles/root.json', 
        
               style.sprite.replace('../', '') 
        
             ); 
        
             // add the token to the style.sprite property as a query param 
        
             style.sprite += token ? '?token=' + token : ''; 
        
           }

The fix should be as simple as moving the line that adds the token (style.sprite += token ? '?token=' + token : '';) out of that if statement.

Template

Here is the demo template that is used in the replication steps above. See places where the string "XYZ" are for places where you need to replace values.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Demo</title>
  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

  <!-- Esri Leaflet and Esri Leaflet Vector -->
  <script src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"></script>
  <script src="https://unpkg.com/esri-leaflet-vector@4/dist/esri-leaflet-vector.js"></script>

  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }
  </style>

</head>

<body>
    <div id="map"></div>
    <script>
      L.esri.post(
        "https://www.arcgis.com/sharing/rest/oauth2/token",
        {
          f: "json",
          client_id: "XYZ",
          // ***************************************
          // NEVER DO THIS (INCLUDE CLIENT SECRET IN JS CODE) - WE ARE ONLY DOING THIS FOR
          // EASIER DEBUGGING PURPOSES!!!!!!
          client_secret: "XYZ",
          grant_type: "client_credentials",
        },
        function (error, result) {
          if (error) {
            throw error;
          }
          const map = L.map("map", {
            minZoom: 2,
          });
          map.setView([-27, 27], 8);
          L.esri.Vector.vectorTileLayer("XYZ", {
            token: result.access_token,
          }).addTo(map);
        }
      );

    </script>
</body>

</html>

The text was updated successfully, but these errors were encountered:

mstiglingh · 2023-08-07T10:54:06Z

Just checking in on the progress on this? We have a client with a pending production release that's dependent on this fix

patrickarlt · 2023-08-22T18:51:43Z

@gavinr-maps @mstiglingh there are security considerations here. We cannot blindly send a users token to an external URL over http:// since that isn't secure. We also should not blindly send a users token over https:// to a server or domain we don't trust. Right now the only way to verify that would be to confirm that the style and the sprites/glyph are on the same top level domain. If they are on different domains you will need to manually modify the style to incldue the token manually like so:

L.esri.Vector.vectorTileLayer("XYZ", {
  token: result.access_token,
  style: (style) => {
    // manually add the token here
    return style;
  }
}).addTo(map);

gavinr-maps · 2023-10-17T16:09:18Z

The fix for this was released in v4.2.0.

mstiglingh · 2024-05-22T12:20:29Z

@gavinr-maps the issue seems to have returned in the latest versions

gavinr-maps · 2024-05-22T13:02:01Z

@mstiglingh thanks for the note. The unit tests included in the fix for this (#192) seem to be passing, so I'm not sure what you're seeing. Could you please provide some more details including a replication case and what version the issue started happening? Thanks!

gavinr-maps mentioned this issue Jul 26, 2023

Vector Tile Layers "Unimplemented type : 3" and Failed to load Sprites #186

Closed

gavinr-maps self-assigned this Jul 26, 2023

gavinr-maps mentioned this issue Jul 26, 2023

Fix: Token with sprite issue (in progress) #189

Closed

gavinr-maps mentioned this issue Aug 7, 2023

Fix: Token with sprite and glyphs #192

Merged

gavinr-maps closed this as completed Oct 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Token not included in Sprite request when `sprite` property in style is a full URL #188

Token not included in Sprite request when `sprite` property in style is a full URL #188

gavinr-maps commented Jul 26, 2023 •

edited

Loading

mstiglingh commented Aug 7, 2023

patrickarlt commented Aug 22, 2023

gavinr-maps commented Oct 17, 2023

mstiglingh commented May 22, 2024

gavinr-maps commented May 22, 2024

Token not included in Sprite request when sprite property in style is a full URL #188

Token not included in Sprite request when sprite property in style is a full URL #188

Comments

gavinr-maps commented Jul 26, 2023 • edited Loading

Describe the bug

Reproduction

Logs

System Info

Additional Information

Template

mstiglingh commented Aug 7, 2023

patrickarlt commented Aug 22, 2023

gavinr-maps commented Oct 17, 2023

mstiglingh commented May 22, 2024

gavinr-maps commented May 22, 2024

Token not included in Sprite request when `sprite` property in style is a full URL #188

Token not included in Sprite request when `sprite` property in style is a full URL #188

gavinr-maps commented Jul 26, 2023 •

edited

Loading