Quantcast
Channel: Arthusu BLOG
Viewing all 135 articles
Browse latest View live

[PHP] Creando un convertidor a MP3 rapido y facil

$
0
0
Buenas tenia ya rato sin escribir algo, bueno espero ser rapido y breve, en esta entrada veremos sobre como crear un convertidor MP3 rapido y facil, en este caso estare utilizando windows, ustedes pueden bajarse el FFMPEG desde su pagina oficial para linux o macosx.

Bueno para ser mas breve posible lo que hare sera mostrar el script e ir explicando por pasos.

Esta es la estructura de nuestro proyectin:



 

<?php
// sin limite de tiempo
set_time_limit(0);
// para que muestre errores
ini_set("display_errors",1);
error_reporting(E_ALL);
// para que podamos subir archivos pesados 200MB
ini_set('upload_max_filesize', '200M');


// si se envio el formulario
if(isset($_POST["submit"])) {
// el directorio a donde ira el video o archivo que conviertas en mp3
$target_dir = "uploads/";
// aqui se guarda el mp3
$generador_archivo = "mp3/file_".md5(mt_rand()).".mp3";
// el nombre del archivo a subir con su directorio a donde ira
$target_file = $target_dir . basename($_FILES["file"]["name"]);

// movemos el archivo
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
// Aqui esta la magia! convertimos el archivo (Cuidado con la ejecucion de comandos XD)
exec("ffmpeg -i \"$target_file\" $generador_archivo",$output,$return);
// debug
//print_r($output);
// Si se ejecuto correctamente mostramos el enlace al archivo sino un error
if(!$return){
echo "<a href=\"mp3/". basename($generador_archivo). "\">Bajar Archivo</a>.";
}else{
echo "ERROR";
}
// si no se pudo mover el archivo ocurrio un error al subir
} else {
echo "Ocurrio un error al subir archivos";
// debug
//print_r($_FILES);
}
}
?>
<!DOCTYPE html>
<html>
<body>

<form action="" method="post" enctype="multipart/form-data">
Selecciona el archivo a convertir:
<p><input type="file" name="file" id="file"></p>
<p><input type="submit" value="Subir Archivo" name="submit"></p>
</form>

</body>
</html>


Antes de comenzar a explicar el script, les dire que no es nada "seguro", ya que no le agregue seguridad para que se vea lo mas simple posible, pero si ustedes gustan pueden modificarlo. Y otra cosa es que para poder subir este script a un servidor tenemos que buscar que soporte FFMPEG o simplemente tener un servidor dedicado.
Aunque viene todo comentado, explicare...


1.- Le damos un set_time_limit(0) para que se ejecute el script hasta que termine. Mostramos errores con error_reporting y con ini_set establecemos la directiva de PHP.ini para mostrar errores. Establecemos upload_max_filesize en 200M para subir archivos pesados, muchas de las veces las directivas de PHP no te permiten solo con ini_set por lo que tendras que modificarlo desde el archivo de configuracion php.ini.

2.- Comprobamos si existe el formulario con isset($_POST['submit']), asignamos unas variables para la ruta, con md5(mt_rand()) genero un md5 aleatorio para que el archivo mp3 no se repita el nombre.

3.- movemos el archivo con move_uploaded_file a la ruta que asignamos.

4.- El comando mas importante es el comando de sistema exec, el cual realiza la conversion con el programa FFMPEG. La sintaxis es la siguiente:

ffmpeg.exe -i elarchivoaconvertir.mp4 elarchivodesalida.mp3

5.- Por ultimo verificamos que no haya retornado errores y mostramos el enlace en caso contrario mostramos un mensaje de error.
Con los print_r() podemos debuggear las matrices en caso de error.

Ya que nunca pongo imagenes pondre algunas, ya que dicen que "una imagen vale mas que mil palabras", yo les pondre 3 xD...




 

 Listo. Espero que esta entrada les haya sido de utilidad.

PHP 5.6 y el operador Splat

$
0
0
Tenemos un par de nuevas caracteristicas que vienen a PHP 5.6 con nombres que suenan mucho menos interesantes de lo que realmente representan "funciones variadicas" suena positivamente academica, y "desempaquetado de argumento" no es exactamente atrayente. Sin embargo ambos utilizan un nuevo operador en PHP que parece una elipsis (tres puntos ...) y que se conoce como operador de splat o el operador de dispersion. 

Funciones variadicas

Esta caracteristica le permite capturar un numero variable de argumentos a una funcion, combinada con argumentos "normales" aprobadas en si lo desea. Es mas facil de ver con un ejemplo:

<?php
function concatenate($transform, ...$strings){
$string = '';
foreach($strings as $piece){
$string .= $piece;
}
return ($transform($string));
}

echo concatenate("strtoupper","I'd ","Like ", 4+2 , " Apples");
?>

La lista de parametros en la declaracion de la funcion tiene el operador ..., que basicamente significa "... y todo lo demas debe ir en $strings" puede pasar 2 o mas argumentos en esta funcion y la segunda y siguientes se añadira en el array $strings, listo para ser utilizado.

Desempaquetar argumentos

Este tiene un nombre menos sexy que las funciones variadicas, y utiliza el mismo operador pero este es el que me hizo describo codigo PHP como "salvaje" - no es algo que sucede a menudo! Me gusta por que ofrece una forma diferente de utilizar las funciones que ya existen por lo que hace pertinente tan pronto como actualizar a 5.6. 
Las funciones variadicas le permite declarar un array como parametros de entrada, y desempaquetar argumentos le permite pasar un array a una funcion que espera parametros distintos en la forma tradicional; son absolutamente complementarias entre si. Para usar esta funcion, simplemente advertir a PHP que necesita para desempaquetar el array en las variables utilizando el operador ... Un ejemplo sencillo podria tener este aspecto:


<?php
$email[] = "Hi there";
$email[] = "Thanks for registering, hope you like it";

mail("someone@example.com", ...$email);
?>


Puede pasar todos los argumentos en forma de array (consejo pro: array asociativos no funcionan aqui), o simplemente el ultimo, PHP toma su matriz y pasa cada elemento como parametro siguiente a su vez. Creo que esto es bastante ordenado :).


Fuente: http://www.lornajane.net/posts/2014/php-5-6-and-the-splat-operator

[Parte 6]jQuery

$
0
0
jQuery - Metodos CSS

La libreria jQuery soporta casi todos los selectores incluidos en Cascade Style Sheet (CSS) las especificaciones de la 1 a la 3 como se indica en el sitio de la World Wide Web Consortium. Con el uso de la libreria jQuery puede mejorar sus sitios web sin tener que preocuparse acerca de los navegadores y sus versiones, siempre que los navegadores tengan habilitado javascript. La mayoria de los metodos jQuery CSS no modifican el contenido del objeto y se utilizan para aplicar las propiedades CSS en los elementos DOM.

Aplicar propiedades CSS

Es muy facil aplicar cualquier propiedad CSS utilizando el metodo de jQuery css(propiedadNombre, propiedadValor), aqui esta la sintaxis del metodo:

selector.css(propiedadNombre, propiedadValor);

Aqui puede pasar propiedadNombre como una cadena javascript y en funcion de su valor, propiedadValor podria ser una cadena o un entero.


Ejemplo: 


A continuacion se presenta un ejemplo que añade color de fuente para el segundo elemento de la lista.




<html>
<head>
<title>El ejemplo de jQuery</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript">
         $(document).ready(function(){
            $("li").eq(1).css("color","red");
         });
   </script>
</head>
<body>
  <div>
     <ul>
        <li>Elemento 1 de la lista</li>
        <li>Elemento 2 de la lista</li>
        <li>Elemento 3 de la lista</li>
        <li>Elemento 4 de la lista</li>
        <li>Elemento 5 de la lista</li>
        <li>Elemento 6 de la lista</li>
     </ul>
  </div>
</body>
</html>



Aplicar multiples propiedades de CSS


Puede aplicar multiples propiedades CSS utilizando un unico metodo css de jQuery css({clave:valor,clave:valor,clave:valor...}). Puede aplicar tantas propiedades como desee en una sola llamada. Aqui es la sintaxis del metodo:


selector.css({clave:valor,clave:valor,claveN:valorN})




Aqui puede pasar la clave y el valor como se describio anteriormente. Ejemplo: A continuacion se presenta un ejemplo que añade un color de la fuente, asi como el color de fondo al segundo elemento de la lista.


<html>
<head>
<title>El ejemplo de jQuery</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript">
         $(document).ready(function(){
            $("li").eq(1).css({"color":"red","background-color":"green"});
         });
   </script>
</head>
<body>
  <div>
     <ul>
        <li>Elemento 1 de la lista</li>
        <li>Elemento 2 de la lista</li>
        <li>Elemento 3 de la lista</li>
        <li>Elemento 4 de la lista</li>
        <li>Elemento 5 de la lista</li>
        <li>Elemento 6 de la lista</li>
     </ul>
  </div>
</body>
</html>



Estableciendo el ancho y alto de un elemento


Los metodos width(val) y height(val) pueden utilizarse para establecer la anchura y altura, respectivamente de cualquier elemento, ejemplo: A continuacion se presenta un ejemplo sencillo que define la anchura del primer elemento de division en la que el resto de los elementos su ancho ha sido establecido por la hoja de estilos css.


<html>
<head>
<title>El ejemplo de jQuery</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript">
         $(document).ready(function(){
            $("div:first").width(100);
            $("div:first").css("background-color","blue");
         });
   </script>
   <style type="text/css">
      div{
         width: 70px;
         height: 50px;
         float: left;
         margin: 5px;
         background: red;
         cursor: pointer;
      }
   </style>
</head>
<body>
        <div></div>
        <div>d</div>
        <div>d</div>
        <div>d</div>
        <div>d</div>
</body>
</html>



jQuery metodos CSS


Siguiendo la lista de la tabla de abajo de todos los elementos de todos los elementos que pueden utilizar para jugar con las propiedades CSS.
 
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| Metodo | Descripcion |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| css(nombre) | Devuelve una propiedad de estilo en el primer elemento que coincida. |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| css(nombre,valor) | Establece una sola propiedad de estilo a un valor en todos los elementos coincidentes. |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| css(propiedades) | Establece un objeto clave/valor como propiedades de estilo a todos los elementos coincidentes. |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| height(valor) | Ajusta la altura CSS de cada elemento que coincida. |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| height() | Obtiene el actual computado, pixel, altura del primer elemento coincidente. |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| innerHeight( ) | Obtiene la altura interior (excluye el border e incluye el padding) para el primer elemento que coincide. |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| innerWidth( ) | Obtiene la anchura interior (excluye el border e incluye el padding) para el primer elemento que coincide. |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| offset( ) | Obtiene el desplazamiento del primer elemento coincidente actual en pixeles, en relacion con el documento. |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| offsetParent( ) | Devuelve una coleccion jQuery con el padre posicionado del primer elemento coincidente. |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| outerHeight( [margen] ) | Obtiene la altura exterior (incluye el border y padding por defecto) para el primer elemento coincidente. |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| outerWidth( [margen] ) | Obtiene el ancho exterior (incluye el border y padding por defecto) para el primer elemento coincidente. |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| position( ) | Obtiene la posicion superior e izquierda de un elemento con respecto a su offsetParent() |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| scrollLeft( valor ) | Cuando un valor es pasado, al desplazarse hacia la izquierda se establece el valor de todos los elementos coincidentes. |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| scrollLeft( ) | Obtiene el desplazamiento izquierdo del primer elemento coincidente. |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| scrollTop( valor ) | Cuando un valor es pasado, al desplazarse hacia la arriba se establece el valor de todos los elementos coincidentes. |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| scrollTop( ) | Obtiene el desplazamiento superior del primer elemento coincidente. |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| width( valor ) | Ajusta el ancho CSS de cada elemento coincidente. |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| width( ) | Obtiene el actual computado, pixel, ancho del primer elemento coincidente. |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+


Fuente: http://www.tutorialspoint.com

[Arthusu] Mi metodologia pruebas de penetracion

$
0
0
Introduccion

Bienvenidos a este tutorial, si es que le podemos llamar de esa forma, ultimamente he estado publicando algo, entonces se me ocurrio que a ustedes les serviria un poco este tipo de tutorial ya que he buscado mucha informacion en la red y he recogido lo que me parece mas importante que pueden utilizar para este tipo de cosas.

Antes que nada decirles que hay un proyecto muy conocido de documentacion sobre vulnerabilidades web llamado OWASP el cual contiene una guia muy buena en la cual pueden aprender demasiado sobre este tipo de metodologia.


Esta imagen la he encontrado en google y como dicen que una imagen vale mas que mil palabras, pues aqui les dejo las fases para el proceso de analisis.


1.- Preparacion y Planeamiento

Lo primero es intentar obtener la mayor informacion sobre el objetivo a analizar.

En este caso tendre en mi objetivo: animextremist.com

Es una pagina la cual visito continuamente, bueno veremos como hacer poco a poco, este tipo de prueba, claro yo lo hare a mi manera, ya que otros pueden utilizar otro tipo de herramientas o solo utilizar este concepto de manera que les pueda 'servir'.

http://whois.domaintools.com/<- Esta es una herramienta muy util para mi me da mucha informacion sobre el dominio, en su version de paga es mucho mas util.

Con la informacion recogida se los datos siguientes:

80.82.78.206 esta alojado en un servidor dedicado de godaddy.com
El email del admin es juanelo512@hotmail.com
Su nombre es Juan Celis Garcia
Su calle: Peralvillo 22 edificio c-301
Su colonia: Colonia Morelos
Su ciudad: Mexico City
Su pais: Mexico
Su codigo postal: City 06200
Su telefono: 55269882

Informacion sobre el servidor: Apache/2.2.29 (Unix) mod_ssl/2.2.29 OpenSSL/1.0.1e-fips mod_bwlimited/1.4 
Usaba Cloudflare

PHP_VERSION 5.4.36
Dominio asociado: http://myanx.com/

Gracias al uso de las redes sociales hoy en dia podemos sacar mucha informacion, por ejemplo usando Facebook, coloco el correo que encontre anteriormente:

juanelo512@hotmail.com y encuentro esto:
https://www.facebook.com/animextremist.anx

Ok, tiene su correo con su cuenta de animextremist pero veo que tiene 2 amigos, dentro de esos dos amigos busco a Juan Celis! :P

https://www.facebook.com/juan.celis.904

He aqui Juan Celis Administrador de AnimeXtremist Mi idolo :) 

Encontrando mas informacion:

Su hermana: https://www.facebook.com/cicky.celis

Ahora podemos buscar sobre el en google utilizando Su nombre y donde estudio, ejemplo: Juan celis Unitec, esa informacion la saque desde facebook.

https://twitter.com/Seiji_Ibiki


Con esto concluimos que el uso de las redes sociales para obtener informacion es de demasiada ayuda, algunas redes sociales pueden ser:

* Twitter
* LinkedIn
* Google+
* Instagram
* Facebook

Tambien si este fuera un servidor compartido, podriamos hacer uso de BING para buscar algunos de lso dominios compartidos, ejemplo:

IP: xxx.xxx.xxx.xxx

Aqui no se acaba, podemos intentar recopilar informacion de subdominios, utilizando Google.

site: elsitio.com -site:elsitio.com

http://ftp.animextremist.com

Tambien en este ejemplo con Shodan hemos encontrado su panel de cPanel:

https://80.82.78.206:2087
https://80.82.78.206:2083
https://80.82.78.206:2096
https://80.82.78.206:2078/


ftp://80.82.78.206/

Otra manera de buscar informacion con google es utilizando sus keywords, por ejemplo:

site:animextremist.com filetype:txt

Siguiendo con las keywords de google pues como hay bastantes formas utiles solo hay que jugar con ellas, de todas maneras si puedo pronto hare algun tutorial sobre Google Hacking :P

http://www.animextremist.com/noticias/noti543.php?subaction=showfull

http://animextremist.com/mangas-online/the-breaker-new-wave/capitulo-3/

http://www.animextremist.com/series/dbzpelis_archivos/

http://www.animextremist.com/fansub/
?subaction=showcomments
&id=1195023652
&archive=
&start_from=
&ucat=3
&


http://www.animextremist.com/fansub/noticias/data/
http://animextremist.com/cgi-sys/scgiwrap

Algunos errores:


site:animextremist.com intext:"seijixt"


Warning: include(../comentarios/show_news.php): failed to open stream: No such file or directory in /home/seijixt/public_html/noticias/noti543.php on line 401

Warning: include(): Failed opening '../comentarios/show_news.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/seijixt/public_html/noticias/noti543.php on line 401

Warning: include(../comentarios/show_news.php): failed to open stream: No such file or directory in /home/seijixt/public_html/noticias/noti543.php on line 404

Warning: include(): Failed opening '../comentarios/show_news.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/seijixt/public_html/noticias/noti543.php on line 404


2004.12.08 19:46 B D:\Juan\Animextremist\animextremist\series\dbzpelis_archivos\dbzpeli1.jpg --> 65.110.45.90 /public_html/series/dbzpelis_archivos dbzpeli1.jpg

2004.12.08 19:46 B D:\Juan\Animextremist\animextremist\series\dbzpelis_archivos\dbzpeli2.jpg --> 65.110.45.90 /public_html/series/dbzpelis_archivos dbzpeli2.jpg

2004.12.08 19:46 B D:\Juan\Animextremist\animextremist\series\dbzpelis_archivos\dbzpeli3.jpg --> 65.110.45.90 /public_html/series/dbzpelis_archivos dbzpeli3.jpg

2004.12.08 19:46 B D:\Juan\Animextremist\animextremist\series\dbzpelis_archivos\dbzpeli4.jpg --> 65.110.45.90 /public_html/series/dbzpelis_archivos dbzpeli4.jpg



Con esto tenemos el posible nombre de usuario del cPanel :D
seijixt :P y la ruta :D, hace un tiempo hice un post sobre brute force el cual podriamos intentar, o simplemente intentar acceder con las peores contraseñas

Otra cosa que podemos hacer es usar algun brute forcing de directorios o simplemente hacer un crawler o spider para encontrar mas informacion.

Un ejemplo Yo utilizo ZAP de OWASP o DirBuster para buscar URL's, puntos de entrada, y directorios de la pagina que no son muy accesibles... Burp Suite tambien es una herramienta genial para esto.

Gracias a ZAP encontramos una posible Inyeccion SQL, ademas de un monton de urls y parametros:

http://animextremist.com/dd3.php?ver=H' 
http://www.animextremist.com/mangas.htm?ord=genero&id=18'
SQLI: http://www.animextremist.com/mangas.htm?ord=genero&id=18 and 0 union select version() %23  hola

http://www.animextremist.com/foro/
http://animextremist.com/mangas-online/user/user/


Usa una base de datos MySQL. Cuando obtengamos los datos solo es necesario usar algun Admin Finder Online o una tool que te hayas creado.

http://animextremist.com/login.php
http://www.animextremist.com/pruebas/Admin.html

http://www.animextremist.com/tools/

Lo siguiente es reconocer los servicios que se estan usando. Aqui utilizaremos herramientas como NMAP.

Ejemplo: nmap -sV -T4 -O -Pn 80.82.78.206

Starting Nmap 6.40 ( http://nmap.org ) at 2015-03-22 19:33 Hora estándar Montañas (México)

Nmap scan report for 80.82.78.206

Host is up (0.19s latency).

Not shown: 982 closed ports

PORT     STATE    SERVICE      VERSION

21/tcp   open     ftp          Pure-FTPd

22/tcp   open     ssh          OpenSSH 5.3 (protocol 2.0)

25/tcp   open     smtp         Exim smtpd 4.84

53/tcp   open     domain

80/tcp   open     http         Apache httpd 2.2.29 ((Unix) mod_ssl/2.2.29 OpenSSL/1.0.1e-fips mod_bwlimited/1.4)

110/tcp  open     pop3         Dovecot pop3d

135/tcp  filtered msrpc

139/tcp  filtered netbios-ssn

143/tcp  open     imap         Dovecot imapd

443/tcp  open     ssl/http     Apache httpd 2.2.29 ((Unix) mod_ssl/2.2.29 OpenSSL/1.0.1e-fips mod_bwlimited/1.4)

445/tcp  filtered microsoft-ds

465/tcp  open     ssl/smtp     Exim smtpd 4.84

587/tcp  open     smtp         Exim smtpd 4.84

993/tcp  open     ssl/imap     Dovecot imapd

995/tcp  open     ssl/pop3     Dovecot pop3d

1025/tcp filtered NFS-or-IIS

3306/tcp open     mysql        MySQL (unauthorized)

6129/tcp filtered unknown

Device type: general purpose|firewall|WAP|webcam

Running (JUST GUESSING): Linux 2.6.X|3.X|2.4.X (94%), Check Point Linux 2.6.X (85%), Tandberg embedded (85%), Fortinet Linux 2.6.X (85%)

OS CPE: cpe:/o:linux:linux_kernel:2.6 cpe:/o:linux:linux_kernel:3 cpe:/o:linux:linux_kernel:2.6.18 cpe:/o:linux:linux_kernel:2.4 cpe:/h:tandberg:vcs cpe:/o:fortinet:linux_kernel:2.6

Aggressive OS guesses: Linux 2.6.32 - 2.6.39 (94%), Linux 3.2 - 3.6 (92%), Linux 2.6.32 - 3.0 (92%), Linux 3.4 (91%), Linux 2.6.39 (91%), Linux 2.6.32 (91%), Linux 2.6.32 - 2.6.35 (90%), Linux 3.1.9 (90%), Linux 3.5 (89%), Linux 3.0 - 3.9 (88%)

No exact OS matches for host (test conditions non-ideal).

Network Distance: 26 hops

Service Info: Host: server.animextremist.com



OS and Service detection performed. Please report any incorrect results at http://nmap.org/submit/ .

Nmap done: 1 IP address (1 host up) scanned in 44.42 seconds


Una de las paginas que no mencione aqui para obtener una mayor informacion es ir a archive.org y ver las paginas de antes ya que muchas veces se encuentran todavia disponibles.

XSS: http://www.animextremist.com/profile/chapter.php?resume_id=69&user=Seiji&user_id=6"></title><script>alert(/arthusu/)</script>



2.- Testeo y Evaluacion

Este paso mas que nada es encontrar vulnerabilidades y obtener acceso, para ello podemos ayudarnos de un sin fin de herramientas pero las que mas utilizo son:

* Acunetix (Detectar vulnerabilidades)
* Vega (Escaner de Vulnerabilidades)
* Waf00f (Detectar Firewall)
* Nikto (Detectar vulnerabilidades)
* NMAP (Servicios)
* ZAP (Directorios,Campos de entrada,  DirBuster)
* Burp Suite  (Directorios, Spider)
* Nessus (Detectar Vulnerabilidades)
* Metasploit (Explotar Vulnerabilidades)
* Google (Recolectar informacion)

A mi en lo personal no me gusta muchos utilizar herramientas, no es por que no sean buenas, sino por que muchas veces hacen mucho "ruido" y alertan rapidamente a un firewall o al administrador. Ademas de aveces tardar demasiado.

En el paso anterior encontramos una vulnerabilidad SQLi sin necesidad de usar herramientas.

Pero no hay nada de malo en usar herramientas ya que traen muchas vulnerabilidades que puedes no conocer ya que sea actualizan dia a dia. Y podemos obtener informacion muy interesante de ellas.


Hay otro tipo de ataque que al parecer se presenta mucho en esta pagina que es bruteforce.


Lo siguiente que podemos hacer es buscar exploits para los servicios anteriores usando Google, ejemplo:


OpenSSL/1.0.1e-fips  exploit




3.- Redaccion de Reportes


Esta suele ser la parte mas aburrida ya que tienes que redactar todo lo que hicistes para encontrar vulnerabilidades, ya sea a nivel web o sistema, tienes que redactarlo bonito de una manera que los "clientes" lo entiendan. Para una mejor redaccion puedes utilizar una plantilla e ir ordenando todas las vulnerabilidades encontradas anteriormente en un archivo final entregado al cliente.

Les dejare algunas plantillas utiles para crear su reporte final.


Security_Assessment_Template.doc
V_Scan_Handout_Sample_Report.pdf
App_CA_Security_Assessment_Summary_Template_030408...


Despedida


Hasta aqui termina este pequeño "tutorial", intente no hacerlo largo por que se aburririan. Espero que a mas de uno les sea de utilidad. Le agradesco a Cesar de Alguienenlafisi por ayudarme, y a todas las personas que me han ayudado en este largo camino.





Proteger tu IP de Skype Resolvers

$
0
0
Buenas tenia rato sin crear una nueva entrada, aunque esto ya es algo viejo todavia lo siguen usando mucho... Asi que les traigo un TIP muy basico para que se protegan la IP de los resolvedores de IP de skype:

https://mostwantedhf.info/index.php (Este es un ejemplo de un Resolver IP Skype)




Desde ahi podemos seguir buscando informacion:


Ahora la configuracion es facil, nos dirigimos a skype>Herramientas>Opciones o simplemente ctrl+,
Nos dirigimos a Avanzada>Conexion y configuramos todo como la siguiente imagen muestra:

 
Listo Ahora guardamos los cambios y cerramos y abrimos skype de nuevo. Con esto protegemos nuestra IP, se que es algo basico y algunos ya lo sabian pero les puede ser util a mas de alguno, saludos!



[PHP] SoundCloud Downloader

$
0
0
Buenas, he estado algo ocupado esta semana por lo cual no he creado ninguna nueva entrada, pero en esta entrada les pondre el codigo de una clase que creé hace poco, lo unico que tienen que modificar sería la API de su soundcloud, aunque es algo 'tonta' mi clase, espero que a mas de a uno le sea de utilidad.

class.soundcloud.php

<?php
/**
* Con esta clase puedes obtener enlaces directos desde souncloud usando su API.
* Con solo asignar la URL ya sea una playlist o un song devolvera los links o solamente el link.
* Tambien podemos descargar los archivos.
*
* @author arthusu <arthusu@gmail.com>
*
* @package SoundCloud Downloader
*
* @copyright 2015 arthusu
*/
class Soundcloud
{
const STREAM = 'http://media.soundcloud.com/stream/';

const CLIENT_API = 'AquiPonesTuApi';

/** @var string URL para sacar JSON */
private $api = 'http://api.soundcloud.com/resolve.json?url=URL&client_id=';

/** @var string El identificador del SONG */
private $id;
/** @var string La URL del SONG o PLAYLIST */
private $url;
/** @var array Nombres de los SONGS */
private $names = array();
/** @var string Almacena el JSON retornado */
private $json;
/** @var array LINKS */
private $playlist = array();

/**
* Obtiene el/los titulos del Song.
*
* @return array Devuelve los titulos
*/
public function getTitle(){
return $this->names;
}

/**
* Obtiene el JSON de la URL que le asignes, Usamos la API para obtener la informacion.
*
* @param string $url La URL a retornar.
*
* @return void
*/
public function getURL($url){
$this->url = $url;
$this->api = $this->api . self::CLIENT_API;
$this->json = json_decode(file_get_contents(str_replace("URL", $this->url, $this->api)));

}

/**
* Obtiene el ID del JSON arrojado por la URL, el ID del SONG
*
* @return void
*/
public function getID(){
if(!empty($this->json)){
$this->id = $this->json->{'waveform_url'};
array_push($this->names,$this->json->{'title'});
$this->id = substr(parse_url($this->id, PHP_URL_PATH),1,12);
}
}

/**
* Obtiene el LINK DIRECTO de la SONG
*
* @see Soundcloud::getID()
*
* @return string Devuelve la URL directa del archivo.
*/
public function getSong(){
self::getID();
return self::STREAM . $this->id;
}

/**
* Obtiene los LINKS DIRECTOS de la PLAYLIST
*
* @see Soundcloud::getID()
*
* @return array devuelve un array de links.
*/
public function getPlaylist(){
foreach($this->json as $obj){
if(is_array($obj)){
foreach($obj as $arr){
$this->json = $arr;
self::getID();
array_push($this->playlist,self::STREAM . $this->id);
}
}
}
return $this->playlist;
}

/**
* Descarga el archivo de La URL dada
*
* @param string $url La URL para descargar el archivo.
*
* @return void
*/
public function downloadArchive($url){
header("Content-type: audio/mpeg");
header("Content-Disposition: attachment; filename=\"".uniqid(md5(rand())) .".mp3\"");
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: 0"); // Fecha en el pasado
header('Content-Description: File Transfer');
header('Content-Transfer-Encoding: binary');
header('Pragma: public');
readfile($url);
}

}
?>


El siguiente es un ejemplo de uso rapido:

soundcloud_downloader.php


<?php
set_time_limit(0);
require_once('class.soundcloud.php');
$soundcloud = new SoundCloud();
?>
<title>SoundCloud Downloader</title>
<style type="text/css">
body{
width:800px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.right{
width: 300px;
padding-left: 10px;
float:right;
margin:10px;
height: 30px;
}
.left{
width: 300px;
padding-right: 10px;
float:left;
margin:10px;
height: 30px;
}
.clear{
clear: both;
}
</style>
<div class="clear">
<h1>SoundCloud Downloader</h1>
<form action="" method="post">
<p>URL: <input type="text" name="url" size="100" /></p>
<p><input type="submit" name="enviar" /></p>
</form>
</div>
<?php

$playlist = "";

if(isset($_GET["url"])){
if(file_exists($_GET['url'])){
echo "Tramposin";
}else{
$soundcloud->downloadArchive($_GET["url"]);
exit();
}
}

if(isset($_POST['enviar']) && filter_var($_POST['url'], FILTER_VALIDATE_URL)){

$soundcloud->getURL($_POST['url']);

if(stristr($_POST['url'],"sets")){
$playlist = "on";
}else{
$playlist = "off";
}
echo '<table border="1">';
echo '<tr>';
switch ($playlist) {
case 'on':
echo '<div class="right">';
foreach($soundcloud->getPlaylist() as $url){
echo '<a href="?url='.$url.'">Download</a>';
echo '<audio controls preload>
<source src="'.$url.'" type="audio/ogg">
Tu navegador no soporta la etiqueta audio.
</audio><br /><hr />
';
}
echo '</div>';
echo '<div class="left">';
foreach ($soundcloud->getTitle() as $title) {
echo $title .'<br /><hr />';
}
echo '</div>';
break;
case 'off':
$url = $soundcloud->getSong();
echo '<div class="right">';
echo '<a href="?url='.$url.'">Download</a>';
echo '
<audio controls>
<source src="'.$url.'" type="audio/ogg">
Tu navegador no soporta la etiqueta audio.
</audio><hr />
';
echo '</div>';
echo '<div class="left">';
foreach ($soundcloud->getTitle() as $title) {
echo $title ."<hr />";
}
echo '</div>';
break;
default:
echo "ERROR";
break;
}
echo '</table>';
}

?>

Y bueno esta no es una entrada explicativa ni nada de eso solo dejare esto aqui y me iré, saludos!.

[PHP] Creando una firma dinamica

$
0
0
Introduccion

Buenas he estado sin tiempo para postear pero en esta ocasion les mostraré como crear una firma dinamica de manera que obtengan algunos datos, muchos ya saben como realizarlo por que no tiene tanta dificultad mas que nada se trata de utilizar la libreria de PHP GD.

Un buen tutorial que recomiendo mucho sobre PHP GD es el siguiente: http://wiki.elhacker.net/programacion/php/libreria-gd el cual esta muy bien explicado.
Tratare de ser breve colocando solo los pasos.

Estructura a realizar

La estructura con la que trabajaremos sera la siguiente:


Explicando un poco que hace cada archivo.

.htaccess - Con este archivo interpretaremos imagenes png (con su extension .png) como archivos php y bloquearemos cualquier intento de acceso al archivo logs.txt

firma.php - Con este archivo generamos la imagen dinamica (pronto le cambiaremos la extension a .png)

KeepCalm-Medium.ttf - Es el tipo de letra que utilizaremos para la firma dinamica.

logs.txt - Aqui guardaremos los logs, en este caso IP, Sistema, Si usa proxy.

rVJgsdx.png - Es la imagen que utilizaremos para la firma dinamica. 

view_logs.php - Este es un archivo para ver los logs online. Con un simple formulario que tiene que ingresar una clave.

Nota importante: Nada de aqui es guardado en una base de datos. Y esto es facilmente explotable haciendo peticiones desde la misma IP un sin fin de veces cargaria todo el archivo logs.txt haciendolo demasiado pesado (Esa idea la hizo un amigo JhonJhon_123) entonces lo unico que podemos realizar en este caso es:

1.- Denegar las ips que realizen demasiadas peticiones
2.- No insertar IPS repetidas en el archivo logs.txt
3.- Cambiar el nombre de la carpeta para que no hagan mas peticiones.

Cualquiera de estos tres puntos no se ven en este tutorial.

Creando la firma

En este caso crearemos el archivo PHP para realizar la firma dinamica, no entrare en detalles de explicaciones ya que comente el codigo lo mas posible para que se entendiera, de todas maneras si no entienden algo, arriba deje una buena documentacion con la que pueden guiarse.

<?php
// no reportamos errores
error_reporting(0);
// el nombre de la imagen a poner como firma
$im_name = "rVJgsdx.png";
// los datos de la imagen
$data_im = getimagesize($im_name);
// el tipo de imagen
header("Content-type: {$data_im['mime']}");
// creamos la imagen en este caso png
$im = imagecreatefrompng($im_name);
// creamos un color para usarlo en el texto
$color = imagecolorallocate($im, 45, 196, 236);
// obtenemos la IP
$ip = $_SERVER['REMOTE_ADDR'];
// obtenemos los datos del navegador
$user_agent = $_SERVER['HTTP_USER_AGENT'];
// vemos si existe algun proxy (no es 100% fiable), y lo agregamos a la variable ip
$proxy_headers = array(
'HTTP_VIA',
'HTTP_X_FORWARDED_FOR',
'HTTP_FORWARDED_FOR',
'HTTP_X_FORWARDED',
'HTTP_FORWARDED',
'HTTP_CLIENT_IP',
'HTTP_FORWARDED_FOR_IP',
'VIA',
'X_FORWARDED_FOR',
'FORWARDED_FOR',
'X_FORWARDED',
'FORWARDED',
'CLIENT_IP',
'FORWARDED_FOR_IP',
'HTTP_PROXY_CONNECTION'
);
foreach($proxy_headers as $x){
if (isset($_SERVER[$x])) {
$ip .= "/Estas usando proxy!";
break;
}
}

// reemplazamos los datos del navegador en caso de que sea firefox por firefox o chrome por chrome, la lista es corta se pueden agregar mas
$navegador = preg_replace('/.*(firefox|chrome).*/i', '$1', $user_agent);
// lo mismo que arriba en este caso con el sistema, igual podemos hacer la lista personalizable
$sistema = preg_replace('/.*(windows|mac|linux).*/i', '$1', $user_agent);
// guardamos los datos en una variable para usarla en el texto
$string = " Tu IP: $ip \n Tu navegador: $navegador \n Tu sistema: $sistema \n Te estoy vigilando!\n";
// asignamos una variable con la fuente para usarla en el texto
$fuente = "KeepCalm-Medium.ttf";
// en caso de que no se haya detectado nada mostramos el navegador, aunque nos trolleen xD :P
if($navegador == ''){
$navegador = $_SERVER['HTTP_USER_AGENT'];
}
// what? :3, Guardamos logs
$manejador = fopen("logs.txt", 'a+');
fwrite($manejador, "$string\n\n\n");
fclose($manejador);
// magia is here! Mostramos el texto en las coordenadas dadas
imagettftext($im, 10, 0, 300, 10, $color, $fuente, $string);
// png transparency, para la transparencia en la imagen sino se veria desfigurada
imagealphablending($im, true);
imagesavealpha($im, true);
imagepng($im);
// destroy image, liberamos la memoria
imagedestroy($im);
?>



Asignar formato a la imagen y denegar acceso a los logs

En este apartado crearemos el archivo .htaccess el cual denegara acceso a los logs y interpretara nuestro archivo png como php.

AddType application/x-httpd-php .png
<FilesMatch "\.(txt)$">
  Order Deny,Allow
  Deny from all
</FilesMatch>

Creando archivo para ver los logs

Por ultimo creamos nuestro archivo view_logs.php con el cual veremos los logs. 

<?php
if (isset($_POST['pass']) && !empty($_POST['pass']) && $_POST['pass'] == 'tucontraseñae.e') {
$gestor = fopen('logs.txt', 'r');
$contenido = fread($gestor, filesize('logs.txt'));
fclose($gestor);
echo "<pre>" . $contenido . "</pre>";
}
?>
<form method="post" action="">
<p><input type="text" name="pass" /></p>
<p><input type="submit" name="enviar" /></p>
</form>

En este caso solo hay que cambiar tucontraseñae.e por la contraseña que le quieras asignar a la entrada.

Finalizando

Le cambiamos la extension al archivo firma.php y le ponemos el nombre que queramos en mi caso firma.png
Lo abrimos en el navegador para ver los resultados.


En este caso mi ip es ::1 ya que es una ip local.

Les dejo por ultimo los archivos por si quieren probarlo, igual pueden realizar el suyo propio cambiando algunas funciones como dependiendo del tipo de imagen que sea JPEG, PNG, etc. el tipo de letra, sus datos, etc. De igual manera con esto podrian crearse hasta generadores de firmas, saludos!

Archivos:http://www.mediafire.com/download/wr4yeydjyoyc397/firma_dinamica.rar
 

[jQuery] Mostrando imagen de carga al enviar un formulario

$
0
0
Buenas quiza a muchos les ha pasado que quisieran agregar una imagen al enviar un formulario, esto para que el usuario no se desespere tanto. Bueno esto es algo muy basico pero igual lo mostraré, para ello usaremos dos metodos de jQuery:

* show() - Muestra en bloque el selector que le indiques
* hide() - No muestra el selector que le indiques

Hay mejor documentacion sobre ellos en documentacion de la API de jQUery.

Ejemplo en vivo: http://jsfiddle.net/ojj1226b/

Digamos que tenemos un formulario como el siguiente:

<form action="" method="post">
    <h3>Formulario</h3>
    <input type="text" name="campo1" /><br />
    <button type="submit" name="enviar">
</form>


El cual enviamos por medio de PHP, pues queremos que cada vez que se procese el formulario muestre una imagen mientras se procesa... para ello crearemos un DIV en este caso lo llamaré loading.

El cual contiene la siguiente estructura:

<div id="loading">
  <img src="img/ajax-loader.gif" height="19" width="40">
</div>


Donde ajax-loader.gif es una imagen que usaremos, les recomiendo esta pagina: http://www.ajaxload.info/ con la cual pueden generar algunas imagen con transparencia en el fondo.

Por ultimo el codigo jQuery seria el siguiente:

$(document).ready(function(){
  $('#loading').hide();
  $('form').submit(function(){
    $('#loading').show();
  });
});


Y listo con eso podriamos mostrar una imagen. Se que es algo basico pero es algo que se utiliza mucho.

[PHP]Filtros con la libreria GD

$
0
0
Buenas en este caso utilizaremos la libreria PHP GD para aplicar algunos efectos comunes utilizando la funcion imagefilter():

boolimagefilter ( resource$image , int$filtertype [, int$arg1 [, int$arg2 [, int$arg3 [, int$arg4 ]]]] )

Como se describe la sintaxis arriba, necesitamos un recurso de imagen, una constante que aplicara el filtro (varios incluyen opciones y otros no).

Vamos a explicar algunas de las opciones que podremos usar.

IMG_FILTER_NEGATE - Esto lo que hace es negar los colores de la imagen (invertirlos).

IMG_FILTER_GRAYSCALE - Convierte la imagen a escala de grises.

IMG_FILTER_GAUSSIAN_BLUR - Pone la imagen borrosa utilizando el metodo Gaussiano.

IMG_FILTER_EMBOSS - Pone en relieve la imagen.

IMG_FILTER_EDGEDETECT - Detecta los bordes de la imagen para resaltarlos.

IMG_FILTER_BRIGHTNESS - Cambia el brillo de la imagen. Tiene un argumento el cual puede ir del valor -255 a 255.

IMG_FILTER_COLORIZE - Le da un color a toda la imagen, se usan tres parametros RGB (rojo, verde y azul), tambien puedes usar un cuarto parametro para valores alpha que va desde 0 a 127 lo cual le da transparencia a la imagen.

IMG_FILTER_CONTRAST - Cambia el contraste de la imagen.
Tiene un argumento el cual puede ir del valor -255 a 255.

IMG_FILTER_SMOOTH - Suaviza la imagen. Los valores recomendados son de -8 a 8 para que la diferencia se note pero no exageradamente.

Ahora veremos dos ejemplos en practica:

Codigo:

$image = imagecreatefrompng("ay2bdLJ.png");
imagefilter($image, IMG_FILTER_NEGATE); // negar colores

header("content-type: image/png");
imagepng($image);
imagedestroy($image);

Imagen:http://i.imgur.com/HOINYIr.png
Filtro Aplicado:IMG_FILTER_NEGATE
Resultado: 



Codigo:
$image = imagecreatefrompng("space.png");
imagefilter($image, IMG_FILTER_COLORIZE,255,0,0); // le da color a la imagen, red green blue
header("content-type: image/png");
imagepng($image);
imagedestroy($image);

Imagen:http://i.imgur.com/Nix7KLI.png
Filtro Aplicado: IMG_FILTER_COLORIZE
Resultado:


Y hasta aqui esta pequeña introduccion, es muy facil de usar, pero los efectos son bastante buenos, saludos!

[Parte 7]jQuery

$
0
0
jQuery - Manipulacion del DOM

jQuery proporciona metodos para manipular el DOM de forma eficiente. No es necesario escribir gran codigo para modificar el valor del atributo de cualquier elemento o para extraer el codigo HTML de un parrafo o div.

jQuery proporciona metodos tales como .attr(), .html() y .val() que actuan como getters (captadores) recuperan informacion de los elementos DOM para su uso posterior. 

Manipulacion de contenido

El metodo html() obtiene el contenido html (innerHTML) del primer elemento que coincida. Esta es la sintaxis del metodo:


selector.html()
Ejemplo:

El siguiente es un ejemplo que hace uso de los metodos .html() y .text(val). Aqui html() recupera el contenido HTML del objeto y luego .text(val) fija el valor del objeto con el parametro pasado.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").click(function(){
            var content = $(this).html();
            $("#result").text( content );
        });
    });
    </script>
    <style type="text/css">
        #division {
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 60px;
        }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div id="division" style="background-color:yellow;">Este es un cuadrado amarillo!!!</div>
</body>
</html>


Reemplazando elementos del DOM

Usted puede reemplazar un elemento del DOM o varios elementos del DOM completamente con el HTML especificado. El metodo replaceWith(content) sirve para este proposito muy bien. Aqui esta la sintaxis del metodo:

selector.replaceWith(content) 
En lugar de content usted utilizara lo que realmente quiere reemplazar en los elementos originales. Esto podria ser HTML o texto simple. 

Ejemplo

A continuacion se presentara un ejemplo que reemplazara el elemento division con <h1>jQuery es genial!</h1>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").click(function(){
            $(this).replaceWith("<h1>jQuery es genial!</h1>");
        });
    });
    </script>
    <style type="text/css">
        #division {
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 60px;
        }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div id="division" style="background-color:yellow;">Este es un cuadrado amarillo!!!</div>
</body>
</html>


Eliminando elementos del DOM

Puede haber una situacion en la que le gustaria eliminar uno o mas elementos del DOM desde el documento. jQuery proporciona dos metodos para manejar esta situacion. 
El metodo empty() elimina todos los nodos secundarios del conjunto de elementos coincidentes donde el metodo remove(expr) elimina todos los elementos coincidentes del DOM. Aqui esta la sintaxis de los metodos:

selector.remove([expr])

selector.empty()

Puede pasar un parametro opcional expr para filtrar el conjunto de elementos que desea eliminar.

Ejemplo

A continuacion se presenta un ejemplo donde se estaran eliminando los elementos tan pronto como se le hagan clic sobre ellos.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").click(function(){
            $(this).remove();
        });
    });
    </script>
    <style type="text/css">
        .div{
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 60px;
        }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div class="div" style="background-color:yellow;"></div>
    <div class="div" style="background-color:green;"></div>
    <div class="div" style="background-color:red;"></div>
</body>
</html>


Insertando elementos en el DOM

Puede haber una situacion en la que le gustaria insertar nuevos elementos ya sea uno o varios en su documento. jQuery proporciona varios metodos para insertar elementos en varios lugares. 
El metodo after(content) inserta contenido despues de cada uno de los elementos coincidentes, el metodo before(content) inserta contenido antes de cada uno de los elementos coincidentes. La siguiente es la sintaxis del metodo:

selector.after(content)

selector.before(content)

El contenido a insertar podria ser HTML o texto simple.

Ejemplo

A continuacion se presenta un ejemplo en el <div> los elementos se insertan justo antes del elemento que le des clic.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").click(function(){
            $(this).before('<div class="div"></div>');
        });
    });
    </script>
    <style type="text/css">
        .div{
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 60px;
        }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div class="div" style="background-color:yellow;"></div>
    <div class="div" style="background-color:green;"></div>
    <div class="div" style="background-color:red;"></div>
</body>
</html>


Metodos de manipulacion del DOM

La siguiente tabla enumera una lista de metodos que se puede utilizar para manipular los elementos del DOM.


+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| Metodo | Descripcion |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| after(content) | insertar contenido despues de cada uno de los elementos coincidentes. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| append(content) | Agrega contenido en el interior de cada elemento coincidente. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| appendTo(selector) | Agrega todos los elementos coincidentes a otro, especificado, conjunto de elementos. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| before(content) | inserta el contenido antes de cada uno de los elementos coincidentes. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| clone(bool) | Clonar elementos DOM coincidentes, y todos sus controladores de eventos, y seleccionar los clones. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| clone() | Clona los elementos DOM coincidentes y selecciona sus clones. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| empty() | Quita todos los elementos secundarios del conjunto de elementos que coincidan. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| html(val) | Establece el contenido html de cada elemento coincidente. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| html() | Obtener el contenido html (innerHTML) del primer elemento coincidente. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| insertAfter(selector) | Inserta todos los elementos coincidentes despues de otros, especificados, conjunto de elementos. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| insertBefore(selector) | Inserta todos los elementos coincidentes antes de otros, especificados, conjunto de elementos. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| prepend(content) | Antepone el contenido en el interior de cada elemento coincidente. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| prependTo(content) | Anteponer todos los elementos coincidentes a otro, conjunto de elementos. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| remove(expr) | Elimina todos los elementos coincidentes del DOM. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| replaceAll(selector) | Reemplaza todos los elementos coincidentes por el selector especificado con los elementos coincidentes. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| replaceWith(content) | Reemplaza todos los elementos coincidentes con el HTML especificado o elementos del DOM. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| text(val) | Establece el contenido de texto de todos los elementos coincidentes. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| text() | Obtener el contenido de texto combinado de todos los elementos coincidentes. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrap(elem) | Envuelve cada elemento coincidente con el elemento especificado. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrap(html) | Envuelve cada elemento coincidente con el contenido HTML especificado. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrapAll(elem) | Envuelve todos los elementos en el conjunto combinado en un unico elemento de envoltura. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrapAll(html) | Envuelve todos los elementos en el conjutno combinado en un unico elemento de envoltura. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrapInner(elem) | Envuelve todos los contenidos hijos interiores de cada elemento coincidente (incluyendo los nodos de texto) con un elemento DOM. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrapInner(html) | Envuelve todos los contenidos hijos interiores de cada elemento coincidente (incluyendo los nodos de texto) con una estructura HTML. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
 
 
Fuente:http://www.tutorialspoint.com

[Windows 7]Configurando VirtualHost en XAMPP

$
0
0
XAMPP es una aplicacion la cual te permite tener instalado Apache, PHP, MySQL y Perl configurado de una manera automatica. Otras de las ventajas es que es multiplataforma.

En esta ocasion veremos como configurar Host virtuales de manera que podamos acceder a nuestro proyecto web utilizando una url tipo: arthusu.com

Los Host virtuales en los hosting web sirven mucho para realizar servidores compartidos, darles un espacio pequeño de su disco duro y recursos a un par de usuarios para que utilicen su servicio de manera gratuita o de paga.

Esto es algo facil de realizar pero no esta de mas saberlo.



Pasos a seguir:

1.- Agregamos una nueva entrada en el archivo HOSTS que se encuentra en: C:\Windows\System32\drivers\etc\hosts

en este caso quedaria asi:

127.0.0.1            arthusu.com
En lugar de arthusu.com seria al host que deseas acceder.

Guardamos los cambios en caso de que estes en windows 7 o 8 necesitas ejecutar como administrador el programa con el que abras el archivo HOSTS.

2.- Nos dirigimos al archivo: C:\xampp2\apache\conf\extra\httpd-vhosts.conf
En el cual podremos configurar nuestro virtual host.


<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "C:/xampp2/htdocs/"
    ServerName localhost
    ##ErrorLog "logs/dummy-host2.example.com-error.log"
    ##CustomLog "logs/dummy-host2.example.com-access.log" common
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin arthusu@gmail.com
    DocumentRoot "C:/xampp2/htdocs/arthusu/"
    ServerName arthusu.com
    ##ErrorLog "logs/dummy-host2.example.com-error.log"
    ##CustomLog "logs/dummy-host2.example.com-access.log" common
</VirtualHost>

En el ejemplo anterior tenemos que el servidor localhost contiene toda la carpeta c:\xampp2\htdocs y su correo en caso de error es webmaster@dummy-host2.example.com

Y tenemos otro host que en este caso es arthusu.com el cual su carpeta es todo lo que este dentro de c:\xampp2\htdocs\arthusu y su correo en caso de error es arthusu@gmail.com

Hay dos opciones comentadas que son para errores y puede guardarlos en un archivo, en este caso los dejare como comentarios.

3.- Guardamos el archivo y reiniciamos apache.

4.- Entrar a arthusu.com y crear un archivo index.php en c:\xampp2\htdocs\arthusu\index.php con el contenido que quieras para verlo funcionar.

5.- En caso de que quieras agregar mas virtualhost solo es necesario realizar de nuevo los pasos anteriores. Es decir, agregar una ip local en este caso 127.0.0.1 apuntando a un dominio local por ejemplo: ejemplo.com.
Agregar en el archivo httpd-vhosts.conf otro virtualhost apuntando a esa direccion y reiniciar apache de nuevo.




Todo esto es variable y es muy facil de configurar usando XAMPP.

Para mas informacion: https://httpd.apache.org/docs/2.2/vhosts/name-based.html

Este articulo ha sido muy corto pero espero que a mas de uno le sea de utilidad.

 

Creando un catpcha usando PHP GD

$
0
0
Actualmente hay un monton de librerias de captchas en la web, como anteriormente mostre una de google captcha: http://arthusu.blogspot.mx/2014/09/resumen-recaptcha.html

Un desarrollador debe conocer como un captcha es generado. En este tutorial iremos paso a paso como crear un captcha usando PHP GD. El captcha es una cadena generada aleatoria generada automaticamente por numeros/letras, la cadena generada es guardada en algo (como sesiones o base de datos), cuando el usuario envia el formulario, este verifica si el texto introducido por el usuario es igual a la cadena generada y almacenada en la sesion por ejemplo, si coinciden asume que el que ingreso la cadena es un humano y no un bot y el proceso seguiria. En estos dias hay capchas de matematicas tales como 5x_ = 20 y si llenaras el espacio vacio con 4 que seria 5x4 = 20 el formulario es validado. En este tutorial solo nos concentraremos en una imagen de captcha. Para generar un captcha lo que necesitamos nosotros es una cadena aleatoria, para ello utilizaremos la libreria PHP GD, en la mayoria de los casos esta libreria viene instalada por defecto en los servidores. Asi que no discutiremos como instalarla. PHP GD tienen varias funciones para generar imagenes en varios formatos, nosotros comenzaremos con imagecreatetruecolor:

$im = imagecreatetruecolor('150','50');

Lo anterior crea una imagen de 150px de ancho y 50px de alto. Note que $im contiene el recurso de la imagen y no la imagen actual. Nosotros agregaremos componentes a la imagen tal como fondos, cadenas de texto. En este caso requerimos tres colores: primero para el fondo, segundo para la cadena y tercero para hacer unos pixeles de ruido, para que el captcha sea dificultoso para que los bots lo lean. Antes de aplicar estos colores a nuestro recurso de imagen $im primero tenemos que crear los tres colores:

$bg = imagecolorallocate($im, 230, 80, 0); // fondo naranja
$fg = imagecolorallocate($im, 255, 255, 255); // texto blanco
$ns = imagecolorallocate($im, 200, 200, 200); // ruido color gris

Los ultimos tres parametros para imagecolorallocate son el rgb para color. Y el primer parametro es el recurso de la imagen. Entonces ahora tenemos los colores listos, ahora necesitamos llenar la imagen con estos colores, primero agregemos el color de fondo:

imagefill($im, 0, 0, $bg); // el segundo y tercer parametro son las coordenadas x e y para comenzar el llenado de color

Ahora agregamos algunos caracteres a la imagen. Por ahora nosotros agregaremos la palabra 'captcha' pero esta debe ser generada automaticamente en el codigo final.

imagestring($im, 5, 10, 8, 'captcha', $fg);

imagestring dibuja la cadena 'captcha' como quinto parametro. El segundo parametro 5 es el tamaño de la fuente. 10 y 8 son de la esquina arriba a la izquierda las coordenadas x e y para comenzar la cadena desde ese punto. El primer parametro es el recurso de imagen y el ultimo es el color de la cadena. Nosotros agregamos un color de fondo, y una cadena de texto. Esta oficialmente hecho. Pero algunos bots son capaces de leer imagenes. Entonces para defendernos nosotros agregaremos un poco de ruido a la imagen para que solo la puedan leer los humanos y los bots no. 

imagesetpixel($im, 2, 4, $ns);

El codigo de arriba agrega un pixel en la coordenada (2,4) medido desde la esquina arriba izquierda. Obviamente necesitas varios de estos para que la imagen sea mas dificultosa de leer. Ahora es cuando generamos nuestra imagen utilizando imagepng creamos una imagen fuera del recurso $im. Y podemos crear nuestra imagen. 

imagepng($im);

Una buena practica que debemos de tener es destruir la imagen creada, despues de que es mostrada por el navegador ya no la requerimos mas.

imagedestroy($im);

Para que la imagen sea mostrada por el navegador necesitamos enviar algunas cabeceras del tipo de contenido de imagen, en este caso png. El codigo de abajo es llamado antes de que la imagen sea enviada al navegador. Esto es antes de imagepng($im).

header('Cache-Control: no-cache, must-revalidate');
header('Content-type: image/png');

El codigo de abajo es el codigo total. Nota que agregamos todas las funciones y sus parametros discutidos anteriormente. El proposito es agregar nuestro codigo dinamico. Tambien el fondo de ruido con la funcion imagesetpixel es agregado dentro de un loop para ser llamado varias veces. y por ultimo los caracteres del captcha son agregados aleatoriamente. El captcha aleatorio es almacenado en $_SESSION['captcha_code'].

 


<?php

//ancho y alto de la imagen a crear
$width = 90;
$height = 30;

//Cantidad de fondo para agregar el ruido a la imagen
$noise_level = 15;

//generamos codigo aleatorio en caso de que queramos usar numeros:
//$code=rand(1000,9999);

// generamos codigo aleatorio en caso de que queramos usar letras y numeros:
$chars = "1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
// el tamano del captcha en caracteres ?lenght=5...
$length = (isset($_GET['lenght']) && is_numeric($_GET['lenght'])) ? (int)$_GET['lenght'] : 8;

// Es agregado el captcha aleatorio en la variable $code
$code = "";
for ($i = 1; $i <= $length; $i++)
{
$code .= $chars[mt_rand(0, strlen($chars)-1)];
}


// guardamos la sesion para la validacion del formulario
session_start();
$_SESSION["captcha_code"]=$code;

//creamos el recurso de imagen
$im = imagecreatetruecolor($width, $height);
$bg = imagecolorallocate($im, 230, 80, 0); //color de fondo
$fg = imagecolorallocate($im, 255, 255, 255);//color de texto
$ns = imagecolorallocate($im, 200, 200, 200);//color de ruido

//llenamos la imagen del color fondo
imagefill($im, 0, 0, $bg);

//Agregamos la cadena aleatoria a la imagen
imagestring($im, 5, 10, 8, $code, $fg);

//Agregamos ruido a la imagen
for ($i = 0; $i < $noise_level; $i++) {
for($j = 0; $j < $noise_level; $j++) {
imagesetpixel(
$im,
rand(0, $width),
rand(0, $height),// nos aseguramos que los pixeles no se salgan de la imagen agregando sus respectivos ancho y alto
$ns
);
}
}

//le decimos al navegador el tipo de aimgen
header("Cache-Control: no-cache, must-revalidate");
header('Content-type: image/png');

//generamos la imagen
imagepng($im);

//destruimos la imagen
imagedestroy($im);
?>


Guardamos el codigo en un archivo php como captcha.php, ahora podemos usar el archivo como recurso de imagen, us uso es simple:

<form method="post" action="">
    <img src="captcha.php">
    <input type="text" name="captcha_code">
    <input type="submit" name="enviar">
</form>



En caso de que queramos agregar menos caracteres (aunque en realidad esta funcion es irrelevante y podria causar problemas futuros), es una buena demostracion:

<form method="post" action="">
    <img src="captcha.php?lenght=4">
    <input type="text" name="captcha_code">
    <input type="submit" name="enviar">
</form>


Ahora para validar el formulario con el captcha por el lado del servidor es como lo siguiente:

    session_start();
    if (isset($_POST['enviar'])) {
        if($_POST["captcha_code"] == $_SESSION["captcha_code"] ){
            //El captcha es correcto, entonces el formulario es procesado.
            echo "Correcto!";
        }
        else{
            //Los caracteres del captcha no coinciden.
            echo "Codigo captcha incorrecto.";
        }
    }



El capcha tambien nos ayuda contra ataques de fuerza bruta como comentamos en el tutorial de seguridad de php numero 7.


Espero que este post les haya sido de utilidad.

Publicacion original: http://perials.com/tutorial-creating-image-captcha-php-using-gd-library/

[Parte 8]jQuery

$
0
0
jQuery manejando eventos

Tenemos la capacidad crear paginas web dinamicas utilizando eventos. Los eventos son acciones que pueden ser detectadas por su sitio web. Los siguientes son ejemplos de eventos:

* Un clic del raton
* Una pagina web cargada
* Poniendo el raton sobre un elemento
* Envio de un formulario HTML
* Una combinacion de teclas del teclado
* etc

Cuando se activan estos eventos a continuacion, puede utilizar una funcion personalizada para hacer casi todo lo que quieras con el evento. Estas funciones personalizadas llaman al manejador de eventos.

Uniendo los controladores de eventos

Usando el modelo de eventos de jQuery, podemos establecer los controlares de eventos de elementos DOM con el metodo bind() de la siguiente manera:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").bind('click',function( event ){
            alert('Hola tu!');
        });
    });
    </script>
    <style type="text/css">
        .div{
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 60px;
        }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div class="div" style="background-color:yellow;">UNO</div>
    <div class="div" style="background-color:green;">DOS</div>
    <div class="div" style="background-color:red;">TRES</div>
</body>
</html>


Este codigo hara que el elemento div responda al evento click, cuando el usuario hace click en el interior de ese div a partir de entonces, se mostrará una alerta.

La sintaxis completa del comando bind() es:

selector.bind(eventType[,eventData],handler)
A continuacion se presenta la descripcion de los parametros:

* eventType -  Una cadena que contiene un tipo de evento Javascript, tales como hacer click o submit

* eventData - Este es un parametro opcional es un mapa de datos que se pasará al controlador de eventos. 

* handler - Una funcion para ejecutar cada vez que el evento se dispare.

Eliminacion de controlares de eventos

Por lo general, una vez que se establece un controlador de eventos, permanece en efecto para el resto de la vida de la pagina. Puede haber una necesidad cuando se desee eliminar el controlador de eventos de la pagina.

jQuery proporciona el comando unbind() para eliminar un controlador de eventos. La sintaxis de unbind() es la siguiente:

selector.unbind(eventType,handler)

selector.unbind(eventType)

La siguiente es la descripcion de los parametros:

* eventType - Una cadena que contiene un tipo de evento Javascript, tales como hacer click o submit.

* handler - Si se proporciona, identifica un listener especifico que es para ser eliminado.

Ejemplo: http://api.jquery.com/unbind/

Tipos de eventos

Los siguientes eventos multiplataforma son recomendados que se pueden hacer bind() usando jQuery:


+----------------+-----------------------------------------------------------------------+
| Tipo de evento | Descripcion |
+----------------+-----------------------------------------------------------------------+
| blur | se produce cuando el elemento pierde el foco. |
+----------------+-----------------------------------------------------------------------+
| change | se produce cuando el elemento cambia. |
+----------------+-----------------------------------------------------------------------+
| click | se produce cuando hace un click con el raton. |
+----------------+-----------------------------------------------------------------------+
| dblclick | se produce cuando hace doble click con el raton. |
+----------------+-----------------------------------------------------------------------+
| error | se produce cuando hay un error en la carga y descarga,etc. |
+----------------+-----------------------------------------------------------------------+
| focus | se produce cuando el elemento recibe el foco. |
+----------------+-----------------------------------------------------------------------+
| keydown | se produce cuando se presiona la tecla. |
+----------------+-----------------------------------------------------------------------+
| keypress | se produce cuando se pulsa la tecla y luego se libera. |
+----------------+-----------------------------------------------------------------------+
| keyup | se produce cuando se suelta la tecla |
+----------------+-----------------------------------------------------------------------+
| load | se produce cuando se carga el documento |
+----------------+-----------------------------------------------------------------------+
| mousedown | se produce cuando se presiona el boton del raton. |
+----------------+-----------------------------------------------------------------------+
| mouseenter | se produce cuando el raton entra en una region de un elemento. |
+----------------+-----------------------------------------------------------------------+
| mouseleave | se produce cuando el raton sale de una region de un elemento. |
+----------------+-----------------------------------------------------------------------+
| mousemove | se produce cuando el puntero del raton se mueve. |
+----------------+-----------------------------------------------------------------------+
| mouseout | se produce cuando el puntero del raton se mueve fuera de un elemento. |
+----------------+-----------------------------------------------------------------------+
| mouseover | se produce cuando el puntero del raton se mueve sobre un elemento. |
+----------------+-----------------------------------------------------------------------+
| mouseup | se produce cuando se suelta el boton del raton. |
+----------------+-----------------------------------------------------------------------+
| resize | se produce cuando se cambia el tamaño de la ventana. |
+----------------+-----------------------------------------------------------------------+
| scroll | se produce cuando se desplaza la ventana. |
+----------------+-----------------------------------------------------------------------+
| select | se produce cuando se selecciona un texto |
+----------------+-----------------------------------------------------------------------+
| submit | se produce cuando el formulario es enviado |
+----------------+-----------------------------------------------------------------------+
| unload | |
+----------------+-----------------------------------------------------------------------+


El objeto de event

La funcion de devolucion de llamada  toma un unico parametro, cuando el controlador se llama el objeto de evento Javascript sera pasado a traves de él. El objeto de evento (event) es a menudo innecesario y el parametro se omite, como contexto suficiente suele estar disponible cuando el controlador esta obligado a saber exactamente lo que hay que hacer cuando se activa el controlador (handler), sin embargo hay ciertos atributos que usted necesita para acceder.

Atributos del objeto event

Las siguientes propiedades/atributos de event estan disponibles para su acceso seguro de forma independiente de la plataforma:


+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Propiedad | Descripcion |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| altKey | Establece en true si se pulsa la tecla ALT cuando se activa el evento, false en caso contrario. La tecla ALT |
| | se marca como opcion en la mayoria de los teclados MAC. |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| ctrlKey | Se establece en true si se pulsa la tecla CTRL cuando se activa el evento, falso en caso contrario. |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| data | El valor, en su caso, pasa como segundo parametro el comando bind() cuando se establece el manejador. |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| keyCode | Para eventos keyup y keydown, esto devuelve la tecla que se presiono. |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| metaKey | Se establece en true si se pulsa la tecla META cuando se activa el evento, false en caso contrario. La tecla META |
| | es la tecla CTRL en PC y tecla COMMAND en MAC. |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| pageX | Para eventos de raton, especifica la coordenada horizontal del evento relativo desde el origen de la pagina. |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| pageY | Para eventos de raton, especifica la coordenada vertical del evento relativo desde le origen de la pagina. |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| relatedTarget | Para algunos eventos de raton, identifica el elemento hacia la izquierda o dentro cuando se activa el elemento. Ejemplo: https://api.jquery.com/event.relatedTarget/ |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| screenX | Para eventos de raton, especifica la coordenada horizontal del evento relativo desde el origen de la pantalla. |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| screenY | Para eventos de raton, especifica la coordenada vertical del evento relativo desde el origen de la pantalla. |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| shiftKey | Se establece en true si se pulsa la tecla SHIFT cuando se activa el evento, false en caso contrario. |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| target | Identifica el elemento para el que se activa el evento. |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| timeStamp | El tiempo marcado (en milisegundos) cuando se creo el evento. |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| type | Para todos los eventos, especifica el tipo de evento que se activa (por ejemplo hacer clic). |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| which | Para eventos de teclado, especifica el codigo numerico de la tecla que causo el evento, y para los eventos de raton, especifica que se presiona el boton |
| | (1 a la izquierda, 2 en el medio, 3 a la derecha). |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").bind('click',function( event ){
            alert('Tipo de evento es: ' + event.type);
            alert('PageX: ' + event.pageX);
            alert('PageY: ' + event.pageY);
            alert('Target: ' + event.target.innerHTML);
        });
    });
    </script>
    <style type="text/css">
        .div{
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 60px;
        }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div class="div" style="background-color:yellow;">UNO</div>
    <div class="div" style="background-color:green;">DOS</div>
    <div class="div" style="background-color:red;">TRES</div>
</body>
</html>


Los metodos del objeto event

La siguiente es una lista de metodos que pueden ser llamados en un objeto event.

+---------------------------------+----------------------------------------------------------------------------------------------------------------------------+
| Metodo | Descripcion |
+---------------------------------+----------------------------------------------------------------------------------------------------------------------------+
| preventDefault() | Evita que el navegador ejecute una accion predeterminada |
+---------------------------------+----------------------------------------------------------------------------------------------------------------------------+
| isDefaultPrevented() | Devuelve si event.preventDefault() alguna vez fue llamado en este objeto de event. |
+---------------------------------+----------------------------------------------------------------------------------------------------------------------------+
| stopPropagation() | Detiene el burbujeo de un evento para elementos primarios, evitando cualquier controlador padre ser notificado del evento. |
+---------------------------------+----------------------------------------------------------------------------------------------------------------------------+
| isPropagationStopped() | Devuelve si event.stopPropagation() alguna vez fue llamado en este objeto event. |
+---------------------------------+----------------------------------------------------------------------------------------------------------------------------+
| stopImmediatePropagation() | Detiene el resto de los controladores de ser ejecutados. |
+---------------------------------+----------------------------------------------------------------------------------------------------------------------------+
| isImmediatePropagationStopped() | Devuelve si event.stopImmediatePropagation() alguna vez fue llamado en este objeto event. |
+---------------------------------+----------------------------------------------------------------------------------------------------------------------------+




Metodos de manipulacion de eventos

La siguiente tabla enumera metodos relacionados con eventos importantes:

+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| Metodo | Descripcion |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| bind(type,[data]),fn | Enlaza un controlador de uno o mas eventos (como hacer clic) para cada elemento coincidente. |
| | Tambien se pueden enlazar eventos personalizados. |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| off(events[,selector][,handler(eventObject)]) | Esto hace lo contrario de live, elimina un evento atado en live. |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| hover(over,out) | Simula que se asoma por ejemplo moviendo el mouse fuera o dentro del objeto. |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| on(events[,selector][,data],handler) | Enlaza un controlador a un evento (como clic) para los actuales - y futuros - elementos coincidentes. |
| | Tambien se pueden enlazar elementos personalizados. |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| one(type[,data],fn) | Enlaza un controlador de uno o mas eventos que se ejecutaran una vez por cada elemento coincidente. |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| ready(fn) | Se une una funcion a ejecutar cuando el DOM este listo para ser atravesado y manipulado. |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| trigger(event,[data]) | Activar un evento en cada elemento coincidente. |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| triggerHandler(event,[data]) | Dispara todos los controladores de eventos ligados a un elemento. |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| unbind([type],[fn]) | Esto hace lo contrario de bind, elimina eventos enlazados de cada uno de los elementos coincidentes. |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+

Eventos metodos Helper

jQuery tambien proporciona un conjunto de funciones auxiliares para eventos que se pueden utilizar ya sea para activar (trigger) un evento u obligar (bind) cualquier tipo de evento mencionado anteriormente.

Metodos de activacion

A continuacion se presenta un ejemplo que desencadena el evento blur en todos los parrafos.

$("p").blur();
Binding metodos

A continuacion se presenta un ejemplo donde se enlaza (bind) un evento cuando hacen click en todo el div.

$("div").click(function(){
    // hacer algo aqui
});
Aqui esta una lista completa de todos los metodos de ayuda de apoyo proporcionados por jQuery:

+----------------+----------------------------------------------------------------------------+
| Metodo | Descripcion |
+----------------+----------------------------------------------------------------------------+
| blur() | Dispara un evento de desenfoque a cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| blur(fn) | Enlaza una funcion al evento desenfoque a cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| change() | Dispara el evento de cambio de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| change(fn) | Enlaza una funcion para el evento de cambio de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| click() | Dispara el evento de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| click(fn) | Enlaza una funcion para el evento click de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| dblclick() | Dispara el evento dblclick de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| dblclick(fn) | Enlaza una funcion para el evento dblclick de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| error() | Dispara el evento de error de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| error(fn) | Enlaza una funcion para el evento error de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| focus() | Dispara el evento enfoque de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| focus(fn) | Enlaza una funcion para el evento focus de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| keydown() | Dispara el evento keydown de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| keydown(fn) | Enlaza una funcion al evento keydown de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| keypress() | Dispara el evento keypress de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| keypress(fn) | Enlaza una funcion al evento keypress de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| keyup() | Dispara el evento keyup de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| keyup(fn) | Enlaza una funcion al evento keyup de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| load(fn) | Enlaza una funcion para el evento load de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| mousedown(fn) | Enlaza una funcion para el evento mousdown de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| mouseenter(fn) | Enlaza una funcion para el evento mouseenter de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| mouseleave(fn) | Enlaza una funcion para el evento mouseleave de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| mousemove(fn) | Enlaza una funcion para el evento mousemove de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| mouseout(fn) | Enlaza una funcion para el evento mouseout de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| mouseover(fn) | Enlaza una funcion para el evento mouseover de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| mouseup(fn) | Enlaza una funcion para el evento mouseup de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| resize(fn) | Enlaza una funcion para el evento resize de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| scroll(fn) | Enlaza una funcion para el evento scroll de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| select() | Dispara el evento select de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| select(fn) | Enlaza una funcion para el evento select de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| submit() | Dispara el evento submit de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| submit(fn) | Enlaza una funcion para el evento submit de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| unload(fn) | Enlaza una funcion para el evento unload de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+


Fuente: http://www.tutorialspoint.com

[Doxing] Encontrar informacion de personas

$
0
0
El otra vez estaba en el IRC chateando, entro un usuario y pregunto sobre el tema de "investigar personas" muchos usuarios le dañaron la autoestima como es normal :D. Bueno pero ahora vengo hablarles sobre Doxing el cual se define como:

¿Que es Doxing?

Doxing (dox es una abreviacion de "documentos") es un proceso para obtener informacion personal de un objetivo siendo casi siempre una persona, en este tipo de documentos podemos obtener mucha documentacion sobre la persona tal como puede ser: nombre real, sexo, sitio web, alias, email, perfil de redes sociales, direccion, ip, etc. Este tipo de tecnicas entran dentro de la ingieneria social. 

Hay muchas herramientas ya sea online o de escritorio las cuales te permiten automatizar este tipo de proceso, y la mejor forma de realizar esto es las conexiones que realices al buscar tu objetivo. Encontrar un nombre de usuario lleva a encontrar el nombre completo y esto puede conducir a la direccion fisica. El usuario puede llevar alguna fotografia lo cual puede resultar en dar su direccion o placas. Para nombres comunes como Cesar se le pueden agregar los intereses o localizacion para encontrar mas rapido lo buscado, es por esto tambien que muchas personas no confian en otras por internet debido a la informacion que se puede encontrar puede ser muchas veces un golpe bajo.



Otro tipo de ejemplo puede ser: http://pastebin.com/G2rH2xsw

Obteniendo informacion de un objetivo

Aqui depende mas que nada del tipo de informacion que tengas con que empezar, ya sea el alias, el email, la direccion fisica, etc. Como comentabamos mas arriba un dox es una abreviacion de documento entonces por lo menos deberiamos tener el siguiente formato de documentacion el cual nos puede ser de utilidad:


Nombre de usuario/ Sobrenombre: 
Nombre real:
Localizacion:
Nacionalidad:
Imagenes:
Videos:
Religion:
Orientacion Sexual:
Numero movil/telefono:
Direccion IP:
Sitios webs hackeados:
Paginas de redes sociales:
Foros en los que postea:
Miembros de su familia:
Ocupacion:
Registro criminal:
Informacion extra:


Por busqueda general usamos Google.

www.google.com 

Podemos usar los famosos dorks para encontrar informacion, algunos ejemplos de utilidad pueden ser:

inurl: especificas el sitio donde deseas buscar a la persona.

alias inurl:www.elsitio.com
alias inurl:www.facebook.com

intitle: especifica que tenga en el titulo de cualquier pagina lo que le indiques.

alias intitle:bienvenido

intext: especficia que tenga en el cuerpo de la pagina lo que le indiques.

alias intext:juakear

Otro sitio de busqueda pueden ser:
www.bing.com
www.duckduckgo.com


Sitios webs recomendados para busqueda de informacion:

https://pipl.com 
http://www.spokeo.com
http://www.peekyou.com
http://www.yasni.com
http://www.skipease.com
http://www.ussearch.com
http://freeality.com 
http://www.zabasearch.com
 http://www.keotag.com
http://yahoo.intelius.com
http://archive.org
https://www.facebook.com/directory/people
http://topsy.com
http://socialmention.com
http://knowem.com
http://twoogel.com
http://www.whostalkin.com
https://namechk.com
http://www.freecellphonedirectorylookup.com
http://www.numberway.com
http://www.fonefinder.net
http://publicrecords.onlinesearches.com
http://www.jailbase.com/en/sources/fl-lcso
http://exifdata.com
http://whois.domaintools.com
http://checkusernames.com  
https://haveibeenpwned.com/

Ingieneria social

Como habiamos comentado arriba el proceso del doxing esta muy ligado a la ing. social por lo cual puedes agregar el email del usuario o en las redes sociales, para obtener los datos deseados, como dijo kevin mitnick:

    * Todos queremos ayudar.
    * El primer movimiento es siempre de confianza hacia el otro.
    * No nos gusta decir No.
    * A todos nos gusta que nos alaben.




Puedes comenzar desde ahi tus cimientos. Quizas te interese:


http://arthusu.blogspot.mx/2015/05/php-creando-una-firma-dinamica.html


Formas de defenderse

Las recomendaciones para defenderse son:

* Intenta cambiar tu nickname cierto tiempo
* Intenta usar canales seguros (Proxys, VPNS, TOR)
* Para chatear por canales seguros (http://arthusu.blogspot.mx/2014/03/conversaciones-privadas-usando-pidgin-y.html)
* Cifrar tus mensajes (https://foro.hackxcrack.net/criptografia-y-esteneografia/enviar-mensajes-cifrados-por-gmail-o-hotmail-by-arthusu/)

Como recomendacion haste un doxing a ti mismo, e intenta borrar todos los rastros que puedas encontrar.

* No dejar datos en redes sociales.
* Uso de correos temporales
* No usar datos reales
* No confiar (Esta no se aplica a todos, pero mucha gente que no sabes en cual confiar)

Espero que esta mini-introduccion sobre doxing les sea de utilidad a mas de alguno. Si tienen algunas tools o tecnicas que puedan compartir no olviden dejar sus comentarios.

Crackear contraseñas usando john the ripper

$
0
0

En este tutorial vamos a describir las principales opciones de john the ripper. Vamos a explicar el funcionamiento basico para el uso de JTR para romper contraseñas (LM, NTML, MD5) haciendo uso de una lista de palabras o ataque de fuerza bruta.

Acerca de John the ripper

John the ripper es un rapido rompedor de contraseñas, actualmente disponible para muchos sistemas tales como unix, windows, DOS, BeOS, y OpenVMS. Su objetivo principal es detectar contraseñas debiles de unix. Es uno de los programas rompedores de contraseñas mas famosos, ya que combina una serie de rompedores de contraseñas en un solo paquete, detecta automaticamente los tipos de contraseñas, e incluye un cracker personalizable.
Puedes ejecutar varios formatos de contraseñas encriptadas, incluso varios hash de contraseñas en sistemas unix(DES, MD5, Blowfish), Kerberos AFS, y Windows NT/2000/XP/2003 (LM hash). Los modulos adicionales han ampliado su capacidad de incluir hashes en MD4, contraseñas en LDAP, MySQL y otros.

Mas informacion: http://openwall.info/wiki/john/sample-hashes

Descargar - Instalar JTR

Descargar la ultima version gratis de JTR usando el sitio web oficial. Descargarlo dependiendo del sistema donde te encuentres. Lo ejecutamos desde consola o terminal y veremos lo siguiente:


>john
John the Ripper password cracker, version 1.7.9
Copyright (c) 1996-2011 by Solar Designer
Homepage: http://www.openwall.com/john/

Usage: john [OPTIONS] [PASSWORD-FILES]
--single "single crack" mode
--wordlist=FILE --stdin wordlist mode, read words from FILE or stdin
--rules enable word mangling rules for wordlist mode
--incremental[=MODE] "incremental" mode [using section MODE]
--external=MODE external mode or word filter
--stdout[=LENGTH] just output candidate passwords [cut at LENGTH]
--restore[=NAME] restore an interrupted session [called NAME]
--session=NAME give a new session the NAME
--status[=NAME] print status of a session [called NAME]
--make-charset=FILE make a charset, FILE will be overwritten
--show show cracked passwords
--test[=TIME] run tests and benchmarks for TIME seconds each
--users=[-]LOGIN|UID[,..] [do not] load this (these) user(s) only
--groups=[-]GID[,..] load users [not] of this (these) group(s) only
--shells=[-]SHELL[,..] load users with[out] this (these) shell(s) only
--salts=[-]COUNT load salts with[out] at least COUNT passwords only
--save-memory=LEVEL enable memory saving, at LEVEL 1..3
--format=NAME force hash type NAME: des/bsdi/md5/bf/afs/lm/trip/
dummy


Explicacion de opciones

Las opciones pueden ser especificadas junto con los archivos de contraseñas o por su cuenta. Todas las opciones son case sensitive, puede ser abreviado de manera larga o corta, pueden prefijar dos guiones o con un solo guion y pueden utilizar "=" o ":" para indicar un argumento. Activa el modo "solo crack" usando las reglas de la seccion del archivo de configuracion.

--single

john --single archivo_a_crackear.txt

Activar el modo wordlist (ataque de diccionario) este es mas rapido que el ataque por defecto (fuerza bruta).

--wordlist=ARCHIVO

john --wordfile:password.lst archivo_a_crackear.txt

Le permite definir las reglas para el uso de wordlist.

--rules

Permite un modo incremental que le permite hacer un ataque de fuerza bruta bajo ciertos modos.

--incremental[=MODO]

john --incremental:alpha archivo_a_crackear.txt
john --incremental:digits archivo_a_crackear.txt


Sigue una sesion interrumpida de crackeo, leyendo informacion sobre el estado del archivo de sesion especificado o de $JOHN/john.rec por defecto.

--restore[=NOMBRE]

john --restore:restore

(Nota: Si ha utilizado la opcion de sesion, debe especificar el nombre de sesion para el proceso de restauracion).

Esta opcion puede utilizarse solo a partir de una nueva sesion de cracking y su proposito es dar a la nueva sesion un nombre (a la cual john le agregará el sufijo ".rec" para formar el nombre del archivo de sesion).

--session=NOMBRE

john --session:[archivo_a_guardar] archivo_a_crackear.txt

(Nota: Esta opcion crea y mantiene los datos de su sesion que permite restaurarla mas adelante).

Imprime el estado de una sesion interrumpida o corriendo.

--status[=NOMBRE]

john --status:[nombre_del_archivo]

Muestra las contraseñas crackeadas para los archivos dados. Usted puede utilizar esta opcion para ver que es lo que hizo john hasta el momento.

--show

john --show archivo_a_crackear.txt

Prueba todos los algoritmos hash compilados para verificar el correcto funcionamiento y sus puntos de referencia.

--test[=TIEMPO]

john --test

Le permite seleccionar unas cuentas para crackear o para otras operaciones. 

--users=[-]LOGIN|UID

john --users:Usuario archivo_a_crackear.txt

Esta opcion es util para cargar cuentas con una shell valida solamente o no cargar cuentas con una shell mala.

--shells=[-]SHELL

Permite sobreescribir la deteccion del tipo de Hash. Actualmente, los "nombres de formato" validos son DES, BSDI, MD5, BF, AFS, LM, y crypt.

--format=NOMBRE

john --format:DES archivo_a_crackear.txt
john --format:BSDI archivo_a_crackear.txt
john --format:MD5 archivo_a_crackear.txt
john --format:BF archivo_a_crackear.txt
john --format:AFS archivo_a_crackear.txt
john --format:LM archivo_a_crackear.txt


Ejemplos - fuerza bruta

En esta parte del tutorial crearemos un archivo .txt con los hash que incluiran contraseñas en formato (LM/NTLM/HASH).

Añadiremos los hashes el LM y NTLM como sigue:

Editor::A4A54C86C6E5B8D0D69E92D4A9360EB0:FC4CB75BCC71D23954F4C94AD31AF0B1:::

A continuacion vamos a escribir el siguiente comando para abrir el archivo .txt.

>john john.txt
Loaded 2 password hashes with no different salts (LM DES [128/128 BS SSE2
ATSIS            (Editor:2)
guesses: 1  time: 0:00:01:32 (3)  c/s: 10880K  trying: CR5PT24 - CR5PNHJ
FOTISLI          (Editor:1)
guesses: 2  time: 0:00:01:33 (3)  c/s: 10931K  trying: FOTILVY - FOTIBFA
Warning: passwords printed above might be partial
Use the "--show" option to display all of the cracked passwords reliably

 
Para previsualizar los resultados de esta operacion escribimos:

>john --show john.txt
Editor:FOTISLIATSIS::FC4CB75BCC71D23954F4C94AD31AF0B1:::
2 password hashes cracked, 0 left
 

(Nota: el archivo john.txt contiene solo caracteres alfa).

Ahora crearemos el archivo john2.txt que contendra caracteres alfanumericos.
 
Liatsis_Fotis#Post::C99FFEFFD8300629F500944B53168930:892A0EAA0CFE35F105138006D6415A2E:::
Liatsis_Fotis#About::5524ADDCF15F4B1EAAD3B435B51404EE:730F52CBC638F6ECD8E1F5D89600AA6A:::
Liatsis_Fotis#ID::686A307B45A7EC144207FD0DF35A59A8:C7DE72EBBFF0979175DF38D63294FFA9:::

 
A continuacion vamos a escribir el siguiente comando, agregando --format como opcion y podremos especificar el formato de LM.

>john --format=LM john2.tx
Loaded 5 password hashes with no different salts (LM DES [128/128 BS SSE2]
L                (Liatsis_Fotis#Post:2)
12               (Liatsis_Fotis#ID:2)
JTR              (Liatsis_Fotis#About)
TUTORIA          (Liatsis_Fotis#Post:1)
guesses: 4  time: 0:00:00:06 (3)  c/s: 6613K  trying: MYKHRT2 - MYKHNTH
PRIVACY          (Liatsis_Fotis#ID:1)
guesses: 5  time: 0:00:00:09 (3)  c/s: 7749K  trying: PRIVAI! - PRIVSM2
Warning: passwords printed above might be partial
Use the "--show" option to display all of the cracked passwords reliably

 
Para previsualizar los resultados de esta operacion escribimos:

>john --show john2.txt
Liatsis_Fotis#Post:TUTORIAL::892A0EAA0CFE35F105138006D6415A2E:::
Liatsis_Fotis#About:JTR::730F52CBC638F6ECD8E1F5D89600AA6A:::
Liatsis_Fotis#ID:PRIVACY12::C7DE72EBBFF0979175DF38D63294FFA9:::
5 password hashes cracked, 0 left


Ejemplos - Ataque por diccionario

En esta parte vamos a escribir el siguiente comando añadiendo la opcion --wordlist y especificar la ubicacion del archivo de lista de palabras. 

>john --wordlist=mi_wordlist.txt john3.txt
Loaded 1 password hash (LM DES [128/128 BS SSE2-16])
PR1V@CY          (Security)
guesses: 1  time: 0:00:00:00 100%  c/s: 248533  trying: PR1VYPV - PR1V@YC
Use the "--show" option to display all of the cracked passwords reliably


Para previsualizar los resultados de esta operacion escribimos:

>john --show john3.txt
Security:PR1V@CY::A8C6E71DC39003852ACC407CFA612363:::

1 password hash cracked, 0 left 

 
(Nota: como hemos observado, el metodo de ataque wordlist llevo menos tiempo para decifrar el codigo hash).

(Nota: use onlinehashcrack.com para generar mis contraseñas en formato LM/NTLM)

Conclusion

Son muchas maneras en las que podemos pasar un hash a un archivo. Este tutorial describe las cosas basicas para generar, crear/abrir un archivo .txt con algoritmos simples como LM/NTLM, la mejor manera es intentar usar todos los parametros en un entorno virtual, creando nuestros hash y wordlist para lo que la opcion puede realizar antes de proceder al archivo real .txt.


Traduccion: arthusu
Post original:http://www.liatsisfotis.com/2012/12/crack-passwords-using-john-ripper.html 

Google Hacking

$
0
0
Introduccion
Buenas, en esta entrada trataré de explicar acerca de Google Hacking para usarlo en nuestras pruebas de penetracion o recoleccion de informacion en cualquier cosa que nos sirva, ya que con Google es solo saber utilizar de manera adecuada los operadores/directivas.

Tambien les puede interesar las siguientes entradas:
http://arthusu.blogspot.mx/2013/03/como-obtener-mejores-resultados-al.html
http://arthusu.blogspot.mx/2015/04/arthusu-mi-metodologia-pruebas-de.html

Informacion que nos interesa

En el caso de estar recolectando informacion sobre una pagina puede haber demasiadas cosas que nos interesarian saber, entre las cuales se encuentran:

* El lenguaje que usa la pagina web
* El sitema operativo del servidor web
* El software del sistema operativo del servidor
* La version del software del servidor
* Si el sitio web tiene Plugins
* Si el sitio web tiene CMS popular
* Que tipos de archivos contiene mas que otros
* La base de datos que utiliza
* Los subdominios que tiene

La mayoria de la informacion que nos puede interesar puede venir de vulnerabilidades, tales como:

* Errores en la web o servidor
* Directorios que sabemos que pueden incluir informacion sensible
* Archivos que incluyen contraseñas
* Firewalls web

Una de las paginas que incluye mucha informacion sobre dorks de google para poder realizar nuestras busquedas es: https://www.exploit-db.com/google-hacking-database/ 

Busquedas especificas

Para realizar busquedas especificas de lo que queramos encontrar en google utilizaremos los famosos "operadores" que incluye para referirse a cierto tipo de cosas. Comentare de manera rapida los usos de cada uno:

- Con este signo menos excluimos algunos resultados.
+ Con este operador + podemos incluir varias busquedas en los resultados.
~ Con esta tilde se buscan sinonimos de la palabra que le asignes.
* Se utiliza el asterisco como comodin de palabras extra.
" Podemos usar las comillas dobles para buscar una palabra exacta que este entre ellas.

OR (|) Puedes buscar almenos una de varias palabras


site: Obtiene resultados de sitios o dominios que le asignes.
link: Busca paginas externas que contienen enlaces del sitio que le asignes.
related: Busca sitios web relacionados al que le asignes.
info: Obtiene informacion sobre el sitio o dominio que le asignes.
cache: Comprueba como era la pagina o direccion que le asignes la ultima vez que google lo visito.
intitle: Con este operador buscamos en el titulo de la pagina entre las etiquetas  <title>
inurl: Con este operador buscamos que la url incluya lo que le asigamos en la busqueda.
define: Este operador se utiliza para definir un termino de la palabra que le asignes.
filetype/ext: Con estos operadores buscamos un archivo por su extension o tipo de archivo.
intext: Incluye terminos que esten en el <body> de la pagina.
insubject: Incluye terminos que esten en el las etiquetas de titulo de la pagina.
inanchor: Incluye terminos que tengan la etiqueta <a> dentro del <body> de la pagina web.


Google ignora algunas palabras

Google ignora varias palabras como son "a", "el", "de" ... que muchas veces solo harian la busqueda mas pesada por lo que es recomendable no utilizarlas cuando intentemos encontrar informacion. Y podemos hacer busquedas inteligentes en lugar de escribir "me duele la cabeza" podriamos escribir "dolor de cabeza" con lo cual encontrariamos mejores resultados.

Buscar lo mas comun o mas afectado

Lo mejor para encontrar cosas es irnos a buscar lo mas comun o mas afectado en cualquier tipo de aplicacion web.

Mensajes de error: Failed to open stream, access denied, fatal error, division by zero, warning, error, include, ORA-xxxx, database error, error ocurred, error online, cannot modified header, a syntax error, the page cannot be found, internet information services, error diagnostic information, etc.
Mensajes HTTP: 200 OK, 300 Multiple choices, 301 Moved permanently, 302 Found, 304 Not Modified, 307 Temporary Redirect, 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, 500 Internal server error, 501 Not implemented, 503 Service unavailable, 550 Permission denied, etc. Puedes ver una lista mas completa aqui: http://en.wikipedia.org/wiki/List_of_HTTP_status_codes
Servidores web: ISS, Apache, Apache Tomcat, Nginx, Lighttpd, Jigsaw, Klone, Abys web server, Oracle web tier, x5 web server, zeus web server, IBM HTTP server, LiteSpeed web server, etc. Puedes ver una lista mas completa aqui: http://en.wikipedia.org/wiki/Comparison_of_web_server_software
CMS: Wordpress,joomla, drupal, prestashop, tynicms, etc. 


Busquedas comunes para vulnerabilidades

Hay muchos dorks, los dorks son de manera sencilla una simple cadena de caracteres con los operadores anteriores la cual nos arroja un resultado deseado, tal como "tarjetas de creditos", "contraseñas de usuarios", "paginas phishing", etc.

Vamos a ver algunas de las tecnicas que yo utilizo muy comunmente para encontrar algunas cosas en algun sitio web:

Crawling:

Con esto puedes ver todo lo que ha indexado google del sitio web que buscas.

site:tudominio.com

Pagina de administracion:

Podemos encontrar paginas de administracion utilizando. Algunos de los operadores y palabras comunes.

site:dominio.com intext:admin OR intext:administrator
site:dominio.com inurl:admin OR inurl:administrator

Subdominios:

site:dominioprincipal.com -site:www.dominioprincipal.com
site:dominioprincipal.com -site:www.dominioprincipal.com -site:www.subdominio1.principal.com

Extensiones:

site:dominio.com ext:pdf | ext:log | ext:txt | ext:bak

Algunas extesiones:  pdf, xls, rar, zip , tar.gz, htm, php, bak, sql, csv, txt, log, conf

Archivos phpinfo, robots, o backups:

site:.net intitle:phpinfo() inurl:info.php
inurl:"robots.txt" intext:"disallow:"
intext:config ext:bak intitle:"index of"


Acceso a directorios:

intitle:"index of"
site:tusitio.com intitle:"index of"

Errores:Los errores son muy comunes en cualquier sitio web o servidor:



Crea tu propio DORK

Para crear un dork solo necesitamos utilizar los operadores ya conocidos anteriormente. Muchos usuarios intentan con cosas comunes que ven o simplemente encuentran una vulnerabilidad en un CMS no muy conocidos y le pasan operadores para encontrarla.

Anteriormente puse algunos dorks que no vi en ningun lugar solo se me ocurrio utilizar los operadores por que podrian ser utiles para encontrar informacion, por ejemplo... una manera de encontrar un poco mas rapido la informacion seria utilizar el tip recomendado en la entrada que les recomende al inicio:

^inurl:"e-vendo.php?shop="


Otras formas de Google Hacking:

Google Hacking Imagenes:

Bueno esto no es algo nuevo pero podriamos utilizar la busqueda avanzada que nos proporciona google: https://www.google.es/advanced_image_search

O tambien intentar buscar la imagen deseada utilizando el mismo buscador de imagenes, ya sea subiendo la imagen o pegando la URL, podriamos encontrar cosas interesantes de la empresa o persona relacionada a la pagina web.

Google Hacking Mapas:

Esto tampoco es nuevo pero con los mapas de google: https://www.google.es/advanced_image_search
Nos es muy facil encontrar informacion sobre donde se encuentra la empresa o persona relacionada con la pagina web.

Bueno y hasta aqui este "tutorial" si se le puede llamar asi, no es nada de otro mundo, pueden ver muchos ejemplos en la pagina exploit-db la cual contiene muchos ejemplos para usar estos operadores, espero que a mas de uno le sea de utilidad y si encontrado lo que buscaban genial!

[Parte 9]jQuery

$
0
0
jQuery - AJAX

AJAX es un acronimo que significa Asynchronous JavaScript and XML y esta tecnologia nos ayuda a cargar datos desde el servidor sin una actualizacion de la pagina del navegador.

jQuery es una gran herramienta que proporciona un rico conjunto de metodos AJAX para desarrollar aplicaciones web.

Cargando datos simples

Es muy facil cargar todos los datos estaticos o dinamicos utilizando AJAX en jQuery. jQuery proporciona el metodo load() para hacer esto - sintaxis:

[selector].load(URL,[data],[callback]);

Aqui esta la descripcion de todos los parametros:

URL - La URL del recurso del lado del servidor al que se envia la solicitud. Podria ser un CGI, ASP, JSP, PHP o script que genera datos de forma dinamica o fuera de una base de datos. 

data - Este parametro opcional representa un objeto cuyas propiedades son serializadas en parametros adecuadamente codificadas para ser pasado a la peticion. Si se especifica, la solicitud se realiza mediante el metodo POST. Si se omite, se utiliza el metodo GET.

callback - Una funcion callback se invoca despues de que los datos de respuesta se han cargado en el conjunto de elementos. El primer parametro pasado a esta funcion es el texto de respuesta recibido desde el servidor y el segundo parametro es el codigo de estado.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#driver").click(function(event){
            $('#stage').load('archivos/resultado.html')
        })
    });
    </script>
</head>
<body>
    <p>De clic en el boton cargar para leer el archivo /archivos/resultado.html</p>
    <div id="stage" style="background-color:#cc0;">Escenario</div>
    <input type="button" id="driver" value="Cargar datos" />
</body>
</html>


Aqui load() inicia una peticion AJAX al archivo archivos/resultado.html especificado. Despues de cargar este archivo, todo el contenido es rellena en el interior del <div> con el id="stage", suponiendo que nuestro archivo HTML tiene una sola linea:

<h1>Este es el resultado</h1>


Obtener datos JSON

Habria una situacion en la que el servidor devolveria una cadena JSON en su peticion. jQuery tiene una funcion de utilidad getJSON() analiza la cadena JSON devuelta y hace que la cadena resultante este disponible para ser llamada en la funcion como primer parametro para tomar nuevas medidas. Sintaxis: Esta el la sencilla sintaxis del metodo getJSON():

[selector].getJSON(URL,[data],[callback]);

Aqui esta la descripcion de todos los parametros:

URL - La URL del recurso del lado del servidor en contacto a traves del metodo GET.

data - Un objeto cuyas propiedades sirven como pares nombre/valor se utilizan para la construccion de una cadena de consulta que se adjunta en la direccion URL, o una cadena de consulta con formato preformateada y codificada.

callback -  Una funcion se invoca cuando la solicitud es completada. El valor de los datos resultantes de la digestion del cuerpo de la respuesta como una cadena JSON es pasada como primer parametro a esta devolucion de llamada y el estado de respuesta como segundo. Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#driver").click(function(event){
            $.getJSON('archivos/resultado.json',function(jd){
                $('#stage').html('<p>Nombre: ' + jd.name + '</p>');
                $('#stage').append('<p>Edad: ' + jd.age + '</p>');
                $('#stage').append('<p>Sexo: ' + jd.sex + '</p>');
            })
        })
    });
    </script>
</head>
<body>
    <p>De clic en el boton cargar para leer el archivo /archivos/resultado.json</p>
    <div id="stage" style="background-color:#cc0;">Escenario</div>
    <input type="button" id="driver" value="Cargar datos" />
</body>
</html>


Aqui el metodo de utilidad getJSON() inicia una peticion AJAX al archivo resultado.json especificado. Despues de cargar este archivo, todo el contenido se pasa a la funcion callback que finalmente se rellena en el interior del <div> con el id="stage". Suponiendo que nuestro archivo resultado.json contiene lo siguiente:

{
"name": "arthusu",
"age" : "21",
"sex": "Masculino"
}


Pasar los datos al servidor

Muchas veces se recogen el usuario y contraseña que se pasan al servidor para su posterior procesamiento. Usando jQuery AJAX hace que sea demasiado facil pasar los datos recogidos en el servidor usando el parametro data de cualquier metodo AJAX disponible. Ejemplo: Este ejemplo demuestra como a traves de un input se ingresa el nombre de usuario y es enviado a un script del servidor web que envia el resultado de regreso y es impreso.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#driver").click(function(event){
            var name = $("#name").val();
            $("#stage").load('archivos/resultado.php',{"name":name});
        })
    });
    </script>
</head>
<body>
    <p>Escriba su nombre y de clic en el boton:</p>
    <input type="text" id="name" size="40" /><br />
    <div id="stage" style="background-color:#cc0;">
        Etapa:
    </div>
    <input type="button" id="driver" value="Mostrar Resultado" />
</body>
</html>


Aqui esta el codigo escrito en resultado.php:

<?php
    if($_REQUEST['name']){
        $name = $_REQUEST['name'];
        echo "Bievenido " . $name;
    }
?>


Ahora puede introducir cualquier texto en el campo de entrada dado y luego hacer clic en el boton "Mostrar Resultado" para ver lo que se ha introducido en el campo de entrada.

Metodos jQuery AJAX

Ustedes han visto el concepto basico de AJAX usando jQuery. La siguiente tabla abajo enumera todos los metodos importantes jQuery AJAX que se puede utilizar en funcion de su necesidad de programacion.



+-------------------------------------------+--------------------------------------------------------------------------------------+
| Metodos | Descripcion |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| jQuery.ajax(options) | Carga una pagina remota mediante una peticion HTTP. |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| jQuery.ajaxSetup(options) | Ajusta las peticiones globales de peticiones AJAX. |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| jQuery.get(url,[data],[callback],[type]) | Carga una pagina remota mediante una peticion HTTP GET. |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| jQuery.getJSON(url,[data],[callback]) | Carga datos JSON utilizando una peticion HTTP GET. |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| jQuery.getScript(url,[callback]) | Carga y ejecuta un archivo javascript utilizando una peticion HTTP GET. |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| jQuery.post(url,[data],[callback],[type]) | Carga una pagina remota mediante una solicitud HTTP POST. |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| load(url,[data],[callback]) | Carga el HTML desde un archivo remoto y lo inyecta dentro del DOM. |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| serialize() | Serializa un conjunto de elementos de entrada en una cadena de datos. |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| serializeArray() | Serializa todos los formularios y elementos del forumario como el metodo serialize() |
| | pero devuelve una estructura de datos JSON para que trabaje con ellos. |
+-------------------------------------------+--------------------------------------------------------------------------------------+


Eventos de jQuery AJAX

Puede llamar a varios metodos de jQuery durante el ciclo de vida de progreso de llamada AJAX. Basado en diferentes eventos/etapas, los siguientes metodos estan disponibles:


+------------------------+----------------------------------------------------------------------------------------------------+
| Metodo | Descripcion |
+------------------------+----------------------------------------------------------------------------------------------------+
| ajaxComplete(callback) | Fija una funcion para ejecutarse cada vez que se finalize una peticion AJAX. |
+------------------------+----------------------------------------------------------------------------------------------------+
| ajaxStart(callback) | Fija una funcion para ejecutarse cada vez que inicia una peticion AJAX y no hay ya ninguno activo. |
+------------------------+----------------------------------------------------------------------------------------------------+
| ajaxError(callback) | Fija una funcion a ejecutar cuando falla una peticion AJAX. |
+------------------------+----------------------------------------------------------------------------------------------------+
| ajaxSend(callback) | Fija una funcion para ser ejecutada antes de enviar una peticion AJAX. |
+------------------------+----------------------------------------------------------------------------------------------------+
| ajaxStop(callback) | Fija una funcion que se ejecuta cada vez que han terminado todas las peticiones AJAX. |
+------------------------+----------------------------------------------------------------------------------------------------+
| ajaxSuccess(callback) | Fija una funcion para ejecutarse cada vez que una peticion AJAX finaliza correctamente. |
+------------------------+----------------------------------------------------------------------------------------------------+

Este texto fue sacado desde tutorialspoint solo es una traduccion, espero que les sea de utilidad.

[Parte 10]jQuery

$
0
0
jQuery - Efectos

jQuery ofrece una interfaz simple trivial para hacer diferentes tipos de efectos asombrosos. jQuery nos permite metodos para aplicar efectos rapidamente con la configuracion minima. Este tutorial cubre todos los metodos importantes de jQuery para crear efectos visuales.

Mostrar y ocultar elementos

Los comandos para mostrar y ocultar elementos son bastante lo que se espera. show() para mostrar los elementos en un conjunto envuelto y hide() para ocultarlos.

Sintaxis

Aqui esta la sintaxis para el metodo show():

[selector].show(speed,[callback]);

Aqui la descripcion de todos los parametros:

speed - Una cadena que representa una de las tres velocidades predefinidas ("slow", "normal", o "fast") o el numero de milisegundos para ejecutar la animacion (por ejemplo: 1000).

callback - Este parametro opcional representa una funcion a ejecutarse cuando la animacion se completa, se ejecuta una vez para cada elemento animado.

La siguiente sintaxis es para el metodo hide():

[selector].hide(speed,[callback]);

Aqui la descripcion de todos los parametros:

speed - Una cadena que representa una de las tres velocidades predefinidas ("slow", "normal", o "fast") o el numero de milisegundos para ejecutar la animacion (por ejemplo: 1000).

callback - Este parametro opcional representa una funcion a ejecutarse cuando la animacion se completa, se ejecuta una vez para cada elemento animado.

Ejemplo:

Considere el siguiente archivo HTML como un pequeño codigo jQuery:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#show").click(function(){
            $(".midiv").show(1000);
        });
        $("#hide").click(function(){
            $(".midiv").hide(1000);
        });
    });
    </script>
    <style type="text/css">
        .midiv{
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="midiv">
        Este es un CUADRADO
    </div>
    <input type="button" id="hide" value="Ocultar" />
    <input type="button" id="show" value="Mostrar" />
</body>
</html>



Alternar los elementos

jQuery ofrece metodos para cambiar el estado de la visualizacion de los elementos entre mostradas u ocultas. Si el elemento se muestra al principio, se oculta. Si se oculta, se mostrará.

Sintaxis

Aqui se muestra la sintaxis para el metodo toggle():

[selector].toggle(speed,[callback]);

Aqui la descripcion de todos los parametros:

speed - Una cadena que representa una de las tres velocidades predefinidas ("slow", "normal", o "fast") o el numero de milisegundos para ejecutar la animacion (por ejemplo: 1000).

callback - Este parametro opcional representa una funcion a ejecutarse cuando la animacion se completa, se ejecuta una vez para cada elemento animado.

Ejemplo:

Podemos animar a cualquier elemento como un simple <div> que contiene una imagen.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".clic").click(function(event){
            $(".target").toggle('slow',function(){
                $(".log").text('Transicion completa');
            });
        });
    });
    </script>
    <style type="text/css">
        .clic{
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 100px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="clic">
        Dame clic
    </div>
    <div class="target">
        <img src="imgs/jquery.jpg" alt="jQuery" />
        <div class="log"></div>
    </div>
</body>
</html>



jQuery Metodos para efectos

Han visto el concepto basico de los efectos en jQuery. La siguiente tabla enumera todos los metodos importantes para crear diferentes tipos de efectos:


+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| Metodos | Descripcion |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| animate(params,[duration,easing,callback]) | Una funcion para hacer animaciones. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| fadeIn(speed,[callback]) | Desaparece hacia adentro en todos los elementos que coincidan |
| | ajustando su opacidad y disparar un callback opcional despues de |
| | terminar. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| fadeOut(speed,[callback]) | Desaparece hacia afuera en todos los elementos que coincidan, si su opacidad |
| | es ajustado a 0, display se muestra en "none", dispara una funcion despues de terminar. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| fadeTo(speed,opacity,[callback]) | Le asigna una opacidad especifica a todos los elementos que coincidan y dispara un callback |
| | opcional despues de terminar la transicion. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| hide() | Esconde cada uno de los elementos que coincidan si son mostrados. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| hide(speed,[callback]) | Oculta todos los elementos coincidentes con una elegante animacion y dispara un callback |
| | opcional despues de terminar la transicion. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| show() | Muestra cada uno de los elementos que coincidan si estan ocultos. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| show(speed,[callback]) | Muestra todos los elementos que coincidan con una elegante animacion y dispara un callback |
| | opcional despues de terminar. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| slideDown(speed,[callback]) | Muestra todos los elementos que coincidan ajustandose en altura, dispara un callback opcional |
| | despues de terminar. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| slideToggle(speed,[callback]) | Alterna la visibilidad de todos los elementos que coincidan ajustandose en altura, dispara un |
| | callback opcional despues de terminar. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| slideUp(speed,[callback]) | Oculta todos los elementos que coincidan ajustandose en altura, dispara un callback |
| | opcional despues de terminar. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| stop([clearQueue,gotoEnd]) | Detiene todas las animaciones ejecutandose en los elementos especificados. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| toggle() | Alterna la visibilidad de todos los elementos que coincidan. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| toggle(switch) | Alterna la visibilidad de todos los elementos que coincidan basados en el switch (true - muestra todos |
| | los elementos, false - esconde todos los elementos) |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| jQuery.fx.off | Desabilita globalmente todas las animaciones. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+





Traduccion por arthusu desde TutorialsPoint


[Minitutorial]AJAX

$
0
0
Introduccion a AJAX

AJAX es acerca de la actualizacion de las partes de una pagina web, sin necesidad de recargar toda la pagina. 

¿Que deberia de saber? 

Antes de continuar deberia tener una comprension basica de lo siguiente:

* HTML / XHTL
* CSS
* Javascript / DOM

¿Que es AJAX?

AJAX = Asynchronous Javascript and XML.
AJAX es una tecnica para crear paginas web rapidas y dinamicas. AJAX permite a paginas web actualizarse de forma asincrona intercambiando pequeñas cantidades de datos con el servidor en segundo plano. Esto significa que es posible actualizar partes de una pagina web, sin necesidad de recargar toda la pagina. Paginas web clasicas (que no usan AJAX) deben volver a cargar toda la pagina si el contenido cambia. Algunos ejemplos de aplicaciones usando AJAX: las pestañas de Google Maps, Gmail, Youtube y Facebook.

Como trabaja AJAX


AJAX se basa en estandares de internet

AJAX se basa en estandares de internet y utiliza una combinacion de:

* Objeto XMLHttpRequest (para intercambiar datos asincronicamente con el servidor)
* Javascript/DOM (Para mostrar, interactuar con la informacion)
* CSS (El estilo de los datos)
* XML (A menudo utilizado como el formato de transferencia de datos)

Aplicaciones AJAX son independientes del navegador y plataforma. 

Google sugestor

AJAX se hizo popular en 2005 por Google, con Google sugestor.
Google sugestor es usando AJAX para crear una interfaz web muy dinamica: cuando empiezas a escribir en el buscador de Google, un javascript envia las letras a un servidor y el servidor devuelve una lista de sugerencias.

Empezar a usar AJAX hoy

AJAX se basa en las normas vigentes. Estas normas han sido usadas por los desarrolladores durante varios años. 

Ejemplo de AJAX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>
<script type="text/javascript">
    function loadXMLDoc(){
        var xmlhttp;
        if(window.XMLHttpRequest){
            // codigo para IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }else{
            // codigo para IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                document.getElementById("midiv").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","ajax_info.txt",true);
        xmlhttp.send();
    }

</script>
<body>
    <div id="midiv"><h2>Deja que AJAX cambie este texto</h2></div>
    <button type="button" onclick="loadXMLDoc()">Cambiar el contenido</button>
</body>
</html>


ajax_info.txt:

AJAX no es un nuevo lenguaje de programacion.<br />
AJAX es una tecnica para crear sitios webs rapidos y dinamicos.


Ejemplo de AJAX explicado

La aplicacion AJAX de arriba contiene una seccion div y un button. La seccion div se utilizará para mostrar la informacion devuelta desde un servidor. El boton llama a una funcion llamada loadXMLDoc(), si se hace clic en:

<button type="button" onclick="loadXMLDoc()">Cambiar el contenido</button>

A continuacion, agregamos una etiqueta de <script> a la seccion head de la pagina. La seccion del script contiene la funcion loadXMLDoc():

function loadXMLDoc(){
// el script ajax va aqui
}

AJAX crea un objeto XMLHttpRequest

La piedra angular de AJAX es el objeto XMLHttpRequest

El Objeto XMLHttpRequest

Todos los navegadores modernos apoyan el objeto XMLHttpRequest (IE5 e IE6 utilice ActiveXObject). Se utiliza el objeto XMLHttpRequest para intercambiar datos con el servidor en segundo plano. Esto significa que es posible actualizar partes de una pagina web, sin necesidad de recargar toda la pagina.

Crear un objeto XMLHttpRequest

Todos los navegadores modernos (ie7+, firefox, chrome, safari, opera) tienen un objeto XMLHttpRequest integrado. Sintaxis para crear un objeto XMLHttpRequest:

variable = new XMLHttpRequest();

Versiones antiguas de internet explorer (ie5, ie6) utilizan el objeto Activex:

variable = new ActiveXObject();

Para manejar todos los navegadores modernos incluyendo IE5 y IE6, compruebe que el explorador admite el objeto XMLHttpRequest. Si lo hace crear un objeto XMLHttpRequest, sino crear un objeto ActiveXObject.

if(window.XMLHttpRequest){
            // codigo para IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }else{
            // codigo para IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } 
 


AJAX enviar una solicitud al servidor

Se utiliza el objeto XMLHttpRequest para intercambiar datos con un servidor.

Enviar una solicitud a un servidor

Para enviar una solicitud a un servidor, utilizamos los metodos open() y send() del objeto XMLHttpRequest:

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

+------------------------+-------------------------------------------------------------------------------+
| Metodo | Descripcion |
+------------------------+-------------------------------------------------------------------------------+
| open(method,url,async) | Especifica el tipo de solicitud, la direccion URL, y si la solicitud debe ser |
| | manejada de forma asincrona o no. |
| | * method: el tipo de peticion GET o POST. |
| | * url: la ubicacion del archivo en el servidor. |
| | * async: true (asincrona) o falso (sincrono) |
+------------------------+-------------------------------------------------------------------------------+
| send(string) | Envia la solicitud al servidor. |
| | * string: utilizado para las peticiones por POST. |
+------------------------+-------------------------------------------------------------------------------+ 
 
¿GET o POST?

GET es mas sencillo y rapido que POST, y puede ser utilizado en la mayoria de los casos. Sin embargo, siempre se puede usar POST cuando la peticion:

* Un archivo almacenado en caché no es una opcion (actualizacion de un archivo o base de datos del servidor)
* Enviar una gran cantidad de datos al servidor (POST no tiene limitaciones de tamaño)
* Envio de inputs del usuario (que puede contener caracteres desconocidos), POST es mas robusto y seguro que GET

Peticiones GET

Una simple peticion GET.

Ejemplo:

xmlhttp.open("GET","demo_get.php",true);
xmlhttp.send();


En el ejemplo anterior, usted puede obtener un resultado del cache:

Ejemplo:

xmlhttp.open("GET","demo_get.php?t=" + Math.random(),true);
xmlhttp.send();


Si desea enviar informacion con el metodo GET, agregue la informacion a la URL:

xmlhttp.open("GET","demo_get2.php?nombre=Henry&apellido=Ford",true);
xmlhttp.send();


Peticiones POST

Una simple peticion POST:

xmlhttp.open("POST","demo_post.php",true);
xmlhttp.send();

Para enviar datos como un formulario HTML, agregue un encabezado HTTP con setRequestHeader() y especificar los datos que desea enviar en el metodo send():

xmlhttp.open("POST","demo_post.php",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("nombre=Henry&apellido=Ford");


+----------------------------------+------------------------------------------------+
| Metodo | Descripcion |
+----------------------------------+------------------------------------------------+
| setRequestHeader(cabecera,valor) | Agrega una cabecera HTTP a la peticion. |
| | Cabecera: especifica el nombre de la cabecera. |
| | Valor: especifica el valor de la cabecera |
+----------------------------------+------------------------------------------------+


La URL - un archivo en el servidor


El parametro URL del metodo open(), es una direccion a un archivo en el servidor:


xmlhttp.open("GET","ajax_prueba.php",true);


El archivo puede ser cualquier tipo de archivo como .txt o .xml o scripts de servidor tales como .asp o .php (que pueden realizar acciones en el servidor antes de enviar la respuesta de nuevo hacia atras).

¿Asincronico - verdadero o falso?

AJAX significa asynchronous javascript and xml, y para que el objeto XMLHttpRequest se comporte como AJAX, ha establecido el parametro del metodo open() de async en true:

xmlhttp.open("GET","ajax_prueba.php",true);

Enviar solicitudes asincronicas es una enorme mejora para desarrolladores web. Muchas de las tareas ejecutadas en el servidor son muy lentas. Antes AJAX, podia causar que la aplicacion se colgara y parará. Con AJAX, javascript no tiene que esperar la respuesta del servidor, pero puede en cambio:

* Ejecutar otros scripts esperando respuesta
* Lidiar con la respuesta cuando la respuesta este lista

Async=true

Cuando use async=true, especifica una funcion a ejecutar cuando la respuesta esta en el evento onreadystatechange:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>
<script type="text/javascript">
    function loadXMLDoc(){
        var xmlhttp;
        if(window.XMLHttpRequest){
            // codigo para IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }else{
            // codigo para IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                document.getElementById("midiv").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","ajax_info.txt",true);
        xmlhttp.send();
    }

</script>
<body>
    <div id="midiv"><h2>Deja que AJAX cambie este texto</h2></div>
    <button type="button" onclick="loadXMLDoc()">Cambiar el contenido</button>
</body>
</html>


Async=false


Usar async=false, cambia el tercer parametro del metodo open() en false:


xmlhttp.open("GET","ajax_info.txt",false);


Usar async=false, no es recomendable pero para unas peticiones pequeñas esto puede ser aceptable. Recuerde que javascript no continuará ejecutandose, hasta que el servidor este listo. Si el servidor esta ocupado o lento, la solicitud se parará o colgará.
Nota: cuando usted use async=false, no escriba una funcion onreadystatechange, solo ponga el codigo despues de la declaracion send().


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script type="text/javascript">
        function loadXMLDoc(){
            var xmlhttp;
            if(window.XMLHttpRequest){
                // codigo para IE7+, firefox, chrome, opera, safari
                xmlhttp = new XMLHttpRequest();
            }else{
                // codigo para IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET","ajax_info.txt",false);
            xmlhttp.send();
            document.getElementById("midiv").innerHTML = xmlhttp.responseText;
        }
    </script>
</head>
<body>
    <div id="midiv">
        <h2>Deja que AJAX cambie este texto</h2>
        <button type="button" onclick="loadXMLDoc()">Cambiar el contenido</button>
    </div>
</body>
</html>



AJAX - respuesta del servidor


Para obtener la respuesta de un servidor, utilice la propiedad responseText o responseXML del objeto XMLHttpRequest.


+--------------+------------------------------------------------+
| Propiedad | Descripcion |
+--------------+------------------------------------------------+
| responseText | obtiene los datos de respuesta como una cadena |
+--------------+------------------------------------------------+
| responseXML | obtiene los datos de respuesta como datos XML |
+--------------+------------------------------------------------+


La propiedad responseText


Si la respuesta del servidor no es XML, utilice la propiedad responseText. La propiedad responseText devuelve la respuesta como una cadena, y se puede utilizar por consiguiente:

document.getElementById("midiv").innerHTML=xmlhttp.responseText;

La propiedad responseXML

Si la respuesta del servidor es XML y desea analizar como un objeto XML, utilice la propiedad responseXML:

Ejemplo

Solicitar el archivo cd_catalog.xml y analizar la respuesta:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script type="text/javascript">
        function loadXMLDoc(){
            var xmlhttp;
            var txt, x, i;
            if(window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState==4 && xmlhttp.status==200){
                    xmlDoc = xmlhttp.responseXML;
                    txt="";
                    x=xmlDoc.getElementsByTagName("ARTIST");
                    for(i=0;i<x.length;i++){
                        txt= txt + x[i].childNodes[0].nodeValue + "<br>";
                    }
                    document.getElementById("midiv").innerHTML=txt;
                }
            }
            xmlhttp.open("GET","cd_catalog.xml",true);
            xmlhttp.send();
        }
    </script>
</head>
<body>
    <h2>Mi coleccion de CD's:</h2>
    <div id="midiv"></div>
    <button type="button" onclick="loadXMLDoc()">Obtener mi coleccion de CD's</button>
</body>
</html>


AJAX - el evento onreadystatechange

Cuando se envia una solicitud a un servidor, queremos realizar algunas acciones basados en las respuestas. El evento onreadystatechange se activa cada vez que readyState cambia. La propiedad readyState tiene el status de XMLHttpRequest. Tres importantes propiedades del objeto XMLHttpRequest:



+--------------------+------------------------------------------------------------------------+
| Propiedad | Descripcion |
+--------------------+------------------------------------------------------------------------+
| onreadystatechange | almacena una funcion (o el nombre de la funcion) que se |
| | llama automaticamente cada vez los cambios de la propiedad readyState. |
+--------------------+------------------------------------------------------------------------+
| readyState | Tiene la condicion de XMLHttpRequest. Cambia desde el 0 al 4: |
| | 0: peticion no inicializada |
| | 1: conexion de servidor establecido |
| | 2: solicitud recibida |
| | 3: proceso de solicitud |
| | 4: acabado de peticion y respuesta lista |
+--------------------+------------------------------------------------------------------------+
| status | 200: "OK" |
| | 404: Page not found |
+--------------------+------------------------------------------------------------------------+




Ejemplo:


xmlhttp.onreadystatechange=function{
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("midiv").innerHTML=xmlhttp.responseText;
}
}


Nota: El evento onreadystatechange se dispara cinco veces (0-4), una vez para cada cambio de readyState.


Usando una funcion de devolucion de llamada (callback)


Una funcion callback es una funcion que se pasa como parametro a otra funcion. Si tienes mas de una tarea AJAX en tu web, debe crear una funcion estandar para crear el objeto XMLHttpRequest y llamar a esta para cada tarea de AJAX. La llamada de funcion debe contener la direccion URL y qué hacer en onreadystatechange (que es probablemente diferente para cada llamada):

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script type="text/javascript">
        var xmlhttp;
        function loadXMLDoc(url,cfunc){
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=cfunc;
            xmlhttp.open("GET",url,true);
            xmlhttp.send();
        }

        function myFunction(){
            loadXMLDoc("ajax_info.txt",function(){
                if(xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            });
        }
    </script>
</head>
<body>
    <div id="myDiv"><h2>Dejar que AJAX cambie este texto</h2></div>
    <button type="button" onclick="myFunction()">Cambiar el contenido</button>
</body>
</html>


AJAX y PHP

AJAX es utilizado para crear aplicaciones mas interactivas.

AJAX PHP Ejemplo


El siguiente ejemplo demostrará como una pagina puede comunicarse con un servidor web solo tecleando caracteres en un campo de entrada:

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_suggest_php

Cuando el usuario escribe un caracter en el campo de entrada se ejecuta una funcion llamada "showHint()", la funcion se activa en el evento onkeyup. Aqui esta el codigo HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script type="text/javascript">
        function showHint(str){
            if(str.length==0){
                document.getElementById("txtHint").innerHTML="";
                return;
            }else{
                var xmlhttp=new XMLHttpRequest();
                xmlhttp.onreadystatechange=function(){
                    if(xmlhttp.readyState==4 && xmlhttp.status==200){
                        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET","gethint.php?q="+str,true);
                xmlhttp.send();
            }
        }
    </script>
</head>
<body>
    <p><b>Comienza a teclear un nombre en el campo de entrada de abajo:</b></p>
    <form action="">
        Primer nombre: <input type="text" id="txt1" onkeyup="showHint(this.value)">
    </form>
    <p>Sugerencias: <span id="txtHint"></span></p>
</body>
</html>


Explicacion del codigo:

En primer lugar, comprobamos si el campo de entrada esta vacio (str.length == 0). Si es asi, dejamos en blanco el contenido del marcador txtHint (el span) y salimos de la funcion. Sin embargo, si el campo no esta vacio, hará lo siguiente:

* Crear un objeto XMLHttpRequest
* Crear una funcion a ejecutar cuando la respuesta del servidor esta lista
* Enviar la solicitud a un archivo PHP (gethint.php) en el servidor
* Observe que el parametro q es agregado gethint.php?q="+str
* La variable str tiene el contenido del campo de entrada

El archivo gethint.php

El archivo PHP comprueba una serie de nombres y devuelve el nombre correspondiente al navegador:

<?php
    // array con nombres
    $a[] = "Anna";
    $a[] = "Brittany";
    $a[] = "Cinderella";
    $a[] = "Diana";
    $a[] = "Eva";
    $a[] = "Fiona";
    $a[] = "Gunda";
    $a[] = "Hege";
    $a[] = "Inga";
    $a[] = "Johanna";
    $a[] = "Kitty";
    $a[] = "Linda";
    $a[] = "Nina";
    $a[] = "Ophelia";
    $a[] = "Petunia";
    $a[] = "Amanda";
    $a[] = "Raquel";
    $a[] = "Cindy";
    $a[] = "Doris";
    $a[] = "Eve";
    $a[] = "Evita";
    $a[] = "Sunniva";
    $a[] = "Tove";
    $a[] = "Unni";
    $a[] = "Violet";
    $a[] = "Liza";
    $a[] = "Elizabeth";
    $a[] = "Ellen";
    $a[] = "Wenche";
    $a[] = "Vicky";

    // obtenemos el parametro q de la url
    $q = $_GET['q'];
    $hint='';

    // buscamos todas las sugerencias en el array si $q es diferente de ""
    if($q !== ''){
        $q = strtolower($q);
        $len = strlen($q);
        foreach($a as $name){
            if(stristr($q,substr($name, 0, $len))){
                if($hint === ''){
                    $hint = $name;
                }else{
                    $hint .= ", $name";
                }
            }
        }
    }

    // Mostramos "no hay sugerencias" si no se encontro ningun hint o una salida con valores correctos
    echo $hint === '' ? 'No hay sugerencias' : $hint;
?>


 
Hasta aqui este minitutorial de AJAX, el cual fue una traduccion de W3schools






Box-sizing: el secreto para diseños simples

$
0
0
Box-sizing es una propiedad CSS que hace que los diseños CSS trabajen intuitivamente. Si usted ha estado trabajando con CSS por cualquier periodo de tiempo, sabes que puede ser confuso utilizar caracteristicas como width, padding y border. Aveces cuando se utiliza la propiedad width, no siempre aplica de la manera en la que usted podria esperar, sin embargo con la propiedad box-sizing, un ancho de 200px realmente significa un ancho de 200px renderizado. Que no implica ninguna magia de Javascript, y funciona incluso a traves de navegadores en IE8. Profundicemos.

El modelo de caja

La anchura (width) y altura (height) de cualquier elemento de una pagina web se rige por el modelo de caja CSS. Los matices del modelo de caja pueden ser algo complejos, pero la parte mas importante de entender es como se calculan la altura y anchura prestadas. Una combinacion de varias propiedades CSS forma la anchura (width) real representada y la altura de la pagina.

padding + border + width = anchura real procesada
padding + border + height = altura real procesada

Eso es un poco confuso, asi que aqui hay una ilustracion que les puede ayudar.

Sin box-sizing, la propiedad width representa el area de contenido del elemento. El tamaño real prestado representa el width, padding y border.

Esto significa que si establece un ancho de algo parecido a 200px o un ancho relativo del 25% el elemento solo sera de ese tamaño exacto si no tiene padding o border. Si tiene padding o border (o ambos), el tamaño real prestado sera mayor. Dicho de otro modo, la propiedad width significa simplemente la anchura del area de contenido y no la anchura total del elemento.

Como resultado, calcular un ancho (width) deseado en la pagina implica restar el padding y border de la propiedad width. Por ejemplo, si establece un width de 200px y luego desea 20px de padding a cada lado, tienes que pedir prestado 40px (20px y 20px para derecha e izquierda) del width. Lo mismo es valido para la propiedad border. Esto hace el codigo mucho menos legible, por que el elemento procesado aun es de 200px, podria tener codigo que se lee como esto:

.sidebar{
    width: 158px;
    padding: 20px;
    border:1px solid #DDD;
}


No es muy intuitivo par la propiedad width a decir 158px si el ancho real prestado es 200px. Afortunadamente, hay un mejor metodo que logra el mismo resultado.

* {box-sizing: border-box;}

En lugar de calcular el ancho (width) incluyendo el padding y border, la propiedad box-sizing en combinacion con el valor border-box utiliza la propiedad width como el ancho real prestado. El codigo anterior podria modificarse para ver algo como esto:

.sidebar{
    box-sizing:border-box;
    width: 200px;
    padding:20px;
    border:1px solid #DDD;
}


Cualquier padding o border que se aplique no se agregará a la anchura procesada. Por el contrario, se restaran automaticamente desde el espacio de contenido (content). Esto resulta en un codigo mucha mas legible. Aqui esta una imagen que ayuda a ilustrar como box-sizing:border-box calcula el ancho.


Con box-sizing habilitado, la propiedad width es la real representada del ancho del elemento. El area del contenido es automaticamente establecido con el tamaño del ancho restante, despues de haber restado el padding y el border.

De hecho, muchos reputados diseñadores y desarrolladores web han defendido utilizando box-sizing:border-box; a traves de todos los elementos de la pagina para un enfoque mas natural e intuitivo de diseño, Paul Irish recomienda usar el siguiente codigo:

*, *:before, *:after{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}


La propiedad box-sizing no es nada nuevo, pero solo en los ultimos años a sido una tecnica viable gracias al apoyo del navegador internet explorer (y version anterior de ie fuera de uso). Este codigo funciona en ie8, que es bastante perdonador considerando que la version ie11 es la version mas reciente. Para obtener mas informacion sobre compatibilidad de tu navegador, compruebe las tablas de soporte de caniuse.com para border-box.

Recursos box-sizing

Como si box-sizing no fuese lo suficientemente grande, podria estar encantado de encontrar que ya esta dentro de front-end frameworks como bootstrap. Por defecto estos frameworks aplican convenientemente box-sizing a todo, esto hace mas facil de entender sus sistemas de grillas (grid systems).

Traducido por arthusu desde treehouse blog


 
Viewing all 135 articles
Browse latest View live