La siguiente función está marcada como un vector reflexivo para ataques XSS mediante software de escaneo. Sin embargo, la función nunca pasa ningún dato ingresado por el usuario de ningún tipo ni utiliza datos de una base de datos que tenga datos ingresados por el usuario.
Agregado: el objetivo del código es un módulo simple para que otras clases llamen y creen un botón con una acción de evento asignada.
Asi que,
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); } }la función se llama así:
const button = new Button("General<small><br>(Receiving)</small>", ["btn", "btn-light", "btn-outline-dark", "ml-1", "mr-1", "text-info"]);Si está absolutamente seguro de que no se ingresaron valores creados por el usuario en el argumento html , entonces está bien.
En otra nota, no debería usar .innerHTML a menos que el valor pase en HTML como <h1>content here</h1> . En su lugar, use .innerText , que no permite que se represente HTML, sino que pasa contenido CDATA sin formato.