🛡️ Sentinel: [HIGH] Fix XSS vulnerability in href injection

.jules/sentinel.md

@@ -6,3 +6,8 @@
 **Vulnerability:** XSS (Cross-Site Scripting) risk from unescaped parameters passed to reusable UI components (`openModal`'s `title` option and `showToast`/`showPRToast` message inputs) being interpolated directly into `innerHTML`.
 **Learning:** Depending on callers to sanitize parameters before calling generic UI functions creates a high risk of developer oversight, which was the case for many invocations of these components across the codebase. Centralizing the `escapeHTML` check within the component itself completely mitigates this entire class of bugs and avoids double-escaping issues.
 **Prevention:** Sanitize inputs like `title`, `message`, and related text parameters directly inside utility components (e.g., modals, toasts, cards) using `escapeHTML` *before* inserting them into `innerHTML`.
+
+## 2024-05-24 - Protocol URI-based XSS Prevention
+**Vulnerability:** XSS vulnerability through `javascript:` protocol URIs injected into dynamically generated `href` attributes (e.g., `ex.mediaUrl` and `info.url`).
+**Learning:** `escapeHTML` alone does not protect against XSS if the untrusted data controls the entire `href` attribute, because a user can supply a `javascript:` URI (which doesn't necessarily contain HTML special characters) that executes script upon clicking.
+**Prevention:** Supplement `escapeHTML()` with explicit protocol validation (e.g., a `sanitizeUrl` function) to ensure the URL starts with an expected protocol like `http://` or `https://`.

src/pages/exercises.js

@@ -10,6 +10,7 @@ import { createLineChart } from '../components/charts.js';
 import { getExerciseHistory } from '../engine/progression.js';
 import { createRMCalculator } from '../components/rm-calculator.js';
 import { getSetting } from '../data/db.js';
+import { sanitizeUrl } from '../utils/sanitize.js';
 
 export async function renderExercisesPage(container) {
     const exercises = await getAll('exercises');
@@ -130,7 +131,7 @@ export async function renderExercisesPage(container) {
       </div>
 
       ${ex.mediaUrl ? `
-        <a href="${ex.mediaUrl}" target="_blank" rel="noopener" class="btn btn-secondary btn-full" style="margin-bottom:var(--sp-4)">
+        <a href="${sanitizeUrl(ex.mediaUrl)}" target="_blank" rel="noopener" class="btn btn-secondary btn-full" style="margin-bottom:var(--sp-4)">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <polygon points="5 3 19 12 5 21 5 3"/>
           </svg>

src/pages/settings.js

@@ -8,6 +8,7 @@ import { showToast } from '../components/toast.js';
 import { STANDARD_PLATES_LB, STANDARD_PLATES_KG } from '../engine/progression.js';
 import { getGistToken, setGistToken, validateToken, pushBackup, pullBackup, restoreFromGist, getBackupInfo, disconnectGist } from '../data/gist-backup.js';
 import { getWebDavConfig, setWebDavConfig, pushToWebDav, pullFromWebDav, disconnectWebDav } from '../data/webdav.js';
+import { sanitizeUrl } from '../utils/sanitize.js';
 
 export async function renderSettingsPage(container) {
   const unit = await getSetting('unit', 'lb');
@@ -259,7 +260,7 @@ export async function renderSettingsPage(container) {
               <div class="text-sm font-medium text-success">● Connected</div>
               <div class="text-xs text-muted">Last backup: ${lastBackup}</div>
             </div>
-            ${info ? `<a href="${info.url}" target="_blank" class="text-xs" style="color:var(--accent)">View Gist ↗</a>` : ''}
+            ${info ? `<a href="${sanitizeUrl(info.url)}" target="_blank" class="text-xs" style="color:var(--accent)">View Gist ↗</a>` : ''}
           </div>
           <div class="flex gap-2">
             <button class="btn btn-primary btn-sm" id="gist-push" style="flex:1">Push Backup</button>

src/utils/sanitize.js

@@ -7,3 +7,12 @@ export function escapeHTML(str) {
     .replace(/"/g, """)
     .replace(/'/g, "'");
 }
+
+export function sanitizeUrl(url) {
+  if (typeof url !== 'string') return '#';
+  const cleanUrl = url.trim();
+  if (cleanUrl.startsWith('http://') || cleanUrl.startsWith('https://')) {
+    return escapeHTML(cleanUrl);
+  }
+  return '#';
+}