Algo de seguridad para javascript
Posteado Por CatrianEn programación siempre es muy importante tener en cuenta la seguridad al momento de escribir código y uno de los principales puntos que debemos tener en cuenta es el Cross Site Scripting (XSS). En PHP se suelen usar funciones de escape para evitar el XSS y lo lógico sería que usáramos la misma técnica en javascript para escapar el HTML. Sin embargo, esta no es una técnica que debamos usar en javascript ya que lo que realmente necesitamos es evitar la inyección directa en el código.
Lo adecuado es crear elementos DOM de forma programática e irlos insertando en el DOM. Esto significa que se debe evitar el uso de .html(), .innerHTML y otras funciones relacionadas, en su lugar es recomendable usar .append(), .prepend(), .before(), .after() y otras similares.
Por ejemplo:
1 2 3 4 5 6 | jQuery.ajax({ url: 'http://unsitio.com/datos.json' }).done( function( data ) { var link = '<a href="' + data.url + '">' + data.title + '</a>'; jQuery( '#unDiv' ).html( link ); }); |
Esta aproximación puede ser peligrosa ya que estamos confiando en que la respuesta por parte de unsitio.com sólo incluye contenido seguro, algo que no podemos garantizar aún cuando el sitio sea nuestro. Cómo podemos asegurar que data.title no contiene:
1 | <script type="text/javascript"> alert( "haxxored"); </script>; |
En lugar de esto, la forma correcta sería crear un elemento DOM de forma programática y luego insertarlo en el DOM:
1 2 3 4 5 6 7 8 | jQuery.ajax({ url: 'http://unsitio.com/datos.json' }).done( function( data ) { var a = jQuery( '' ); a.attr( 'href', data.url ); a.text( data.title ); jQuery( '#unDiv' ).append( a ); }); |
Nota: técnicamente, es más rápido insertar HTML ya que el navegador está optimizado para interpretarlo. La mejor solución es minimizar la inserción de elementos DOM construyendo muchos elementos en memoria e insertarlos como bloque en el DOM, claro, cuando sea posible.
Al pasar los datos a través de jQuery o de la API DOM del navegador, aseguramos que los valores están debidamente desinfectados y eliminamos la necesidad de inyectar snippets HTML inseguros en la página.
Para garantizar la seguridad de la aplicación, es recomendable usar la API DOM proporcionada por el navegador (o jQuery) para toda la manipulación DOM.
