From 1bb3b68a87c8bae1b5c76c8c43e7879b703c6af1 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Fri, 9 May 2025 18:53:13 +0100
Subject: [PATCH] Potential fix for code scanning alert no. 11: DOM text
 reinterpreted as HTML (#3497)

Potential fix for
[https://github.com/Stirling-Tools/Stirling-PDF/security/code-scanning/11](https://github.com/Stirling-Tools/Stirling-PDF/security/code-scanning/11)

To fix the issue, we should avoid using `innerHTML` to insert untrusted
data into the DOM. Instead, we can use DOM manipulation methods like
`createElement` and `appendChild` to construct the required HTML
structure safely. These methods do not interpret strings as HTML,
thereby mitigating the risk of XSS.

Specifically:
1. Replace the `innerHTML` assignment on line 302 with code that creates
the required DOM elements programmatically.
2. Ensure that the `selectedOperation` value is inserted as plain text
using `textContent` or equivalent methods.

---


_Suggested fixes powered by Copilot Autofix. Review carefully before
merging._

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
---
 src/main/resources/static/js/pipeline.js | 51 +++++++++++++++++-------
 1 file changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/main/resources/static/js/pipeline.js b/src/main/resources/static/js/pipeline.js
index 7633a6bbd..c44779c1f 100644
--- a/src/main/resources/static/js/pipeline.js
+++ b/src/main/resources/static/js/pipeline.js
@@ -299,21 +299,42 @@ document.getElementById("addOperationBtn").addEventListener("click", function ()
     }
   }
 
-  listItem.innerHTML = `
-      <div class="d-flex justify-content-between align-items-center w-100">
-          <div class="operationName">${selectedOperation}</div>
-          <div class="arrows d-flex">
-              <button class="btn btn-secondary move-up ms-1"><span class="material-symbols-rounded">arrow_upward</span></button>
-              <button class="btn btn-secondary move-down ms-1"><span class="material-symbols-rounded">arrow_downward</span></button>
-              <button class="btn ${hasSettings ? "btn-warning" : "btn-secondary"} pipelineSettings ms-1" ${
-                hasSettings ? "" : "disabled"
-              }>
-              <span class="material-symbols-rounded">settings</span>
-          </button>
-              <button class="btn btn-danger remove ms-1"><span class="material-symbols-rounded">close</span></button>
-          </div>
-      </div>
-  `;
+  let containerDiv = document.createElement("div");
+  containerDiv.className = "d-flex justify-content-between align-items-center w-100";
+
+  let operationNameDiv = document.createElement("div");
+  operationNameDiv.className = "operationName";
+  operationNameDiv.textContent = selectedOperation;
+  containerDiv.appendChild(operationNameDiv);
+
+  let arrowsDiv = document.createElement("div");
+  arrowsDiv.className = "arrows d-flex";
+
+  let moveUpButton = document.createElement("button");
+  moveUpButton.className = "btn btn-secondary move-up ms-1";
+  moveUpButton.innerHTML = '<span class="material-symbols-rounded">arrow_upward</span>';
+  arrowsDiv.appendChild(moveUpButton);
+
+  let moveDownButton = document.createElement("button");
+  moveDownButton.className = "btn btn-secondary move-down ms-1";
+  moveDownButton.innerHTML = '<span class="material-symbols-rounded">arrow_downward</span>';
+  arrowsDiv.appendChild(moveDownButton);
+
+  let settingsButton = document.createElement("button");
+  settingsButton.className = `btn ${hasSettings ? "btn-warning" : "btn-secondary"} pipelineSettings ms-1`;
+  if (!hasSettings) {
+    settingsButton.disabled = true;
+  }
+  settingsButton.innerHTML = '<span class="material-symbols-rounded">settings</span>';
+  arrowsDiv.appendChild(settingsButton);
+
+  let removeButton = document.createElement("button");
+  removeButton.className = "btn btn-danger remove ms-1";
+  removeButton.innerHTML = '<span class="material-symbols-rounded">close</span>';
+  arrowsDiv.appendChild(removeButton);
+
+  containerDiv.appendChild(arrowsDiv);
+  listItem.appendChild(containerDiv);
 
   pipelineList.appendChild(listItem);