Use library for restrictive csp environment

[kopalag]

Hi there,

I want to use this library but I cannot have blob: in the worker-src due to restrictive csp

In the documentation this is mentioned

<script> maplibregl.setWorkerUrl("${urls.js().replace('.js', '-csp-worker.js')}"); ... </script>

Can somebody help me understand how this is used (especially in typescript) and what it’ll do that would remove the need of blob: in worker-src

[joepvtl]

Hi,

In the NPM package there are multiple versions of the module.
I am using Vite to bundle the application. What you can do in Vite is change the resolve alias for example "maplibre-gl" to reference the CSP version instead.

resolve: {
	alias: {
		"maplibre-gl": path.resolve(
			__dirname,
			"node_modules/maplibre-gl/dist/maplibre-gl-csp.js",
		),
		"maplibre-dist": path.resolve(
			__dirname,
			"node_modules/maplibre-gl/dist",
		),
	},

Then you can use the following script to load in the CSP worker:

<script>
	import cspWorkerUrl from "maplibre-dist/maplibre-gl-csp-worker.js?url";
	import maplibre from "maplibre-gl";
	maplibre.setWorkerUrl(cspWorkerUrl);
</script>

By adding the ?url after the import, Vite returns the correct url to the file including the hash. This way you won't have to manually put the file somewhere to load it in.

[AlansCodeLog]

I also ran into this. The docs example is really confusing.

Question @joepvtl, any particular reason for the vite alias? I got it to load with just import cspWorkerUrl from "maplibre-gl/dist/maplibre-gl-csp-worker.js?url";