Salesforce Lightning Locker Service Compatibilty

[GlynAndersonSlalom]

Describe the bug

Esri Leaflet Vector appears to be incompatible with Salesforce Lightning Locker Service. We are able to use Esri Leaflet in a Lightning Web Component (LWC) to render maps in Lightning Experience (the internal SF UI) and Experience Cloud (the external-facing "portal" UI), but when we add the Esri Leaflet Vector plugin, it triggers Locker Service, a security feature which protects against cross-site scripting. We've whitelisted multiple domains (including *.leafletjs.com and *.arcgis.com) but the problem persists. I've also looked through the Leaflet source code for domains that might need to be whitelisted.

We've worked around the problem by embedding our LWC into an Aura component configured to run using Salesforce API version 39.0, which pre-dates Locker Service. This is a short-term workaround, as Salesforce has already deprecated version up through 30.0 and will continue to deprecate API versions (the current version is 57.0).

The ask here is either to ensure there is no cross-site scripting in the Vector code, or to document any domains that need to be whitelisted to avoid this issue.

Reproduction

To reproduce, create a Lightning Web Component that imports the Esri Leaflet Vector plugin:

import LEAFLET from '@salesforce/resourceUrl/leaflet';
import ESRILEAFLET from '@salesforce/resourceUrl/esriLeaflet';
import ESRILEAFLETVECTOR from '@salesforce/resourceUrl/esriLeafletVector';
import ESRILEAFLETGEOCODER from '@salesforce/resourceUrl/esriLeafletGeocoder';

and embed it in a Lightning App Builder page or Experience Builder page with Content Security Policy set to Strict.

Logs

No response

System Info

/* Leaflet 1.9.3, a JS library for interactive maps. https://leafletjs.com
/* esri-leaflet - v3.0.10 - Tue Jan 17 2023 09:24:14 GMT-0600 (Central Standard Time)
/* esri-leaflet-vector - v4.0.1 - Thu Feb 23 2023 14:15:02 GMT-0600 (Central Standard Time)
/* esri-leaflet-geocoder - v3.1.4 - Thu Feb 23 2023 13:29:25 GMT-0600 (Central Standard Time)

Additional Information

No response

[gavinr]

Hi @GlynAndersonSlalom, thank you for the report.

I see the import statements, but can you please post a full minimal reproduction case that you're using for your Lightening web component, so we can try to replicate what you're seeing? Thank you!

[GlynAndersonSlalom]

Gavin, I'll get this to you as soon as possible, but that could be a couple weeks as the developer of the component just went on PTO for a while. Thanks for the quick response!

[jsh4478]

esriLeafletVectorReproduce.zip

@gavinr Hey Gavin, I've attached an example that you should be able to use to reproduce. Steps needed:

1. Take leaflet.zip, esriLeaflet.zip, esriLeafletVector.zip and upload them as static resources with the resource names matching the zip file. Salesforce does not allow CDN so I had to download the js, css and image files from the CDN links provided in documentation to create these zip files myself.
2. Create custom labels named ArcGIS_Token, ArcGIS_BaseEnum, ArcGIS_ParcelLayerURL and populate those accordingly.
3. Deploy the esriLeafletBugReproduce LWC into your salesforce org. This LWC uses nested promises to load the leaflet dependencies, as the required loadScript method runs asynchronously and created a race condition when trying to load them all at once.
4. Create a tab for the LWC, add the tab to an app and then navigate to that app.

The specific error I receive is 'L.esri.Vector.vectorBasemapLayer is not a function'. Once either of the workarounds are implemented, this goes away and draws the features defined in the layer.

As Glyn mentioned, my workarounds have been:

• Create a totally separate aura component mirroring this functionality and downgrading the API version to 39
• Disable lightning locker in our community portal which allows this LWC to work, but goes against salesforce best practices and has implications to other managed package LWCs.

Let me know if you have any questions or issues implementing these steps and thanks for looking into this!