Aprende diseño y desarrollo web

Cursos gratuitos interactivos

46

Prevenir XSS y malas prácticas comunes

Aprende a prevenir XSS, fugas de datos y errores de validación en frontend con prácticas defendibles en producción.

¿Cuánto sabes de JavaScript?

📘 Teoría

XSS: dónde nace y cómo se evita

El riesgo aparece al renderizar datos sin sanitizar.

Nunca insertes input de usuario con `innerHTML` sin sanitizado.
Prefiere `textContent` para contenido textual.
Valida en cliente y vuelve a validar en servidor.
Configura CSP como capa adicional.

Patrón de render seguro en JS

Escapar salida reduce superficie de ataque.

Render seguro con textContent

const li = document.createElement('li');
li.textContent = userComment;
commentsList.append(li);

Dependencias y supply chain

Una librería vulnerable también es tu vulnerabilidad.

Revisa advisories (`npm audit`).
Evita paquetes sin mantenimiento activo.
Fija versiones en lockfile.
Actualiza con pruebas, no a ciegas.

Checklist mínimo antes de release

No publiques sin esta revisión.

Entradas validadas y saneadas.
No secrets en frontend.
Headers y CSP definidos.
Dependencias críticas revisadas.

1 XSS: dónde nace y cómo se evita 2 Patrón de render seguro en JS 3 Dependencias y supply chain 4 Checklist mínimo antes de release

🧪 Aprende probando

Ejemplo Ejemplo guiado: de `innerHTML` a render seguro Transforma un render vulnerable en uno seguro.

⌄

🏁 Retos

Reto Reto: validar formulario antes de enviar Bloquea envío si email o password no cumplen reglas mínimas.

⌄

🧰 Recursos

Enlaces útiles

MDN: JavaScript MDN: Guía de JavaScript javascript.info MDN: Referencia de JavaScript MDN: Guide web.dev: Learn JavaScript

Test

Comprueba tus conocimientos con un test sobre JavaScript.

Test de JavaScript

Recursos del curso 62

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

Medir y optimizar rendimiento JS

Tests unitarios y de integración básicos