Merge pull request #94 from jackharrhy/fix-popup-xss

generate popup contents without string concat.

CHANGES.md

@@ -11,8 +11,8 @@ Note: Minor version `0.X.0` update might break the API, It's recommended to pin
 ### Added
 
 - `type` query parameter to filter collections based on their type (`Function` or `Table`)
-- fixed a small bug in the `tipg_properties` SQL function where the bounds property was not properly transformed to 4326  (author @RemcoMeeuwissen, https://github.com/developmentseed/tipg/pull/87)
-- added popups to leaflet maps on `items` and `item` page. (author @krishnaglodha, https://github.com/developmentseed/tipg/pull/91)
+- fixed a small bug in the `tipg_properties` SQL function where the bounds property was not properly transformed to 4326 (author @RemcoMeeuwissen, https://github.com/developmentseed/tipg/pull/87)
+- added popups to leaflet maps on `items` and `item` page. (author @krishnaglodha & @jackharrhy, https://github.com/developmentseed/tipg/pull/91, https://github.com/developmentseed/tipg/pull/94)
 
 ## [0.2.0] - 2023-06-22
 

tipg/templates/item.html

@@ -39,22 +39,51 @@ <h2>Properties</h2>
       attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
     }
   ));
+
+  function displayValue(value) {
+    switch (typeof value) {
+      case 'string':
+        return value;
+      case 'number':
+        return value.toString();
+      case 'object':
+        if (value instanceof Array) {
+          return value.map(displayValue).join(', ');
+        } else {
+          return JSON.stringify(value);
+        }
+      default:
+        return '';
+    }
+  }
+
   function addPopup(feature, layer) {
     if (feature.properties) {
-          //popup HTML
-  var HTMLContent = '<div style="overflow-x:scroll">'
-  Object.keys(geojson.properties).map(prop => {
-    HTMLContent += `<b>${prop}</b> : ${geojson.properties[prop]} <br>`
-
-  })
-  HTMLContent += `</div>`
-
-        layer.bindPopup(HTMLContent);
+      var popupElm = document.createElement('div');
+      popupElm.style.overflowX = 'scroll';
+
+      Object.keys(geojson.properties).map(prop => {
+        var propElm = document.createElement('div');
+
+        var bElm = document.createElement('b');
+        bElm.innerText = prop;
+        propElm.appendChild(bElm);
+        var valueElm = document.createTextNode(` : ${displayValue(feature.properties[prop])}`);
+        propElm.appendChild(valueElm);
+
+        var brElm = document.createElement('br');
+        propElm.appendChild(brElm);
+
+        popupElm.appendChild(propElm);
+      })
+
+      layer.bindPopup(popupElm);
     }
-}
+  }
+
   var features = L.geoJSON(geojson, {
     onEachFeature: addPopup
-}).addTo(map);
+  }).addTo(map);
 
   map.fitBounds(features.getBounds());
 </script>

tipg/templates/items.html

@@ -96,13 +96,19 @@ <h1>Collection Items: {{ response.title or response.id }}</h1>
       attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
     }
   ));
+
   function addPopup(feature, layer) {
-   HTMLContent = `<a target="_blank" href="${currentURL}/${feature.id}">${feature.id}</a>`
-   layer.bindPopup(HTMLContent);
-}
+    var aElm = document.createElement('a');
+    aElm.setAttribute('href', `${currentURL}/${feature.id}`);
+    aElm.setAttribute('target', '_blank');
+    aElm.innerText = feature.id;
+    layer.bindPopup(aElm);
+  }
+
   var features = L.geoJSON(geojson, {
     onEachFeature: addPopup
-}).addTo(map);
+  }).addTo(map);
+
   map.fitBounds(features.getBounds());
 
   //