Mostrando entradas con la etiqueta Bookmarklets. Mostrar todas las entradas
Mostrando entradas con la etiqueta Bookmarklets. Mostrar todas las entradas

viernes, 28 de diciembre de 2012

Consulta tus cuentas sin restricciones

En estas fechas solemos hacer balance de todo lo acontecido durante el año y nos hacemos propositos para mejorar en el año que va a comenzar y, tal y como está la situación económica, también es buen momento para hacer balance de nuestras cuentas y así poder ver donde se nos ha ido el presupuesto.

En mi caso accedí a la banca electrónica de Cajamar e intenté realizar una consulta de movimientos desde el uno de enero de 2012 hasta hoy pero Cajamar solo permite realizar consultas de seis meses (en bloques de seis meses), imagino que para evitar la saturación de sus sistemas pero en fin, el caso es que no he podido salirme con la mía... ¿o sí?


Al pulsar el botón "Aceptar" de la página de Cajamar me di cuenta que no se hacía ninguna petición al servidor (no se volvía a cargar la página) y por tanto la validación de los datos se debía hacer utilizando javascript así que me puse a mirar el código de la página para ver si me podía saltar dicha validación.


Como se puede apreciar, al pulsar el botón "Aceptar" se llama a la función doSubmit pasandole los parámetros 'ACEPTAR', 2 y false. Si buscamos la función doSubmit la encontramos en el archivo screen_code_v1.js que es incluido en la parte inicial de la página.


Y al abrir este archivo y mirar lo que hace la función doSubmit nos encontramos con una pequeña sorpresa:


A la función se le pasan tres parámetros y el segundo de ellos (llamado a) es el que controla si se debe o no hacer la validación de los campos del formulario. En este caso si el valor de a es igual a 2 se realizará la validación del formulario y si le indicamos cualquier otra cosa no se realizará dicha validación. ¡Esto pinta bien!

¿Podríamos llamar a la función doSubmit con los parámetros 'ACEPTAR', 1 y false? la respuesta es sí pero tenemos que tener en cuenta dos cosas, la primera es que la página de Cajamar se carga en varios frames y que el formulario se encuentra en un frame llamado "contenido" y la segunda es que debemos simular la pulsación del botón ACEPTAR por lo que debemos ejecutar todo el código de dicho botón, es decir:

field_executed(getFieldLayer('ACEPTAR'),getForm('ACEPTAR').REACTION_CODE); doSubmit('ACEPTAR',2,false);

Por lo que nuestro código debería quedar así

contenido.field_executed(contenido.getFieldLayer('ACEPTAR'), contenido.getForm('ACEPTAR').REACTION_CODE); contenido.doSubmit('ACEPTAR',1,false);


Notese que hemos cambiado el 2 por un 1 en la función doSubmit y que hemos añadido el identificador "contenido" antes de llamar a las funciones.

Como queda un poco largo lo podemos guardar en nuestros favoritos (marcadores) creando así un nuevo bookmarklet como los que ya he comentado en alguna ocasión.

Y, finalmente, después de ejecutar este bookmarklet tengo ante mi la consulta de todo el año de mi cuenta.


Si queremos acortar un poco el bookmarklet podemos introducir la fecha que queremos en el formulario y luego pulsar el botón "Aceptar". Esto hará que se muestre el mensaje de error pero también hará que se ejecute la primera parte del código del bookmarklet, es decir field_executed(getFieldLayer('ACEPTAR'), getForm('ACEPTAR').REACTION_CODE) por lo que ya no sería necesario volver a ejecutarla y ahora si podríamos escribir en la barra de direcciones simplemente javascript: contenido.doSubmit('ACEPTAR',1,false) obteniendo el mismo resultado.


Si todo esto os parece demasiado complejo también podéis utilizar la extensión Tamper Data de Firefox y modificar los datos del formulario justo antes de ser enviados obteniendo el mismo resultado.

Espero que os sea de utilidad y que el balance del año (y de vuestras cuentas) haya sido positivo.

miércoles, 9 de junio de 2010

Falsear votaciones de LaSexta

Últimamente estoy hablando mucho sobre los bookmarklets pero es que realmente tienen muchas aplicaciones. Normalmente son pequeños scripts que nos facilitan la vida al realizar tareas monotonas pero también permiten acceder a funcionalidad de la página lo cual puede ser "peligroso" si el programador no ha previsto que el usuario pueda hacer llamadas con parámetros modificados.

Concretamente, en LaSexta.com, son las votaciones las que pueden ser victima de este tipo de "ataques" ya que el programador ha supuesto que nadie alteraria los parámetros de entrada de sus funciones.

Veamos un ejemplo. Si accedemos esta página de LaSexta.com vemos un video de Dani Mateo en el programa "Se lo que hicisteis...", y un sistema de votaciones con las típicas estrellitas abajo a la derecha.


Si somos algo curiosos y miramos el código fuente de la página veremos que cada una de las estrellas tiene asociado un código javascript que se ejecutará al pulsar sobre ella.


Se puede apreciar que al pulsar sobre las estrellas se llama a la función votar indicandole un código que, a priori, no nos dice nada pero llama la atención ver como el primer caracter se corresponde con el número de puntos a sumar a la votación.

votar('1_155802_28_3_11') -- 1 punto
votar('2_155802_28_3_11') -- 2 puntos
votar('3_155802_28_3_11') -- 3 puntos
votar('4_155802_28_3_11') -- 4 puntos
votar('5_155802_28_3_11') -- 5 puntos

¿Que pasaría si forzamos una llamada a la función votar modificando ese parámetro?, por ejemplo:

votar('100_155802_28_3_11')

¿Se contabilizarian 100 puntos?. Para probarlo podemos escribir este código en la barra del navegador, al estilo de un bookmarklet.


Vaya, parece que no hemos tenido exito y la votación no ha sido reconocida, o, por lo menos, esa es la sensación que da al ver el texto "Undefined" junto a las estrellas de la votación. Debe ser que el programador ha tenido en cuenta este problema y verifica los datos de entrada de la función... ¿o no?

Veamos con otro ejemplo:
votar('5+70_273381_2_1_10')

Nuevamente, lo ejecutamos en la barra de direcciones del navegador y... ¡sorpresa!


¿Su voto fué guardado correctamente? ¿querra decir esto que efectivamente se ha actualizado la votación? ¿cuantos puntos se habrán contabilizado? Todas estas preguntas tienen respuesta al recargar la página ya que vemos que el computo final de la votación asciende a ¡¡¡75 votos!!!


Así que se puede apreciar que el código javascript modificado ha tenido exito y, de 0 votos ha pasado a tener 75, es decir 0+5+70. Curioso ¿verdad? ¿querrá decir esto que se puede indicar cualquier operación aritmética como parámetro en la función votar? vamos a ver otro ejemplo...

votar('5-15_155802_28_3_11')

Al ejecutarlo en el navegador podemos ver que efectivamente, se le han restado 10 votos (5-15 = -10) y que actualmente la votación tiene 65 puntos, es decir, 75+5-15.


Con lo que parece que se puede concluir que la función votar acepta cualquier tipo de operación aritmética de forma que es facil manipular este tipo de votaciones, incrementando o decrementando el número total de votos a nuestro gusto.

Una cosa a tener en cuenta en este proceso es que tanto el código de la función votar como el código utilizado para visualizar el número de votos se encuentra en el lado del cliente (código HTML/Javascript) por lo que normalmente el navegador lo tendrá cacheado y es por eso que parezca que no siempre se modifica la votación cuando debería (con borrar la caché se verá la votación actualizada). También hay que tener en cuenta que el sistema de votaciones de LaSexta no funciona demasiado bien con Internet Explorer (yo he usado Firefox) por lo que si lo intentais utilizando IE es posible que obtengais algún error de JavaScript.

domingo, 30 de mayo de 2010

Bookmarklets y Google Maps

Hace unos dias ya comente brevemente que eran los bookmarklets y para que podian ser utilizados. Por lo general se trata de funciones y métodos de javascript que son utilizados desde la barra del navegador pero también podemos hacer uso de funciones definidas en la propia página que visitamos.

Por ejemplo, ¿quien no ha sentido curiosidad por conocer las coordenadas de su casa cuando visita Google Maps? una forma "sencilla" de saber las coordenadas de un punto en los mapas de google es pulsar sobre el enlace que muestra el texto "enlazar", al pulsar en dicho enlace se muestra una pequeña ventana que nos da información sobre la url que debemos teclear en nuestro navegador si queremos ir directamente a la localización que tenemos en pantalla (o si queremos guardarla en nuestros favoritos). También nos muestra el código que deberiamos utilizar si quisieramos poner el mapa en nuestra página web.

Ambos códigos deben saber la localización exacta (latitud y longitud) del punto que estamos visualizando ya que de no ser así no podrian volver a mostrarlo. Uno de los parámetros que se muestran es el parámetro llamado ll, es decir, latitud y longitud

http://maps.google.es/?ie=UTF8&ll=40.513799,-3.383789&spn=14.755672,31.464844&t=h&z=5

En el caso concreto del punto que estamos visualizando obtenemos que la latitud es 40.513799 y la longitud -3.383789 pero como ya comentaba al principio de este post, con un bookmarklet se puede automatizar este proceso. ¿Como obtener el código javascript que nos de esta información? para ello hay que documentarse un poco sobre como funciona GMaps, concretamente, su API

La API (application programming interface) no es ni más ni menos que un conjunto de funciones (en este caso javascript) que facilitan al usuario la tarea de "comunicarse" con la aplicación, en este caso, con el mapa.

En nuestro bookmarklet vamos a hacer uso de dos funciones de la API de Google Maps, gApplication.getMap y GEvent.addListener.

gApplication.getMap obtiene un apuntador al mapa que estamos visualizando mientras que GEvent.addListener permite definir un evento sobre el mapa. En este caso vamos a hacer que cada vez que hacemos click sobre el mapa nos muestra la latitud y longitud en el cuadro de búsqueda, de esta forma, conforme nos vamos moviendo por el mapa podremos ir viendo las distintas latitudes y longitudes donde nos vamos posicionando.

El bookmarklet seria algo así:

javascript: mapa = gApplication.getMap(); GEvent.addListener(mapa, "click", function(marcador, punto) { document.forms(0)("q").value=punto.toString(); }); alert("Al hacer click en el mapa se mostrarán las coordenadas en el cuadro de busqueda");

Lo primero que hace nuestro bookmarklet es definir una variable llamada mapa que hará referencia al mapa que tenemos en pantalla (se inicializa con gApplication.getMap) y después se le indica que cuando se haga click sobre el mapa ejecute una función. El evento "click" del mapa tiene dos parámetors, uno es el marcador donde se hace click (en caso de existir) y el otro el punto donde se ha hecho click, es decir, las coordenadas.

La función que se ejecutará cada vez que se haga click es document.forms(0)("q").value = punto.toString() lo que equivale a decir queremos que el valor de uno de los campos del formulario muestre el valor que tiene actualmente la variable punto y como ya hemos comentado, punto, son las coordenadas que nos interesan. "q" es el cuadro de búsqueda de Google Maps (donde generalmente escribimos que queremos buscar) así que una vez ejecutado nuestro bookmarlet podremos ver algo así


Pienso que esto es bastante más cómodo que tener que estar pulsando sobre el botón "enlazar" y buscando el parámetro ll además, si tenemos este código guardado en nuestros favoritos será muy facil añadir esta funcionalidad siempre que visitemos la página de Google Maps.

miércoles, 26 de mayo de 2010

Bookmarklets

¿Que es un bookmarklet? es un pequeño fragmento de código javascript que se suele guardar como un enlace en la carpeta de favoritos para poder utilizarlo con facilidad en cualquier web por la que navegamos de forma que se le da nueva funcionalidad y se pueden automatizar ciertas tareas.

Guardar estos fragmentos de código en la carpeta de favoritos es solamente una forma de tenerlos medianamente organizados ya que no es estrictamente necesario, podemos ejecutarlos directamente desde la barra de direcciones del navegador.





Un bookmarklet clásico es el que se utiliza para eliminar la "protección" con la que algunas páginas intentan que el usuario no pueda acceder al menu contextual que aparece al pulsar el botón derecho del ratón, complicando así que el usuario pueda, por ejemplo, guardar las imagenes que hay en dicha página.

Activar el botón derecho


Pero mi favorito es el bookmarklet utilizado para mostrar los datos de los formularios de la página, incluidos los campos ocultos lo que nos puede descubrir algunos "secretos" de la página.

Mostrar información de los formularios


Y bueno, una vez conocida la información de los formularios nada nos impide modificarlos utilizando javascript desde la barra del navegador para, por ejemplo, modificar el valor de un campo oculto, desactivar el atributo de solo lectura de algunos controles, etc.