React Electron App - React Leaftlet Content Security Policy errors

Question

I am currently creating an Electron app in which I would like to use react leaflet's maps functionality. This requires the use of external url's which throws CSP errors when I attempt to use them.

The code I am using for leaftlet looks like:

<MapContainer id="MapViewElement" center={[51.505, -0.09]} zoom={13}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>

and in index.js i have the meta tag:

<meta
  charset="UTF-8"
  http-equiv="Content-Security-Policy"
  content="default-src *;
  img-src https://*.tile.openstreetmap.org/*.png data: https://*.tile.openstreetmap.org/*.png ; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
  style-src  * 'unsafe-inline' *; child-src *"
/>

Running this then throws a few issues, mostly differing version of

Refused to load the image 'https://c.tile.openstreetmap.org/13/4094/2724.png' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

If there is something I am missing from my code please do let me know, I have been having trouble with this for a while now. Thank you for any help!

Answer 1

I have found an answer to my issue!

It turns out, in Electron there is a default CSP which is set which seems to interfere with setting it in the index.html meta tag.

To solve this, instead within package.json go to the plugins section and add a devContentSecurityPolicy field which the CSP will be entered to, something like:

"devContentSecurityPolicy: default-src 'self' https://xxxx 'unsafe-inline' etc.

For react leaflet's MapContainer to work for me I have used:

"plugins": [
    [
      "@electron-forge/plugin-webpack",
      {
        "mainConfig": "./webpack.main.config.js",
        "devContentSecurityPolicy": "default-src 'self' https://unpkg.com/[email protected]/dist/leaflet.js 'unsafe-inline'; style-src-elem 'self' https://unpkg.com/[email protected]/dist/leaflet.css 'unsafe-inline';script-src-elem 'self' https://unpkg.com/[email protected]/dist/leaflet.js 'unsafe-inline'; img-src 'self' * data:;",
        "renderer": {
          "config": "./webpack.renderer.config.js",
          "entryPoints": [{
            "html": "./src/index.html",
            "js": "./src/renderer.js",
            "name": "main_window"
          }]
        }
      }
    ]
  ]

I hope this can help someone else if they stumble upon this issue!