Funciones y objetos en javascript

Tras algunos días viendo aspectos técnicos de javascript llega el momento de unir todos los conocimientos adquiridos con el objetivo de comprender y crear códigos javascript más complejos. Como ya vimos javascript juega un papel fundamental en el hacking y es este mismo motivo por el que llevamos ya varias publicaciones descubriendo a fondo el lenguaje javascript.

Funciones javascript

En casi la totalidad de los lenguajes de programación encontramos la característica de poder utilizar funciones y procedimientos. Javascript no iba a ser menos y como tal nos permite definir nuestras propias funciones a la vez que nos permite utilizar muchas nativas del lenguaje. Lo cual nos simplificará el trabajo si estamos del lado de la programación y nos ayudará a comprender el código si estamos desde el punto de vista del auditor de seguridad.

¿Qué es una función para javascript?

que es una función javascriptDe manera formal una función es un algoritmo que recibe determinado/s parámetro/s y devuelve el resultado de haber realizado con ellos una secuencia de operaciones y/o sentencias. Aunque si prefieres una definición un poco más amigable podemos definir una función como «una caja» en la que tu metes unos datos y te devuelve un resultado sin que tu tengas que preocuparte de cómo lo hace. Podemos crear funciones encargadas de buscar alguna palabra dentro de un texto, funciones que verifican la fortaleza de una contraseña, etc etc…

 

La sintáxis para poder crear nuestras propias funciones en javascript es:

function nombreFuncion ([parametro1,….., parametroN]…]]) {
cuerpo;
}

Como véis utilizamos la palabra clave function para indicar a javascript que vamos a declarar (crear) una función. Luego asignamos un nombre a nuestra función. Este nombre será el que utilizaremos cada vez que queramos utilizar nuestra función. Seguidamente indicamos los parámetros que va a recibir la función (los datos de entrada) para poder trabajar correctamente. Con todo esto en la sección «cuerpo» incluimos todo el código javascript que realizará el trabajo de la función y nos dará el resultado.

A continuación vamos a crear una función sencilla cuyo objetivo será calcular el cuadrado de un número y mostrarlo en una alerta. Una vez declarada la función la vamos a llamar para verificar que funciona correctamente:

<script>
function cuadrado (x) { // Creo la funcion “cuadrado”, El parámetro que reciba será “x”.
        alert (x*x); // 
} // Fin de la función “cuadrado”.

cuadrado(4); // Llamo a la función con “4”, o sea x=4.
</script>

Ahora cada vez que queremos calcular el cuadrado de un número bastará con llamar a la función «cuadrado» pasándole como parámetro el número en cuestión y nuestra función javacript se encargará de calcularlo. Evidentemente esta función es tan sencilla que casi no tiene sentido crearla, pero si que nos venía muy bien para poder estudiarla. Al final de esta publicación veremos una lista de funciones completas nativas de javascript que si serán realmente interesantes. Pero antes debemos de conocer algunas características más tales como el DOM de una página web y los objetos.

Ámbito de las variables en las funciones javascript

Recordemos de la lección el lenguaje javascript, variables que las variables son zonas de memoria que nosotros utilizamos para almacenar datos. Según el tipo de dato que necesitemos almacenar utilzaremos un tipo de variable u otro. ¿Por qué hemos hecho este recordatorio? Por una sencilla razón. Cuando nosotros definimos una función en javascript; dentro de ella tenemos que escribir el código que se encargará de efectuar los cálculos. Este código embebido dentro de la función también necesitará hacer uso de variables internas tal y como lo hace le programa principal. Pues bien, cada variable que defináis dentro de una función solo estará disponible dentro de la función. ¿Qué quiere decir esto? Pues que si vosotros creais una variable dentro de una función no la podréis ver desde fuera de la misma. Para comprenderlo mejor probad a ejecutar el siguiente código:

function miFuncionJavascript() {
  var miVariable = “Mensaje de prueba”;
}
miFuncionJavascript();
alert(miVariable);

Como podéis observar he creado una variable llamada «miVariable» dentro de la función miFuncionJavascript, a esta variable le he asigando un valor; en este caso «Mensaje de prueba»; finalmente he tratado de acceder al contenido de la variable desde fuera de la misma; desde el programa y como resultado obtendréis que no habéis sido capaces de acceder al contenido de la variable «miVariable». Esto es así porque la variable «miVariable» solo está disponible DENTRO de la función en la cual ha sido definida. Tenéis algunos ejemplos más sobre el ambíto de variables en javascript en la siguiente web: http://librosweb.es/javascript/capitulo_4/ambito_de_las_variables.html

Objetos javascript

Javascript es un lenguaje orientado a objetos. Esto es algo que ya hemos dicho en más de una ocasión; ahora llega el momento de ver realmente cual es el significado de esta expresión. Cuando hablamos de programación un objeto es una entidad similar a una variable pero con algunas características especiales. Siguiente la filosofía de este curso vamos a tratar de explicar de forma prática qué es un objeto. Imagindad que nosotros estamos diseñando en javascript un pequeño programa para manejar datos de visitantes. Para cada vistante queremos trabajar con su IP, su nick, son contraseña y su dirección de correo electrónico. Esto hasta ahora nos supondría tener que crear 4 variables para cada cliente. Una por cada dato a almacenar. Haciendo uso de los objetos javascript nosotros podemos crear el objeto cliente que contendrá estos 4 datos. De esta forma pasamos a trabajar de forma más cómoda con nuestros clientes. Ya que una sola variable de tipo «objeto cliente» nos dará los 4 datos con los que estamos trabajando. 

Objetos javascript

Los objetos no solo sirven para poder agrupar un conjunto de variables en una sola, también pueden albergar funciones internas que nos serán de gran utilidad para realizar acciones de forma particular con cada uno de los objetos con los que estamos trabajando.

Características de los objetos javascript

Soportan ocultamiento y encapsulamiento de datos, lo que significa que los aspectos de un objeto que son accesibles a otros objetos están separados de las características internas del objeto, las cuales quedan ocultas o no para otros objetos, dependiendo si están o no encapsuladas. 

Serán las funciones miembro que componen a cada objeto quienes definan su comportamiento.

Pueden comunicarse con otros objetos, por lo que se harán funciones miembro accesibles desde el exterior, quienes actuarán de interfaz entre los diferentes módulos del programa. Pueden tomar propiedades y configuraciones de otros objetos.

Los objetos con la misma estructura y comportamiento se suelen agrupar en clases.
Una clase es un tipo de datos definido por el programador, que determina las estructuras de datos y las operaciones asociadas con ese tipo. Cada clase es un modelo que describe el conjunto de objetos del mismo tipo. Cada vez que se construye un objeto de una clase, se crea una instancia de esa clase. Cada instancia u objeto de una clase tiene su propio valor para cada uno de sus datos miembro pero comparte los mismos nombres y operaciones que otros objetos de la misma clase.

Polimorfismo
Esto significa que la misma operación puede comportarse de la misma manera en diferentes clases, en un sentido literal significa la cualidad de tener más de una forma con el mismo comportamiento. Este concepto puede resultar algo complicado de asimilar para aquellos de vosotros que este es vuestro primer contacto con la programación orientada a objetos. Pero para poder verlo con más claridad vamos a ver algunos ejemplos prácticos de esta característica:

En un lenguaje de programación el operador «+» representa la suma de 2 números que pueden ser 2 enteros o 2 reales. En un lenguaje orientado a objetos como es javascript, nosotros podemos definir el operador «+» para que sea capaz de sumar nuestros objetos. Imaginad que nosotros tenemos el objeto «cliente» tal y como vimos unas líneas mas arriba. ¿Qué ocurriría si hicieramos cliente1+cliente2? No tendría mucho sentido sumar dos objetos de tipo cliente, pero nosotros podemos indicar que el operador «+» utilizado para el objeto cliente sume (o haga cualquier otra operación) con sus variables internas.

Herencia
Esto marca la capacidad de compartir operaciones y propiedades entre clases, basadas en relaciones jerárquicas, esta propiedad será quien nos permita construir objetos a partir de otros existentes. Para poder comprender mejor esta característica imaginad que de nuestro objeto ya definido «cliente» queremos sacar un nuevo objeto llamado «clienteVIP» el cual queremos que contenga las mismas características que el objeto «cliente» con algunas más añadidas. Nosotros podríamos directamente crear un nuevo objeto desde cero llamado «clienteVIP» pero si hacemos uso de la herencia tanto solo debemos debemos crear un objeto heredado de cliente y añadir las características extra que necesitamos. Otra ventaja que nos da la herencia en objetos es que si nosotros hacemos un cambio en el objeto padre, los hijos de ese objeto heredarán también este cambio, con lo que nuestro código será mucho mas fácil de mantener y corregir.

Los objetos en POO son fácilmente reutilizables
Esta es una de las razones principales para justificar la utilización de esta metodología en la mayoría de los casos, por esta razón cualquier aplicación POO suele venir con un conjunto de clases predefinidas, que permitirá ahorrar tiempo y esfuerzos en el desarrollo de aplicaciones. La reusabilidad no es algo espontáneo, hay que planificarla pensando
más allá de la aplicación inmediata, e invertir un poco de esfuerzo extra en un diseño más general que nos ahorrar mucho esfuerzo futuro.
Hay varios mecanismos de abstracción involucrados en POO.

Agregación/Descomposición
La agregación consiste en el tratamiento de una colección de conceptos como si fueran un único concepto, la descomposición es el mecanismo inverso a la agregación,.

Clasificación/Instanciación.
La clasificación consiste en agrupar entidades que comparten características comunes en una clase sobre la cual se cumplen condiciones uniformes, la instanciación consiste en obtener entidades que cumplen con las propiedades asociadas a la definición de una clase.

Generalización/Especialización.
La generalización consiste en la extracción a partir de una o varias clases, de la descripción de una clase más general que contiene los conceptos comunes a ellas y suprime las diferencias detalladas en las descripciones de cada clase, el proceso de especialización es el que crea una clase nueva a partir de una clase ya existente agregando detalles adicionales a su descripción.

Dicho todo esto; pasemos a crear nuestros primeros objetos en javascript:

<script>
function Rectangulo (largo,ancho){
   this.largo = largo;
   this.ancho = ancho;
   this.area = function () {
      return(this.largo*this.ancho);
   };
}
var r1 =new Rectangulo (4,3);

alert(r1.largo);
alert(r1.ancho);
alert(r1.area());
</script>

En el ejemplo anterior hemos declarado una clase llamada rectángulo, la cual a parte de ser muy sencilla, solo tiene 2 variables internas, el largo y el ancho y una fución interna que calculará el área del rectángulo. Después hemos creado el objeto rectángulo llamado «r1» pasándolo 2 valores «4» y «3». Acto seguido hemos pasado a utlizarlo accediendo a sus dos medidas y a su área con la función alert.

¿Por qué es necesario para un hacker conocer cómo funcionan los objetos en javascript?

La respuesta para esta pregunta llega a ser trivial en algunos casos. La mayoría de empresas, y organizaciones tienen de cara a la red su página web y como consecuencia esta es la parte más vulnerable de la entidad. Poder identificar cómo funciona internamente una página web es una tarea fundamental a la hora de realizar un pentesting a la aplicación web, y en el caso de encontrar un fallo de seguridad, el poder explotarlo o no depende en gran medida de la pericia como programador del pentester. Los ataques mas comunes de tipo XSS e inyección de código javascript consisten en meter código de forma ilícita dentro de la aplicación para que se comporte de forma distinta a la que ha sido diseñada. Por este motivo debes de conocer cómo trabajan los objetos en javascript, ya que esto te podría permitir en el futuro inyectar objetos y o funciones especialmente creadas para tratar de acceder a información sensible tanto de la web como de los visitantes que estén en ella.

Continua leyendo

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Newsletter Signup

Suscríbete a nuestra lista si te interesa recibir turcos exclusivos sobre hacking y seguridad informática