The following function is flagged as a reflective vector for XSS attacks by scanning software. However, the function is never passed any user-inputted data of any kind nor does it use data from a database that has user-entered data.
Added: The goal of the code is a simple module for other classes to call and build a button with an assigned event action.
So,
export default class Button {
constructor(html = "", classList = []) {
this._button = document.createElement("button");
this._button.classList.add(...classList);
this._button.innerHTML = html; // <-- flagged by scanning software
}
get button() {
return this._button;
}
setOnClickAction(action = null) {
if (action === null || !(action instanceof Function)) {
throw new Error("Button action cannot be null.");
}
this._element.addEventListener("click", action);
}
}
function is called like this:
const button = new Button("General<small><br>(Receiving)</small>",
["btn", "btn-light", "btn-outline-dark", "ml-1", "mr-1", "text-info"]);
If you are absolutely sure no user created values at all are entered in the html argument, then it is fine.
On another note, you shouldn't be using .innerHTML unless the value will pass in HTML like <h1>content here</h1>. Instead, use .innerText, which does not allow HTML to be rendered, instead passes plain CDATA content.