fix: Escape custom attribution to avoid XSS #67

CHANGELOG.md

@@ -12,6 +12,7 @@ You can also check the
 ## Unreleased
 
 - Fixes
+  - Fix XSS vulnerability caused by unescaped map layer attributions
   - Allow GraphQL endpoint to return larger responses by increasing the response
     limit to 20 MB
 

app/charts/map/custom-attribution.tsx

@@ -20,7 +20,7 @@ export const CustomAttribution = ({ attribution }: { attribution: string }) => {
     const control = new maplibregl.AttributionControl({
       // className was not working (?), so style is used. To revisit later if needed.
       customAttribution: attribution
-        ? `<span style="color: ${theme.palette.error.main}">${attribution}</span>`
+        ? `<span style="color: ${escapeHtml(theme.palette.error.main)}">${escapeHtml(attribution)}</span>`
         : undefined,
     });
 
@@ -39,3 +39,9 @@ export const CustomAttribution = ({ attribution }: { attribution: string }) => {
 
   return null;
 };
+
+function escapeHtml(text: string): string {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+}