Merge pull request Stellar-IndigoPay#800 from Jayking40/main

Fix runtime CDN dependency for Leaflet CSS

Author: LaPoshBaby

frontend/components/ProjectMap.tsx

@@ -33,24 +33,9 @@ interface ProjectMapProps {
 
 // ── Component ──────────────────────────────────────────────────────────────────
 
+import "leaflet/dist/leaflet.css";
+
 export default function ProjectMap({ projects }: ProjectMapProps) {
-  // Leaflet needs the CSS — import it once at runtime (not at module level so
-  // it doesn't run on the server via accidental imports).
-  useEffect(() => {
-    // Only import once; subsequent HMR reloads skip this because the link
-    // element already exists in the document head.
-    if (
-      typeof document !== "undefined" &&
-      !document.head.querySelector('link[href*="leaflet"]')
-    ) {
-      const link = document.createElement("link");
-      link.rel = "stylesheet";
-      link.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css";
-      link.integrity = "sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=";
-      link.crossOrigin = "anonymous";
-      document.head.appendChild(link);
-    }
-  }, []);
 
   return (
     <MapContainer

frontend/middleware.ts

@@ -16,9 +16,6 @@ const LEAFLET_TILE_SOURCES = [
   "https://c.tile.openstreetmap.org",
 ].join(" ");
 
-// unpkg.com serves the Leaflet CSS loaded dynamically in ProjectMap.tsx.
-const UNPKG = "https://unpkg.com";
-
 export function buildCsp(nonce: string, isWidget: boolean): string {
   // API origin: 'self' covers same-origin deploys; NEXT_PUBLIC_API_URL covers
   // deployed backends and CI/E2E environments (e.g. http://localhost:4000).
@@ -49,8 +46,7 @@ export function buildCsp(nonce: string, isWidget: boolean): string {
     // nonce tags the Next.js script injection; strict-dynamic propagates trust
     // to the bundles it loads (inline scripts are nonce'd, never inline-allowed).
     `script-src ${scriptSrc}`,
-    // unpkg serves the Leaflet CSS stylesheet.
-    `style-src 'self' 'unsafe-inline' https://fonts.googleapis.com ${UNPKG}`,
+    `style-src 'self' 'unsafe-inline' https://fonts.googleapis.com`,
     "font-src 'self' https://fonts.gstatic.com",
     // OSM tile images are loaded as <img> elements by Leaflet TileLayer.
     // Leaflet marker icons use data: URIs (our inline SVG divIcon).

frontend/next.config.mjs

@@ -40,9 +40,6 @@ const LEAFLET_TILE_SOURCES = [
   "https://c.tile.openstreetmap.org",
 ].join(" ");
 
-// unpkg serves the Leaflet CSS (dynamically injected by ProjectMap.tsx)
-const UNPKG = "https://unpkg.com";
-
 function buildStaticCsp(allowFraming = false) {
   const frameAncestors = allowFraming
     ? "frame-ancestors *"
@@ -51,8 +48,7 @@ function buildStaticCsp(allowFraming = false) {
     "default-src 'self'",
     // static fallback uses placeholder nonce for inline scripts; actual nonce injected by middleware
     `script-src 'self' 'nonce-{nonce}' https://*.stellar.org`,
-    // unpkg serves the Leaflet CSS stylesheet loaded dynamically in ProjectMap.
-    `style-src 'self' 'unsafe-inline' https://fonts.googleapis.com ${UNPKG}`,
+    `style-src 'self' 'unsafe-inline' https://fonts.googleapis.com`,
     "font-src 'self' https://fonts.gstatic.com",
     // OSM tiles loaded as images; Leaflet marker icons use data: URIs.
     `img-src 'self' data: blob: ${LEAFLET_TILE_SOURCES}`,