Add required CSP directives

[19Gerhard85]

Could you please provide the required CSP directives to make the map working with a strict CSP ruleset?

[jpett]

We also have the problem that the map won't load with a strict CSP in place. The problem seems to be that maplibre tries to create a worker with a blob WORKER_URL ("blob:http://localhost:4200/{randomly-generated-guid}"). Unfortunately we haven't found a way to change the WORKER_URL. There is a setWorkerUrl function exported by the @maptiler/sdk, but it seems that the worker is created before any of our initialisation code is executed. Any hints on how to make this work would be greatly appreciated, thank you.

[joepvtl]

Hi,

In the NPM maplibre 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. Also tell Vite to bundle the maplibre files separately, so it will be loaded in before MapTiler.

build: {
	rollupOptions: {
          output: {
			    // Include all maplibre-gl chunks in a single file.
			    manualChunks: (id) => {
			    if (id.toLocaleLowerCase.includes("maplibre")) return "maplibre";
		    },
	    },
	}
},
resolve: {
	alias: {
		"maplibre-dist": path.resolve(
			__dirname,
			"node_modules/maplibre-gl/dist",
		),
        // Only use the CSP version in build mode, since the ?url does not work in dev mode.
         ...(import.meta.env.DEV
			    ? {}
				: {
					"maplibre-gl": path.resolve(
						__dirname,
						"node_modules/maplibre-gl/dist/maplibre-gl-csp.js",
					),
				 }),
	},
}

Then I have a separate typescript file named MapLibreImports containing the following 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.

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

This is how I import the MapLibreImports into the file also containing the MapTiler import.

if (import.meta.env.PROD) {
	import("MapLibreImports");
}
import * as maptilersdk from "@maptiler/sdk";

Doing it this way we make sure the correct files are being loaded in only for a non-dev build.

And for the image CSP, I just override the background image to my own SVG with CSS.

Hope this helps you out!