Evitar inyección de código en javascript

Todos los que nos dedicamos al mundo de la web debemos tener siempre la mosca detrás de la oreja. La seguridad no solo atañe al servidor, tenerlo actualizado o aplicar parches de seguridad. Una web será vulnerable si no se desarrolla y programa pensando siempre en seguridad por más que el servidor no tenga ningún agujero de seguridad. Una de las vulnerabilidades que, nosotros, los programadores, podemos añadir a nuestra web es la inyección de código en JavaScript. Veamos una forma en que se puede evitar.

El hecho de añadir un nodo a un select de un formalario es un candidato perfecto para incurrir en el error. Si pedimos los elementos de dicho select a backend por un API Rest por ejemplo, rellenaremos ese select con la información recibida con JavaScript o con JQuery, y es aquí, donde debemos prestar especial atención. Veamos la forma incorrecta.

$ ( '#miNodo ' ) . append('< option value="'+this.valor+'">'+this.descripcion+'< option />');

Veamos ahora la forma correcta

$ ( '#miNodo ' ) . append($('< option / >', {
  value: this.valor,
  text : this.descripcion
}));

Tan sencillo como esto, en el primer ejemplo lo que estamos agregando es texto, con lo que es susceptible de poder inyectar código arbitrario a través de this.valor y/o this.description, y en el segundo ejemplo, es JQuery quien se encarga de agregar un nodo de tipo option, con los valores que le pasamos, con lo que JQuery ya se encarga de escapar dichos valores.

Pero, cómo puede llegar código JavaScript en this.valor y this.description si estos vienen de backend? Pues por la típica gracia de un empleado descontento, un error humano, una intrusión en la base de datos, una alteración del mensaje JSON que devuelve el backend, hay muchas formas. Veamos un posible ejemplo en que uno de estos valores venga con código JavaScript.

this.valor = ' " > < script > a l e r t("Hola") < / script >';

Con ese dato ya habremos inyectado un alert dentro del select.

Esperamos que os haya sido de utilidad.