From f84e95ed6cba83062e8f323468d4dc7a3d0ac884 Mon Sep 17 00:00:00 2001
From: Vinay Keerthi <11478411+stonecharioteer@users.noreply.github.com>
Date: Wed, 21 Jan 2026 13:44:15 +0530
Subject: [PATCH] fix: use safe DOM manipulation for article heading permalinks
 (#13239)

---
 app/javascript/portal/portalHelpers.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/javascript/portal/portalHelpers.js b/app/javascript/portal/portalHelpers.js
index 1fdc51276..18a54c58e 100644
--- a/app/javascript/portal/portalHelpers.js
+++ b/app/javascript/portal/portalHelpers.js
@@ -14,13 +14,22 @@ export const getHeadingsfromTheArticle = () => {
   const rows = [];
   const articleElement = document.getElementById('cw-article-content');
   articleElement.querySelectorAll('h1, h2, h3').forEach(element => {
-    const slug = slugifyWithCounter(element.innerText);
+    const headingText = element.innerText;
+    const slug = slugifyWithCounter(headingText);
     element.id = slug;
     element.className = 'scroll-mt-24 heading';
-    element.innerHTML += `<a class="permalink text-slate-600 ml-3" href="#${slug}" title="${element.innerText}" data-turbolinks="false">#</a>`;
+
+    const permalink = document.createElement('a');
+    permalink.className = 'permalink text-slate-600 ml-3';
+    permalink.href = `#${slug}`;
+    permalink.title = headingText;
+    permalink.dataset.turbolinks = 'false';
+    permalink.textContent = '#';
+    element.appendChild(permalink);
+
     rows.push({
       slug,
-      title: element.innerText,
+      title: headingText,
       tag: element.tagName.toLowerCase(),
     });
   });