Running into issues with content security policy

[tmoleary21]

Hello,

My team is working on migrating our data visualization tool built in React (w/ webpack) from Leaflet to Deck.gl to take advantage of the graphics acceleration. We are using react-map-gl to provide a base map. We are a research team at a university, which means we have a strict content security policy we have to adhere to, so as I've been trying to deploy our app I've run into issues with mapbox trying to create workers from a blob.

We have been using react-map-gl v5 with mapbox-gl to avoid the auth token, but since working on this issue I switched to the latest release with maplibre.

Below is the file that does everything Deck.gl and react-map-gl related. Far from our whole app, but nothing else deals with these packages.

import React, {useState} from 'react';
import DeckGL from '@deck.gl/react';
import { BASEMAP } from '@deck.gl/carto';
import MapFromRMG from 'react-map-gl';
import maplibreGl from 'maplibre-gl';
import { WebMercatorViewport } from '@deck.gl/core';
import GoTo from '../widgets/GoTo';
import LayerManager from "./LayerManager";
import {debounce} from "@mui/material";

export default function Map(props){

    const [initialViewState, setInitialViewState] = useState({
        longitude: -105.08,
        latitude: 40.56,
        zoom: 10,
        pitch: 0,
        bearing: 0
    });

    const [layers, setLayers] = useState([]);

    // Pass the setter to LayerManager so it can automatically update the rendered layers
    LayerManager.setLayersState = setLayers;

    // eslint-disable-next-line import/no-webpack-loader-syntax
    const workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;

    return (
        <>
            <DeckGL
                initialViewState={initialViewState}
                controller={{dragRotate: false}}
                onViewStateChange={ debounce(({viewState}) => {
                    const viewport = new WebMercatorViewport(viewState);
                    //Note that the unproject function does not bound to [-180,180] degrees
                    const nw = viewport.unproject([0, 0]);
                    const se = viewport.unproject([viewport.width, viewport.height]);

                    LayerManager.updateBounds({
                        _northEast:{lat:nw[1],lng:se[0]},
                        _southWest:{lat:se[1],lng:nw[0]}
                    }, viewState.zoom);
                }, 100)}
                layers={layers}
            >
                <MapFromRMG mapStyle={BASEMAP.VOYAGER} mapLib={maplibreGl} workerClass={workerClass}/>
            </DeckGL>
            <div id="current-location" className="current-location">
                <GoTo setInitialViewState={setInitialViewState}/>
            </div>
        </>
    );
}

Errors:

The latest thing I have tried is setting the workerClass. The docs say that setting the workerUrl is useful for handling CSP issues, but I couldn't figure out what the URL should be. I thought the workerClass would do the trick, but that could be wrong or I could be setting it incorrectly. To reiterate, I only get this issue in production (CSP only matters in production for us).

Any help with fixing this would be greatly appreciated!

A subset of the resources that have helped:
https://docs.mapbox.com/mapbox-gl-js/guides/browsers-and-testing/#strict-csp-environments
https://visgl.github.io/react-map-gl/docs/api-reference/map

[Pessimistress]

If you want to use maplibre, then you need to look at maplibre's documentation.

https://maplibre.org/maplibre-gl-js-docs/api/#csp-directives

[Pessimistress]

Ok I finally understand why you are so confused. The unpkg url from the documentation just tells you which file you need to feed to the workerUrl prop. In practice you need to copy that file out to your own application and serve it as a static asset, so that it can be loaded through an accessible URL such as https://myuniversity.edu/app/static/maplibre-gl-csp-worker.js.

[tmoleary21]

Alright, thank you that definitely helps. It's still not working but I'm starting to see some issues on my end that I will need to address before I decide to come back here. I appreciate your help!

[tmoleary21]

Hi again! I'm still having the same issues on Google Chrome. I am providing a workerUrl to the Map component that points to the maplibre-gl-csp-worker.js file on our server. It seems like it should be working properly because it works in Firefox, and I can see it is making network requests for the workers using the URL I provided. On Chrome, I still get the same error as in my first post, and there is no evidence it is using the URL at all.

I've also tried changing my MapLibre import to use the strict csp version. The documentation just says that changing workerUrl should do the trick, but I thought I would try it: import MaplibreGl from 'maplibre-gl/dist/maplibre-gl-csp';

Any new advice would be appreciated.

[tmoleary21]

I am back to working on this again after a few months working on other things. Still having the same issues described above.

I have two versions running on our server now. One that is running only maplibre-gl without npm, react, or anything extra. It is similar to the maplibre Display a map example, but with the strict csp environment fix. The other version is our normal codebase with react-map-gl. For that one, I am passing the maplibre object imported from maplibre-gl-csp.js to the mapLib prop. In both cases, I am passing the same URL to the static asset maplibre-gl-csp-worker.js to the workerUrl. The vanilla JavaScript version is working, the react app is not.

Could this be an issue with react-map-gl? Do you think I am still doing something wrong, or could it be because of some difference from using npm/react/webpack/etc? I appreciate the help.

[tmoleary21]

I finally found the issue around a week ago. In map.tsx, mapboxgl.supported is called before the package is used for anything else, but the supported function creates a worker from a blob URL within it to check for worker support, which violates the content security policy. I fixed it with maplibregl.supported = () => true; I see this as a temporary solution. Hopefully the contributors of mapbox-gl-supported can add a fix for the supported function that accounts for this

[tmoleary21]

The mapboxgl.supported function creates a worker from a blob URL to check worker support, regardless of whether you are using the CSP compliant alternatives. mapboxgl.supported = () => true will remove the violations.

[Pessimistress]

Thanks for the insight. #2138 should fix this.