fix: render user-controlled names via textContent instead of innerHTM…

frontend/js/leaderboard/compare.js

@@ -231,19 +231,33 @@ function updateFloatingCompareBar() {
 
   bar.style.display = "flex";
 
-  const namesStr = window.selectedUsers.map((u) => u.name).join(", ");
   const count = window.selectedUsers.length;
 
+  // Static markup (no user-controlled data) is safe via innerHTML.
   bar.innerHTML = `
-    <div class="selected-list">
-      Comparing (<span class="selected-tag">${count}/3</span>): ${namesStr}
-    </div>
+    <div class="selected-list"></div>
     <div class="actions">
       <button id="floating-btn-compare" class="btn-compare" ${count < 2 ? "disabled" : ""}>Compare</button>
       <button id="floating-btn-clear" class="btn-clear">Clear</button>
       <button id="floating-btn-cancel" class="btn-clear" style="color: var(--amber);">Cancel</button>
     </div>
   `;
+
+  // Names are user-controlled, so build this part with safe DOM nodes
+  // (textContent) instead of interpolating into innerHTML.
+  const listDiv = bar.querySelector(".selected-list");
+  listDiv.appendChild(document.createTextNode("Comparing ("));
+  const tagSpan = document.createElement("span");
+  tagSpan.className = "selected-tag";
+  tagSpan.textContent = `${count}/3`;
+  listDiv.appendChild(tagSpan);
+  listDiv.appendChild(document.createTextNode("): "));
+  window.selectedUsers.forEach((u, idx) => {
+    listDiv.appendChild(document.createTextNode(u.name));
+    if (idx < window.selectedUsers.length - 1) {
+      listDiv.appendChild(document.createTextNode(", "));
+    }
+  });
 }
 
 /**
@@ -498,22 +512,34 @@ function populateComparisonTable() {
     });
   }
 
-  let html = "<thead><tr>";
+  table.innerHTML = "";
+
+  const thead = document.createElement("thead");
+  const headerRow = document.createElement("tr");
   headers.forEach((h) => {
-    html += `<th>${h}</th>`;
+    const th = document.createElement("th");
+    // Header may include user-controlled names (textContent only).
+    th.textContent = h;
+    headerRow.appendChild(th);
   });
-  html += "</tr></thead><tbody>";
+  thead.appendChild(headerRow);
 
+  const tbody = document.createElement("tbody");
   metrics.forEach((m) => {
-    html += `<tr><td>${m.label}</td>`;
+    const row = document.createElement("tr");
+    const labelCell = document.createElement("td");
+    labelCell.textContent = m.label;
+    row.appendChild(labelCell);
     m.values.forEach((v) => {
-      html += `<td>${v}</td>`;
+      const cell = document.createElement("td");
+      cell.textContent = v;
+      row.appendChild(cell);
     });
-    html += "</tr>";
+    tbody.appendChild(row);
   });
-  html += "</tbody>";
 
-  table.innerHTML = html;
+  table.appendChild(thead);
+  table.appendChild(tbody);
 }
 
 /**

frontend/js/leaderboard/sync-changes.js

@@ -47,24 +47,63 @@ document.addEventListener("DOMContentLoaded", () => {
 
     btn.classList.add("pulse");
 
-    let html = "";
+    const fragment = document.createDocumentFragment();
+
     if (changes.rank_changes) {
       changes.rank_changes.forEach((rc) => {
         const arrow = rc.rank_delta > 0 ? "↑" : "↓";
         const color = rc.rank_delta > 0 ? "var(--green)" : "var(--red)";
-        html += `<div class="changes-content-line"><span style="color:${color}">${arrow}</span> <span><strong style="color:#fff;">${rc.username}</strong> moved #${rc.old_rank} → <strong style="color:var(--green)">#${rc.new_rank}</strong></span></div>`;
+
+        const line = document.createElement("div");
+        line.className = "changes-content-line";
+
+        const arrowSpan = document.createElement("span");
+        arrowSpan.style.color = color;
+        arrowSpan.textContent = arrow;
+        line.appendChild(arrowSpan);
+        line.appendChild(document.createTextNode(" "));
+
+        const detailSpan = document.createElement("span");
+        const nameStrong = document.createElement("strong");
+        nameStrong.style.color = "#fff";
+        // User-controlled display name (textContent only).
+        nameStrong.textContent = rc.username;
+        detailSpan.appendChild(nameStrong);
+        detailSpan.appendChild(
+          document.createTextNode(` moved #${rc.old_rank} → `),
+        );
+        const newRankStrong = document.createElement("strong");
+        newRankStrong.style.color = "var(--green)";
+        newRankStrong.textContent = `#${rc.new_rank}`;
+        detailSpan.appendChild(newRankStrong);
+
+        line.appendChild(detailSpan);
+        fragment.appendChild(line);
       });
     }
 
     if (changes.new_users && changes.new_users.length > 0) {
-      html += `<div class="changes-content-line"><span style="color:#fff;">${changes.new_users.length} new user(s) joined</span></div>`;
+      const line = document.createElement("div");
+      line.className = "changes-content-line";
+      const span = document.createElement("span");
+      span.style.color = "#fff";
+      span.textContent = `${changes.new_users.length} new user(s) joined`;
+      line.appendChild(span);
+      fragment.appendChild(line);
     }
 
     if (changes.total_new_solves && changes.total_new_solves > 0) {
-      html += `<div class="changes-content-line"><span style="color:#fff;">${changes.total_new_solves} new problems solved across ${changes.users_with_new_solves} users</span></div>`;
+      const line = document.createElement("div");
+      line.className = "changes-content-line";
+      const span = document.createElement("span");
+      span.style.color = "#fff";
+      span.textContent = `${changes.total_new_solves} new problems solved across ${changes.users_with_new_solves} users`;
+      line.appendChild(span);
+      fragment.appendChild(line);
     }
 
-    body.innerHTML = html;
+    body.innerHTML = "";
+    body.appendChild(fragment);
   }
 
   loadChanges();

frontend/registration.html

@@ -60,6 +60,7 @@ <h1 class="page-title">Join the Leaderboard</h1>
                 name="name"
                 class="form-input"
                 placeholder="Enter your full name"
+                maxlength="100"
                 required
               />
               <span class="error-msg" id="name-error"></span>