diff --git a/scripts/generateLayouts.ts b/scripts/generateLayouts.ts
index 16c9bc8bb4..2e62f7be34 100644
--- a/scripts/generateLayouts.ts
+++ b/scripts/generateLayouts.ts
@@ -104,9 +104,9 @@ class GenerateLayouts extends Script {
         if (!layout.icon.endsWith(".svg")) {
             console.warn(
                 "Not creating a social image for " +
-                    layout.id +
-                    " as it is _not_ a .svg: " +
-                    layout.icon
+                layout.id +
+                " as it is _not_ a .svg: " +
+                layout.icon
             )
             return undefined
         }
@@ -139,9 +139,9 @@ class GenerateLayouts extends Script {
                         id: "icon",
                         transform: `translate(${cx - r},${cy - r}) scale(${
                             (r * 2) / Number(width)
-                        }) `,
+                        }) `
                     },
-                    g: [svg],
+                    g: [svg]
                 }
             },
             (mightBeTokenToReplace) => {
@@ -202,19 +202,19 @@ class GenerateLayouts extends Script {
                 icons.push({
                     src: name,
                     sizes: size + "x" + size,
-                    type: "image/png",
+                    type: "image/png"
                 })
             }
             icons.push({
                 src: path,
                 sizes: "513x513",
-                type: "image/svg",
+                type: "image/svg"
             })
         } else if (icon.endsWith(".png")) {
             icons.push({
                 src: icon,
                 sizes: "513x513",
-                type: "image/png",
+                type: "image/png"
             })
         } else {
             console.log(icon)
@@ -233,11 +233,11 @@ class GenerateLayouts extends Script {
             description: ogDescr,
             orientation: "portrait-primary, landscape-primary",
             icons: icons,
-            categories: ["map", "navigation"],
+            categories: ["map", "navigation"]
         }
         return {
             manifest,
-            whiteIcons,
+            whiteIcons
         }
     }
 
@@ -261,7 +261,7 @@ class GenerateLayouts extends Script {
         const rasterLayers = [
             AvailableRasterLayers.maptilerDefaultLayer,
             ...eli.features,
-            ...eli_global.layers.map((properties) => ({ properties })),
+            ...eli_global.layers.map((properties) => ({ properties }))
         ]
         for (const feature of rasterLayers) {
             const f = <RasterLayerPolygon>feature
@@ -278,12 +278,13 @@ class GenerateLayouts extends Script {
             if (f.properties.type === "vector") {
                 // We also need to whitelist eventual sources
                 let url = f.properties.url
-                if(url.startsWith("pmtiles://")){
+                if (url.startsWith("pmtiles://")) {
                     url = url.substring("pmtiles://".length)
                 }
                 const styleSpec = await Utils.downloadJsonCached(url, 1000 * 120, {
                     Origin: "https://mapcomplete.org"
                 })
+                urls.push(...(f.properties["connect-src"]??[]))
                 for (const key of Object.keys(styleSpec?.sources ?? {})) {
                     const url = styleSpec.sources[key].url
                     if (!url) {
@@ -325,7 +326,7 @@ class GenerateLayouts extends Script {
             "https://www.openstreetmap.org",
             "https://api.openstreetmap.org",
             "https://pietervdvn.goatcounter.com",
-            "https://cache.mapcomplete.org",
+            "https://cache.mapcomplete.org"
         ].concat(...(await this.eliUrls()))
 
         SpecialVisualizations.specialVisualizations.forEach((sv) => {
@@ -367,7 +368,7 @@ class GenerateLayouts extends Script {
             const vectorSources = vectorLayers.map((l) => l.properties.url)
             vectorSources.push(...vectorLayers.map((l) => l.properties.style))
             apiUrls.push(...vectorSources.map(url => {
-                if(url?.startsWith("pmtiles://")){
+                if (url?.startsWith("pmtiles://")) {
                     return url.substring("pmtiles://".length)
                 }
                 return url
@@ -416,8 +417,8 @@ class GenerateLayouts extends Script {
             "script-src": [
                 "'self'",
                 "https://gc.zgo.at/count.js",
-                ...(options?.scriptSrcs?.map((s) => "'" + s + "'") ?? []),
-            ].join(" "),
+                ...(options?.scriptSrcs?.map((s) => "'" + s + "'") ?? [])
+            ].join(" ")
         }
         const content = Object.keys(csp)
             .map((k) => k + " " + csp[k])
@@ -425,7 +426,7 @@ class GenerateLayouts extends Script {
 
         return [
             `<meta http-equiv ="Report-To" content='{"group":"csp-endpoint", "max_age": 86400,"endpoints": [\{"url": "https://report.mapcomplete.org/csp"}], "include_subdomains": true}'>`,
-            `<meta http-equiv="Content-Security-Policy" content="${content}">`,
+            `<meta http-equiv="Content-Security-Policy" content="${content}">`
         ].join("\n")
     }
 
@@ -437,12 +438,12 @@ class GenerateLayouts extends Script {
     ) {
         Locale.language.setData(layout.language[0])
         const targetLanguage = layout.language[0]
-        const ogTitle = Translations.T(layout.title).textFor(targetLanguage).replace(/"/g, '\\"')
+        const ogTitle = Translations.T(layout.title).textFor(targetLanguage).replace(/"/g, "\\\"")
         const ogDescr = Translations.T(
             layout.shortDescription ?? "Easily add and edit geodata with OpenStreetMap"
         )
             .textFor(targetLanguage)
-            .replace(/"/g, '\\"')
+            .replace(/"/g, "\\\"")
         let ogImage = layout.socialImage
         let twitterImage = ogImage
         if (ogImage === LayoutConfig.defaultSocialImage && layout.official) {
@@ -501,7 +502,7 @@ class GenerateLayouts extends Script {
             og,
             customCss,
             `<link rel="icon" href="${icon}" sizes="any" type="image/svg+xml">`,
-            ...apple_icons,
+            ...apple_icons
         ].join("\n")
 
         let branchname = await this.getBranchName()
@@ -524,7 +525,7 @@ class GenerateLayouts extends Script {
             .replace(
                 /<!-- CSP -->/,
                 await this.generateCsp(layout, layoutJson, {
-                    scriptSrcs: [this.removeOtherLanguagesHash],
+                    scriptSrcs: [this.removeOtherLanguagesHash]
                 })
             )
             .replace(
@@ -555,7 +556,7 @@ class GenerateLayouts extends Script {
 
         const imports = [
             `import layout from "./src/assets/generated/themes/${theme.id}.json"`,
-            `import { ThemeMetaTagging } from "./src/assets/generated/metatagging/${theme.id}"`,
+            `import { ThemeMetaTagging } from "./src/assets/generated/metatagging/${theme.id}"`
         ]
         for (const layerName of Constants.added_by_default) {
             imports.push(
@@ -602,7 +603,7 @@ class GenerateLayouts extends Script {
             "account",
             "openstreetmap",
             "custom",
-            "theme",
+            "theme"
         ]
         // @ts-ignore
         const all: LayoutConfigJson[] = all_known_layouts.themes
@@ -654,7 +655,7 @@ class GenerateLayouts extends Script {
                 startLon: 0,
                 startZoom: 0,
                 title: { en: "MapComplete" },
-                description: { en: "A thematic map viewer and editor based on OpenStreetMap" },
+                description: { en: "A thematic map viewer and editor based on OpenStreetMap" }
             }),
             alreadyWritten
         )
diff --git a/src/assets/global-raster-layers.json b/src/assets/global-raster-layers.json
index 76bd39f130..66f391499a 100644
--- a/src/assets/global-raster-layers.json
+++ b/src/assets/global-raster-layers.json
@@ -179,6 +179,7 @@
     {
       "url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692",
       "style": "https://api.protomaps.com/styles/v2/white.json?key=2af8b969a9e8b692",
+      "connect-src": ["https://protomaps.github.io"],
       "id": "protomaps.white",
       "name": "Protomaps White",
       "type": "vector",
@@ -191,6 +192,7 @@
     {
       "url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692",
       "style": "https://api.protomaps.com/styles/v2/light.json?key=2af8b969a9e8b692",
+      "connect-src": ["https://protomaps.github.io"],
       "id": "protomaps.light",
       "name": "Protomaps Light",
       "type": "vector",
@@ -202,6 +204,7 @@
     },
     {
       "url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692",
+      "connect-src": ["https://protomaps.github.io"],
       "style": "https://api.protomaps.com/styles/v2/grayscale.json?key=2af8b969a9e8b692",
       "id": "protomaps.grayscale",
       "name": "Protomaps Grayscale",
@@ -214,6 +217,7 @@
     },
     {
       "url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692",
+      "connect-src": ["https://protomaps.github.io"],
       "style": "https://api.protomaps.com/styles/v2/dark.json?key=2af8b969a9e8b692",
       "id": "protomaps.dark",
       "name": "Protomaps Dark",
@@ -227,6 +231,7 @@
     {
       "url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692",
       "style": "https://api.protomaps.com/styles/v2/black.json?key=2af8b969a9e8b692",
+      "connect-src": ["https://protomaps.github.io"],
       "id": "protomaps.black",
       "name": "Protomaps Black",
       "type": "vector",