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 = ` let containerDiv = document.createElement("div");
<div class="d-flex justify-content-between align-items-center w-100"> containerDiv.className = "d-flex justify-content-between align-items-center w-100";
<div class="operationName">${selectedOperation}</div>
<div class="arrows d-flex"> let operationNameDiv = document.createElement("div");
<button class="btn btn-secondary move-up ms-1"><span class="material-symbols-rounded">arrow_upward</span></button> operationNameDiv.className = "operationName";
<button class="btn btn-secondary move-down ms-1"><span class="material-symbols-rounded">arrow_downward</span></button> operationNameDiv.textContent = selectedOperation;
<button class="btn ${hasSettings ? "btn-warning" : "btn-secondary"} pipelineSettings ms-1" ${ containerDiv.appendChild(operationNameDiv);
hasSettings ? "" : "disabled"
}> let arrowsDiv = document.createElement("div");
<span class="material-symbols-rounded">settings</span> arrowsDiv.className = "arrows d-flex";
</button>
<button class="btn btn-danger remove ms-1"><span class="material-symbols-rounded">close</span></button> let moveUpButton = document.createElement("button");
</div> moveUpButton.className = "btn btn-secondary move-up ms-1";
</div> 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); pipelineList.appendChild(listItem);