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>
This commit is contained in:
Anthony Stirling 2025-05-09 18:53:13 +01:00 committed by GitHub
parent e0c06ecebf
commit 1bb3b68a87
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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);