javascript - MapBox GL CSP 版本不渲染图 block

Question

我正在尝试使用 CSP version 获取要渲染的 map .

除了渲染图 block 之外，一切似乎都正常工作，正如您从 JSFiddle 中看到的那样以及下面的代码。

控制台中没有抛出任何错误。

<div id='map'></div>

mapboxgl.accessToken = 'ACCESS_TOKEN';
mapboxgl.workerUrl = 'https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl-csp-worker.js';

var el = document.createElement('div');
 el.style.backgroundImage = 'url(https://placekitten.com/g/40/40/)';
 el.style.width = 40 + 'px';
 el.style.height = 40 + 'px';

var map = window.map = new mapboxgl.Map({
    container: 'map',
    zoom: 12.5,
    center: [-74.5, 40],
    style: 'mapbox://styles/mapbox/streets-v11',
    hash: true
});

new mapboxgl.Marker(el)
   .setLngLat([ -74.5, 40 ])
   .addTo(map);

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

Answer 1

我在 Mapbox 工作 - 我相信发生这种情况是因为 Salesforce 不允许加载工作脚本。每Salesforce :

You can’t load JavaScript resources from a third-party site, even if it’s a CSP Trusted Site. To use a JavaScript library from a third-party site, add it to a static resource, and then add the static resource to your component. After the library is loaded from the static resource, you can use it as normal.

一个Static Resource是包含您要在 Salesforce 中访问的文件的存档文件。因此，简短的版本是 Salesforce 的安全策略将仅加载 mapbox-gl-csp-worker.js 的本地副本。您需要使用该文件创建静态资源才能使 map 正常工作:

1. 下载 mapbox-gl-csp-worker.js 的副本文件。
2. 创建包含工作文件的 zip 或 jar 存档。
3. https://help.salesforce.com/articleView?id=pages_static_resources_create.htm&type=5到 Salesforce。
4. 将代码中的工作器 URL 更改为资源的相对路径。

需要记住的几件事:

• 确保您将脚本标记指向 GL JS 的 CSP 构建:<script src='https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl-csp.js'></script>
• 每当您想要更新 GL JS 时，您都需要下载新版本的 csp 版本，并更新 Salesforce 上的静态资源。

祝你好运!

布兰迪