fix(web): escape loadpoint HTML and ship Leaflet on the box

.changeset/web-escape-and-vendor-leaflet.md

@@ -0,0 +1,5 @@
+---
+"ftw": patch
+---
+
+Escape loadpoint names and planner text in the dashboard, and ship Leaflet with the box instead of loading it from a CDN.

web/leaflet-vendor.test.mjs

@@ -0,0 +1,29 @@
+import assert from 'node:assert/strict';
+import { existsSync, readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import test from 'node:test';
+import { fileURLToPath } from 'node:url';
+
+const webRoot = dirname(fileURLToPath(import.meta.url));
+const weather = readFileSync(join(webRoot, 'settings', 'tabs', 'weather.js'), 'utf8');
+const vendor = join(webRoot, 'vendor', 'leaflet');
+
+test('weather map loads Leaflet from the vendored copy, not unpkg', () => {
+  assert.doesNotMatch(weather, /unpkg\.com/);
+  assert.match(weather, /\/vendor\/leaflet\/leaflet\.js/);
+  assert.match(weather, /\/vendor\/leaflet\/leaflet\.css/);
+});
+
+test('vendored Leaflet 1.9.4 files are present', () => {
+  for (const rel of [
+    'leaflet.js',
+    'leaflet.css',
+    'LICENSE',
+    'README.md',
+    'images/marker-icon.png',
+    'images/marker-icon-2x.png',
+    'images/marker-shadow.png',
+  ]) {
+    assert.ok(existsSync(join(vendor, rel)), rel + ' must be vendored');
+  }
+});

web/loadpoints-xss.test.mjs

@@ -0,0 +1,49 @@
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import test from 'node:test';
+
+const source = readFileSync(new URL('./loadpoints.js', import.meta.url), 'utf8');
+const styles = readFileSync(new URL('./style.css', import.meta.url), 'utf8');
+
+function sliceFn(name, next) {
+  const start = source.indexOf('function ' + name);
+  assert.ok(start >= 0, name + ' must exist');
+  const end = next ? source.indexOf('function ' + next, start + 1) : source.length;
+  assert.ok(end > start, name + ' must be followed by ' + next);
+  return source.slice(start, end);
+}
+
+test('escaped loadpoint IDs wrap instead of widening the page', () => {
+  const rule = styles.match(/\.lp-card-header h3\s*\{[^}]*\}/s)?.[0] || '';
+  assert.match(rule, /overflow-wrap:\s*anywhere/);
+});
+
+test('escapeHtml exists and matches the heating.js mapping', () => {
+  assert.match(source, /function escapeHtml/);
+  assert.match(source, /'&': '&'/);
+  assert.match(source, /'<': '&lt;'/);
+  assert.match(source, /'>': '&gt;'/);
+  assert.match(source, /'"': '&quot;'/);
+  assert.match(source, /"'": '&#39;'/);
+});
+
+test('loadpointCard escapes lp.id on the card wrapper', () => {
+  const card = sliceFn('loadpointCard', 'render');
+  assert.match(card, /data-lp-id="\$\{escapeHtml\(lp\.id\)\}"/);
+  assert.match(card, /<h3>\$\{escapeHtml\(lp\.id\)\}<\/h3>/);
+  assert.doesNotMatch(card, /data-lp-id="\$\{lp\.id\}"/);
+  assert.doesNotMatch(card, /\$\{lp\.id\}/);
+});
+
+test('planner reason text is escaped before it hits the table', () => {
+  assert.match(source, /escapeHtml\(a\.reason \|\| ''\)/);
+});
+
+test('vehicle driver and charging state are escaped', () => {
+  assert.match(source, /escapeHtml\(lp\.vehicle_driver\)/);
+  assert.match(source, /escapeHtml\(lp\.vehicle_charging_state\)/);
+});
+
+test('planLpId is escaped when shown in the empty-state copy', () => {
+  assert.match(source, /escapeHtml\(planLpId\)/);
+});

web/loadpoints.js

@@ -93,6 +93,12 @@
     return h > 0 ? `${h} h ${m} min` : `${m} min`;
   }
 
+  function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, function (c) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+    });
+  }
+
   const BOOST_STOP_LABELS = {
     cancelled: 'Cancelled by operator',
     expired: 'Time limit reached',
@@ -118,11 +124,11 @@
       return '<div class="lp-boost lp-boost-active">' +
         '<div class="lp-boost-title">Battery boost ' + badge('ACTIVE', true) + '</div>' +
         `<div class="lp-boost-copy">${fmtRemaining(boost.expires_at_ms)} left · home reserve ${boost.min_battery_soc_pct.toFixed(0)}%${target}</div>` +
-        `<button class="lp-boost-cancel" type="button" data-lp="${lp.id}">Stop boost</button>` +
+        `<button class="lp-boost-cancel" type="button" data-lp="${escapeHtml(lp.id)}">Stop boost</button>` +
         '</div>';
     }
     const stopped = boost.stop_reason
-      ? `<div class="lp-boost-reason">Last stop: ${BOOST_STOP_LABELS[boost.stop_reason] || boost.stop_reason}</div>`
+      ? `<div class="lp-boost-reason">Last stop: ${BOOST_STOP_LABELS[boost.stop_reason] || escapeHtml(boost.stop_reason)}</div>`
       : '';
     const blocked = !lp.plugged_in || lp.manual_active || lp.surplus_only;
     let why = '';
@@ -138,7 +144,7 @@
         '<label>EV target %<input class="lp-boost-target" type="number" min="1" max="100" step="1" placeholder="optional"></label>' +
         '<label>Departure<input class="lp-boost-departure" type="datetime-local"></label>' +
       '</div>' +
-      `<button class="lp-boost-enable" type="button" data-lp="${lp.id}" ${blocked ? 'disabled' : ''}>Enable boost</button>` +
+      `<button class="lp-boost-enable" type="button" data-lp="${escapeHtml(lp.id)}" ${blocked ? 'disabled' : ''}>Enable boost</button>` +
       (why ? `<span class="lp-boost-blocked">${why}</span>` : '') + stopped +
       '<div class="lp-boost-msg" aria-live="polite"></div>' +
       '</div>';
@@ -159,7 +165,7 @@
       ? `${lp.target_soc_pct.toFixed(0)}%${d ? ' by ' + d : ''}`
       : 'opportunistic';
     const vehicle = (lp.vehicle_driver)
-      ? `${lp.vehicle_driver}${lp.vehicle_charging_state ? ' · ' + lp.vehicle_charging_state : ''}${lp.vehicle_stale ? ' · stale' : ''}`
+      ? `${escapeHtml(lp.vehicle_driver)}${lp.vehicle_charging_state ? ' · ' + escapeHtml(lp.vehicle_charging_state) : ''}${lp.vehicle_stale ? ' · stale' : ''}`
       : '—';
     // When soc_source is "vehicle", the BMS reading (vehicle_soc_pct)
     // is ground truth and what the operator expects to see — render
@@ -176,19 +182,19 @@
         soc += ` · inferred ${lp.current_soc_pct.toFixed(1)}%`;
       }
     } else if (lp.current_soc_pct != null) {
-      soc = `${lp.current_soc_pct.toFixed(1)}%${lp.soc_source ? ' (' + lp.soc_source + ')' : ''}`;
+      soc = `${lp.current_soc_pct.toFixed(1)}%${lp.soc_source ? ' (' + escapeHtml(lp.soc_source) + ')' : ''}`;
     }
     // Inline manual SoC correction. The backend (POST /api/loadpoints/{id}/soc)
     // re-anchors the inferred SoC, so it only works during an active session —
     // show the ✎ affordance only when plugged in.
     let socCell = soc;
     if (lp.plugged_in) {
       const cur = (lp.current_soc_pct != null) ? lp.current_soc_pct.toFixed(1) : '';
-      socCell = `${soc} <button class="lp-soc-edit" type="button" data-lp="${lp.id}" data-cur="${cur}" title="Set SoC manually" ` +
+      socCell = `${soc} <button class="lp-soc-edit" type="button" data-lp="${escapeHtml(lp.id)}" data-cur="${cur}" title="Set SoC manually" ` +
         `style="background:none;border:none;cursor:pointer;color:var(--accent-e);font-size:0.9em;padding:0 4px">✎</button>`;
     }
     const rows = [
-      ['Driver',       lp.driver_name || '—'],
+      ['Driver',       lp.driver_name ? escapeHtml(lp.driver_name) : '—'],
       ['Plugged in',   badge(lp.plugged_in ? 'YES' : 'NO', lp.plugged_in)],
       ['Surplus only', badge(lp.surplus_only ? 'ON' : 'OFF', lp.surplus_only)],
       ['Live power',   fmtW(lp.current_power_w)],
@@ -216,7 +222,7 @@
     const planLpId = plan.plan.loadpoint_id || null;
     const isOurs = !planLpId || planLpId === lp.id;
     if (!isOurs) {
-      return `<div class="lp-empty">Plan is scheduling <code>${planLpId}</code>, not this loadpoint.</div>`;
+      return `<div class="lp-empty">Plan is scheduling <code>${escapeHtml(planLpId)}</code>, not this loadpoint.</div>`;
     }
     const slots = plan.plan.actions
       .filter(a => a.loadpoint_w != null || a.loadpoint_soc_pct != null)
@@ -234,7 +240,7 @@
         `<td>${fmtW(a.loadpoint_w || 0)}</td>` +
         `<td>${fmtPct(a.loadpoint_soc_pct)}</td>` +
         `<td>${fmtW(a.battery_w)}</td>` +
-        `<td>${a.reason || ''}</td>` +
+        `<td>${escapeHtml(a.reason || '')}</td>` +
         '</tr>';
     }).join('');
     return '<div class="lp-schedule-wrap">' +
@@ -252,8 +258,8 @@
   }
 
   function loadpointCard(lp, plan) {
-    return `<div class="lp-card" data-lp-id="${lp.id}">` +
-      `<div class="lp-card-header"><h3>${lp.id}</h3></div>` +
+    return `<div class="lp-card" data-lp-id="${escapeHtml(lp.id)}">` +
+      `<div class="lp-card-header"><h3>${escapeHtml(lp.id)}</h3></div>` +
       '<div class="lp-card-body">' +
       '<div>' + configBlock(lp) + batteryBoostBlock(lp) + '</div>' +
       scheduleTable(lp, plan) +
@@ -326,7 +332,7 @@
     cell.innerHTML =
       `<input type="number" class="lp-soc-input" min="0" max="100" step="0.1" value="${cur}" ` +
       `style="width:64px;font-family:var(--mono)"> ` +
-      `<button class="lp-soc-save" type="button" data-lp="${socEditingId}" title="Save">✓</button> ` +
+      `<button class="lp-soc-save" type="button" data-lp="${escapeHtml(socEditingId)}" title="Save">✓</button> ` +
       `<button class="lp-soc-cancel" type="button" title="Cancel">✗</button> ` +
       `<span class="lp-soc-msg" style="color:var(--red-e,#c23b3b);font-size:0.8em;margin-left:6px"></span>`;
     const inp = cell.querySelector('.lp-soc-input');

web/settings/tabs/weather.js

@@ -12,15 +12,11 @@
     leafletLoading = new Promise(function (resolve, reject) {
       var css = document.createElement("link");
       css.rel = "stylesheet";
-      css.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css";
-      css.integrity = "sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=";
-      css.crossOrigin = "";
+      css.href = "/vendor/leaflet/leaflet.css";
       document.head.appendChild(css);
 
       var script = document.createElement("script");
-      script.src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js";
-      script.integrity = "sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=";
-      script.crossOrigin = "";
+      script.src = "/vendor/leaflet/leaflet.js";
       script.async = true;
       script.onload = function () { resolve(); };
       script.onerror = function () {

web/style.css

@@ -2130,6 +2130,8 @@ body.advanced #ui-mode-toggle { color: #fbbf24; }
   font-size: 0.78rem;
   margin: 0;
   color: var(--fg-label, var(--text, #e8e8e8));
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 .lp-card-body {
   display: grid;

web/vendor/leaflet/LICENSE

@@ -0,0 +1,26 @@
+BSD 2-Clause License
+
+Copyright (c) 2010-2023, Volodymyr Agafonkin
+Copyright (c) 2010-2011, CloudMade
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

web/vendor/leaflet/README.md

@@ -0,0 +1,31 @@
+# Leaflet, vendored
+
+Leaflet 1.9.4, BSD-2-Clause. See `LICENSE`.
+
+Vendored rather than pulled from a CDN, for the same reason as `/vendor/three/`
+and `/vendor/ace/`: the box UI must not execute third-party JS from a CDN, and
+the weather map has to load even when the gateway cannot reach the internet.
+
+Only the browser build and the files it needs, taken from the `leaflet` npm
+package (`dist/`):
+
+| File | Why |
+|---|---|
+| `leaflet.js` | the map library (UMD/browser build, not ESM) |
+| `leaflet.css` | default controls and marker styles |
+| `images/marker-icon.png` | default marker |
+| `images/marker-icon-2x.png` | retina marker |
+| `images/marker-shadow.png` | default marker shadow |
+| `images/layers.png` | layers-control toggle |
+| `images/layers-2x.png` | retina layers-control toggle |
+
+## Updating
+
+    curl -sL https://registry.npmjs.org/leaflet/-/leaflet-<version>.tgz -o leaflet.tgz
+    tar xzf leaflet.tgz package/dist/leaflet.js package/dist/leaflet.css package/dist/images package/LICENSE
+    mkdir -p web/vendor/leaflet/images
+    cp package/dist/leaflet.js package/dist/leaflet.css package/LICENSE web/vendor/leaflet/
+    cp package/dist/images/* web/vendor/leaflet/images/
+
+Tarball sha256 for 1.9.4:
+`84c65a256e50657896f54c33bd857b6849ebe94c817803be818bf32a3dde0b77`