JavaScript
Explica riesgos frecuentes como XSS, inyección, exposición de secretos y confianza indebida en datos, junto con controles para reducir superficie de ataque.
La seguridad comienza al reconocer . Cualquier dato que proviene del usuario, red, URL, almacenamiento, mensajes o dependencias puede ser manipulado.
entrada no confiable
↓
validar estructura y dominio
↓
representación interna segura
↓
encoding según el destino
↓
efecto autorizadopostMessage.No confíes en un valor solo porque lo generó una versión anterior de tu propia aplicación.
const product = parseProduct(await response.json());Comprueba forma, tipo e invariantes antes de usar datos en el núcleo.
La validación no vuelve seguro insertar texto en cualquier destino. Después debes aplicar la codificación adecuada al contexto.
Un mismo valor requiere reglas diferentes para:
No existe una función universal escapeEverything.
Cross-Site Scripting ocurre cuando datos no confiables terminan ejecutándose como código en el origen de la aplicación.
Peligroso:
element.innerHTML = userInput;Seguro para texto:
element.textContent = userInput;Si necesitas HTML, utiliza una sanitización mantenida y una política clara de elementos y atributos permitidos.
Sources comunes:
location.search;
location.hash;
localStorage;
messageEvent.data;Sinks peligrosos incluyen:
innerHTML;
outerHTML;
insertAdjacentHTML;
eval;
new Function;
setTimeout(string);La vulnerabilidad puede existir completamente en frontend sin que el servidor refleje el texto.
Una política CSP puede exigir objetos TrustedHTML para sinks sensibles.
Content-Security-Policy: require-trusted-types-for 'script'Trusted Types ayuda a centralizar creación de HTML confiable, pero no convierte automáticamente entrada insegura en segura.
Content-Security-Policy: default-src 'self'; script-src 'self'; object-src 'none'CSP limita fuentes y ciertos comportamientos. Una política fuerte evita scripts inline inseguros mediante nonces o hashes.
Es defensa en profundidad, no sustituto de evitar inyección.
eval(userInput);
new Function(userInput)();Ejecutar entrada como código permite control total dentro de los permisos de la página.
Para datos utiliza JSON. Para fórmulas o reglas, diseña un lenguaje limitado y parser propio o una librería especializada.
Object.assign(target, untrustedObject);Claves como __proto__, constructor o prototype pueden alterar comportamiento en combinaciones vulnerables.
Protecciones:
Object.hasOwn.if (user.role === "admin") {
showAdminButton();
}Esto mejora UI, pero no protege la operación. El servidor debe verificar identidad y permiso en cada acción sensible.
Ocultar un botón no es control de acceso.
Cualquier token accesible al JavaScript de la página puede ser robado por XSS.
Cookies HttpOnly reducen lectura directa, pero necesitan:
No guardes claves privadas o secretos permanentes en frontend.
Cuando el navegador envía credenciales automáticamente, un sitio externo puede intentar provocar acciones.
Protecciones:
location.href = params.get("next");Un atacante puede crear enlaces que envían a una página maliciosa.
function parseInternalRedirect(value) {
const url = new URL(value, location.origin);
if (url.origin !== location.origin) {
throw new Error("External redirect is not allowed");
}
return url;
}window.addEventListener("message", (event) => {
if (event.origin !== TRUSTED_ORIGIN) return;
const message = parseMessage(event.data);
});Al enviar datos sensibles, especifica targetOrigin; no utilices *.
Un enlace con target="_blank" puede obtener una referencia a la ventana que lo abrió en ciertos escenarios.
<a
href="https://external.example"
target="_blank"
rel="noopener noreferrer"
>Navegadores modernos aplican algunas protecciones por defecto, pero expresar la intención sigue siendo claro.
Cada paquete añade:
Buenas prácticas:
const apiSecret = import.meta.env.API_SECRET;Si el valor se incluye en un bundle frontend, el usuario puede obtenerlo. El prefijo “secret” no cambia eso.
Mantén secretos en servidores o entornos no entregados al cliente.
Una RegExp vulnerable puede consumir CPU excesiva con entrada diseñada.
/^(a+)+$/;Limita tamaño, revisa backtracking y evita patrones ambiguos en datos no confiables.
Un payload muy grande o profundo puede agotar memoria o bloquear parsing.
Controla:
No implementes cifrado, hashing de contraseñas o generación de tokens con Math.random.
Utiliza APIs y librerías revisadas:
crypto.getRandomValues(array);
crypto.subtle;Web Crypto tiene contratos complejos; elegir algoritmo, parámetros y gestión de claves sigue requiriendo diseño especializado.
No expongas:
Registra contexto mínimo útil con controles de acceso y retención.
function renderComment(comment) {
const article = document.createElement("article");
const author = document.createElement("strong");
const body = document.createElement("p");
author.textContent = comment.authorName;
body.textContent = comment.body;
article.append(author, body);
return article;
}Los datos no se interpretan como markup.
¿Por qué validar que comment.body es string no basta antes de asignarlo a innerHTML?
Porque un string puede contener markup y scripts peligrosos. La validación del tipo no aplica la codificación o sanitización requerida por el contexto HTML.
Testing de JavaScript explica cómo verificar contratos, límites, efectos y asincronía.