Blog dedicado a la enseñanza gratuita, utilizando JavaScript, CSS, HTML, PHP, MySQL, UML, Patrones de Diseño.

03.- Curso de Git. Comandos Git (II)

03.- Curso de Git. Comandos Git (II): "









Videotutorial Nº 3 del Curso de Git y Github en el que seguimos viendo los comandos fundamentales.




VideoTutorial Nº 3 del Curso de Git. Seguimos viendo los Comandos Fundamentales. Uso del Comando git diff; Uso del argumento --staged; Uso de los argumentos -v y -m con git commit. Sáltarse el stage con el argumento -a de git commit; Eliminar archivos con gir rm; uso del argumento --cached; Mover archivos con el comando git mv. 35 minutos.









Descargar archivos prácticas



"

Google+ vs. Facebook [infographic]

Seguridad en sitios web para webmasters

Seguridad en sitios web para webmasters: "
A los usuarios se les enseña a protegerse de programas maliciosos mediante la instalación de programas antivirus sofisticados pero, a veces, también confían sus datos personales a sitios web como el tuyo, en cuyo caso es importante proteger sus datos. Proteger tus propios datos también es importante. Si tienes una tienda online, no querrás que te roben.



A lo largo de los años, las empresas y los webmasters han aprendido (a menudo por las malas) que la seguridad de las aplicaciones web no es ninguna broma. Hemos visto fugas de contraseñas debidas a ataques de Inyección SQL, robo de cookies con XSS y sitios web vulnerados por hackers debido a negligencias en la validación de los datos de entrada.



Hoy os mostraremos algunos ejemplos de cómo se puede atacar una aplicación web, para que puedas aprender de ello. Con este fin, usaremos Gruyere, una aplicación intencionadamente vulnerable que también usamos internamente para formación sobre seguridad. No pruebes la vulnerabilidad de los sitios web de otras personas sin su permiso, puesto que podría considerarse un ataque (hacking), pero te damos la bienvenida (e incluso te animamos) a hacer pruebas en Gruyere.



Manipulación del estado del cliente (Client State): ¿qué sucede si altero la URL?



Imaginemos que tienes un sitio de alojamiento de imágenes y que usas una secuencia de comandos en PHP para mostrar las imágenes subidas por los usuarios.



http://www.example.com/showimage.php?imgloc=/garyillyes/kitten.jpg



Pues bien, ¿qué sucederá si cambio la URL por algo así y userpasswords.txt es un archivo de verdad?



http://www.example.com/showimage.php?imgloc=/../../userpasswords.txt



¿Obtendré el contenido de userpasswords.txt?



Otro ejemplo de manipulación de estado del cliente se produce cuando no se validan los campos de los formularios. Por ejemplo, imaginemos que tienes este formulario:







Parece que el nombre de usuario del remitente se almacena en un campo oculto. Bueno, ¡esto es genial! ¿Significa que si cambio el valor de ese campo por el de otro nombre de usuario puedo enviar el formulario como si fuese ese otro usuario? Bien podría suceder. Aparentemente, los datos introducidos por el usuario no se autentican con, por ejemplo, ningún token que se pueda verificar en el servidor.

Imagina la situación si ese formulario formase parte de un carrito de la compra y modificásemos el precio de un artículo de 1000 USD por 1 USD para, después, enviar el pedido.



Proteger tu aplicación frente a este tipo de ataques no es fácil. Echa un vistazo a la tercera parte de Gruyere [inglés] para ver algunos consejos sobre cómo defender tu aplicación.



Cross-site scripting (XSS): los datos introducidos por el usuario no son de fiar





Una URL simple e inofensiva:

http://google-gruyere.appspot.com/611788451095/%3Cscript%3Ealert('0wn3d')%3C/script%3E

¿Es realmente inofensiva? Si descodificamos los caracteres codificados con el signo de porcentaje, obtenemos:



<script>alert('0wn3d')</script>


Al igual que muchos sitios web con páginas de error personalizadas, Gruyere está diseñada para incluir el componente de la ruta dentro de la página HTML. Esto puede generar problemas de seguridad, como XSS, puesto que introduce el código introducido por el usuario tal como está en la página HTML de la aplicación web. Podríamos pensar, 'bueno, es solo un cuadro de advertencia, ¿y qué?'. El problema es que si puedes inyectar un cuadro de advertencia, puedes, con toda probabilidad, inyectar otra cosa, también, y tal vez aprovechar para robarte las cookies y usarlas para acceder a tu sitio como si fueses tú.



Otro ejemplo es cuando no se limpian las entradas del usuario. Imaginemos que escribo un comentario en tu blog. Se trata de un comentario muy simple:



<a href=”javascript:alert(‘0wn3d’)”>Click here tos see a kitten</a>


Si otros usuarios hacen clic en mi inocente enlace, tendré sus cookies:







Puedes ver cómo resolver las vulnerabilidades por XSS en tu propia aplicación web e intentar resolverlas en la segunda parte de Gruyere [inglés] o, si eres un desarrollador avanzado, mirar las características sobre escapado automático en sistemas con plantillas de la que hablamos en nuestro blog sobre seguridad online [inglés].



Falsificación de petición en sitios cruzados (XSRF): ¿debería aceptar las solicitudes procedentes de diablos.com?



Oh, vaya, una imagen rota. No puede ser peligrosa: está rota, al fin y al cabo, lo cual significa que la URL de la imagen devuelve un código 404 o tiene un formato incorrecto. ¿Pero es siempre así?



¡No! La fuente de una imagen se puede especificar con cualquier URL, sea cual sea su tipo de contenido. Puede ser una página HTML, un archivo JavaScript, u otro recurso potencialmente malicioso. En este caso, la fuente es la URL de una simple página:







Esta página sólo funcionará si tengo una sesión iniciada y algunas cookies asignadas. Puesto que realmente tenía una sesión iniciada en la aplicación, cuando el navegador ha intentado recuperar la imagen accediendo a la URL de fuente, también ha eliminado mi primer fragmento. Esto no suena particularmente peligroso, pero si conozco un poco la aplicación también podría invocar una URL que elimine el perfil de un usuario o permita a un administrador otorgar permisos a otros usuarios.



Para proteger tu aplicación de XSRF no deberías permitir nunca que las acciones de cambio se soliciten vía GET. El método POST se inventó para este tipo de peticiones de cambio de estado. Este cambio por si solo podría mitigar el ataque anterior, pero por lo general no basta y es necesario añadir algún valor impredecible a todas las solicitudes que supongan un cambio de estado para prevenir las acciones de XSRF. Si quieres más información sobre XSRF puedes ir directamente a Gruyere [inglés].



Inclusión de Cross-site script (XSSI): todas tus secuencias de comandos nos pertenecen



En muchos sitios es posible actualizar dinámicamente el contenido de una página mediante peticiones de JavaScript asincrónicas que devuelven datos JSON. A veces JSON puede contener datos sensibles que, si no se toman las precauciones debidas, un hacker podría robar.



Imaginemos la situación siguiente: hemos creado una páginas HTML estándar y te enviamos el enlace. Puesto que confías en nosotros, visitas el enlace que te hemos enviado. La página contiene tan solo unas cuantas líneas:



<script>function _feed(s) {alert("Your private snippet is: " + s['private_snippet']);}</script>


Puesto que has iniciado sesión en Gruyere y dispones de un fragmento privado, verás un cuadro de alerta en mi página que te informa sobre el contenido de tu fragmento. Como siempre, si nos las hemos arreglado para abrir un cuadro de alerta, podremos hacer lo que queramos. En este caso se trata de un simple fragmento, pero también podría haber sido tu mayor secreto.



Defender a una aplicación frente a XSSI no es demasiado difícil, pero exige pensar con cuidado. Puedes usar tokens, tal como se explica en la sección sobre XSRF, hacer que tu secuencia de comandos solo responda a peticiones POST o simplemente iniciar la respuesta JSON por '\n' para asegurarte de que la respuesta no es ejecutable.



Inyección de SQL: ¿todavía crees que lo que introducen los usuarios es seguro?



Qué sucedería si intento acceder a tu aplicación con un nombre de usuario como



MarioMartinez' ; DROP TABLE members;--


Aunque este ejemplo en particular no dejaría expuestos los datos de los usuarios, podría provocar grandes quebraderos de cabeza porque tiene la capacidad de eliminar por completo la tabla de SQL en la cual tu aplicación almacena los datos de los miembros registrados.



Por lo general, puedes proteger a tu sitio web de la inyección de código SQL pensando proactivamente sobre la introducción de datos de los usuarios En primer lugar: ¿estás seguro de que tu usuario de SQL necesita disponer de permiso para ejecutar 'DROP TABLE members'? ¿No bastaría con concederle derechos de SELECT? Asignando los permisos de los usuarios cuidadosamente puedes evitar experiencias dolorosas y un montón de problemas. También puede ser útil configurar los informes de error de tal modo que no queden expuestos los nombres de las bases de datos ni de las tablas en caso de que una consulta falle.



En segundo lugar, tal como hemos aprendido en el caso XSS, los datos introducidos por el usuario no son nunca de fiar. Lo que para ti parece un formulario de inicio de sesión, es una posible puerta de acceso para un atacante. Limpia y verifica siempre la estructura de la información de entrada que se vaya a almacenar en una base de datos y, siempre que sea posible, usa instrucciones del tipo de consultas preparadas o parametrizadas, disponibles en la mayoría de las interfaces de programación de bases de datos.



Sabiendo cómo es posible atacar una aplicación web es el primer paso para entender cómo protegerla. Por este motivo, te animamos a que sigas el curso de Gruyere [inglés], aproveches otros cursos sobre seguridad web disponibles en la Google Code University [inglés]. También puedes probar Skipfish [inglés], una herramienta de prueba automática de la seguridad. Si tienes alguna pregunta más, no dudes en enviarla a nuestro Foro de ayuda para webmasters.



Publicado por Gary Illyes, Analista de tendencias para webmasters
"

Información sobre compatibilidad con HTML5 + CSS3 [actualizada]

Información sobre compatibilidad con HTML5 + CSS3 [actualizada]: "
Uno de los grandes problemas a la hora de implementar tanto HTML5 como CSS3 es el relacionado con la compatibilidad con los distintos navegadores, en general los navegadores modernos no tienen inconvenientes en interpretar los nuevos estándares, no obstante ¿que ocurre con aquellos navegadores más antiguos?

Para ayudarnos a decidir que propiedades utilizar y cuales no podemos utilizar el sitio When can I Use, que nos brinda de forma muy simple y rápida las distintas compatibilidades de cada propiedad con las versiones de navegadores más utilizados. De esta herramienta ya había comentado algo hace un tiempo, pero ahora se encuentra completamente actualizada con opciones de lo más interesantes.

La forma de utilizar esta aplicación online y gratuita es de lo más sencilla, basta con seleccionar los navegadores que deseamos analizar y buscar las propiedades que vamos a utilizar, en las tablas que brinda el sitio podremos ver si dicha característica es reconocida y es compatible con el navegador seleccionado anteriormente.

Ejemplo de uso:

compatibilidad css3 html5

Los valores de cada propiedad varían según el navegador, los resultados posibles son: soportada, no soportada, parcialmente soportada y soporte desconocido.

When can I Use contempla algo que otras tablas de compatibilidad y es lo relacionado a navegadores para dispositivos móviles, por ejemplo tenemos iOS Safari, Opera Mini, Opera Mobile y como no podría faltar Android Browser.

Si lo que deseamos es una respuesta rapida cada propiedad tiene un promedio que nos indica a nivel general que tan compatible es con respecto a todos los navegadores disponibles, eso se indica de la misma forma que cada propiedad de forma individual. Por ejemplo si deseamos utilizar CSS min/max-width/height veremos que el porcentaje es alto, un 91.13%, es decir, es compatible con casi todos los navegadores.

Un sitio que va directamente a mis marcadores :D

Web: When can I Use

"

jQAPI, documentación alternativa de jQuery

jQAPI, documentación alternativa de jQuery: "
Uno de los aspectos más importantes que debe contemplar cualquier framework, independientemente del lenguaje que utilice, es el referido a la documentación del mismo, jQuery hace un muy buen trabajo en cuanto a documentar en detalle cada una de las funciones y opciones disponibles. No obstante buscar en la documentación oficial de jQuery puede volverse un poco tedioso, para agilizar este proceso existe una alternativa llamada jQAPI.

jQAPI es un sitio que contiene toda la documentación alternativa disponible online pero que organiza la información de una manera mucho más accesible, y rápida. A diferencia de la documentación oficial de jQuery, uno cuando por ejemplo busca una función en  jQAPI el sitio nos va a devolver solamente un resultado con la información, en lugar de muchas paginas como hace la documentación oficial.

documentación jquery

Otro detalle genial es que podemos descargar toda la documentación con un solo click, tanto en versión HTML como en AIR, lista para consultarla en cualquier momento y desde la comodidad de nuestro disco en local.

Esta documentación jQuery puede ser navegada con el uso de las teclas de direcciones, un método simple pero efectivo de recorrer rápidamente las distintas secciones.

En lo personal voy a utilizar mucho más esta documentación que la oficial, uno agiliza muchísimo el proceso de buscar información, y ademas tener una versión instalada de forma local es una gran ayuda para la consulta rápida.

Web: jQAPI

"

Curso Moodle 1.9

Curso Moodle 1.9: "









En esta segunda entrega presentare dos vídeos en los que se muestra como abrir y cerrar moodle después de haberlo instalado en forma local, el segundo vídeo trata sobre la creación de usuarios.







"

CSS3 compatible con todos los navegadores en segundos

CSS3 compatible con todos los navegadores en segundos: "
Prefixr es una nueva herramienta online, creada por la gente de Tutsplus, que se encarga de compatibilizar automáticamente nuestras hojas de estilo con todos los navegadores, haciendo mucho hincapié en las nuevas propiedades CSS3.

Una de las principales ventajas de utilizar esta herramienta es que nos ayuda a ahorrar mucho tiempo a la hora de escribir propiedades compatibles con los distintos navegadores, delegando completamente este trabajo a la aplicación.

Ejemplo de uso:



Si no vieron el video les resumo que Prefixr cuenta con una potente API, muy interesante para los usuarios del famoso editor Textmate con el que podemos automatizar el proceso directamente desde la mismísima edición de las hojas de estilo.

Les recomiendo probar y analizar sobre todo como incorporar la API a sus editores de código, seguramente esta herramienta va a dar mucho que hablar en un futuro. El tiempo que obtenemos a cambio de configurar esta aplicación es impresionante, y nos ayuda a no olvidar ningún navegador en el arduo proceso de lograr compatibilidad con nuestras propiedades CSS.

Web: Prefixr

"

Para qué sirve reCaptcha

Para qué sirve reCaptcha: "
reCaptcha (y quizás otros sistemas de captcha) sirven más que para su cometido.

Y es que el cometido obvio, por así decirlo, de los sistemas de captcha es el de generar un desafío (challenge en inglés) para que ante un formulario el sistema web pueda asegurarse de que el que realizó la acción fue un ser humano y no un script o bot programado. Es entendible entonces como los sistemas de captcha evolucionan y van poniendo las letras cada vez mas complejas, tachadas o incompletas, ya que hecha la ley, hecha la trampa, y muchos hackers programan sistemas OCR para que rellenen automáticamente estos desafíos y completen automáticamente cualquier formulario o lo que sea.

Pero, al menos en reCaptcha, también hay otro objetivo (que no conocía… gracias a Pablo que me lo explicó) y es genial como lo implementan.

Este sistema, comprado por Google hace unos años, utiliza la “inteligencia colectiva” para que los humanos que rellenan formularios (o sea, nosotros) ayudemos a digitalizar textos. Los que han usado esto sabrán que cuando nos enfrentamos a un reCaptcha vemos 2 palabas: Una es la de control y la otra es el desafío (para el sistema). La de control el sistema la conoce, y la otra es la que el sistema está ingresando… ¿Pero a qué y para qué?

reCaptcha




El tema es así, supongamos que somos Google y queremos digitalizar ediciones muy viejas de el New York Times. Primero le pagamos a gente para que ponga las hojas en un scanner (o sean escaneados por sistemas automáticos, da igual). La cuestión es que por más bueno que sea el software OCR, los diarios antiguos, por la mala calidad de impresión sumado al tiempo, tienen palabras irreconocibles…

reCaptcha El software OCR toma las palabras irreconocibles, las remarca, y se las manda a la API de reCaptcha para que los humanos que llenan formularios escriban “lo que les parece que dice”.

reCaptcha

Obviamente si el sistema pone mil veces la siguiente palabra…

reCaptcha

Mediante el algoritmo va a ir tomando los ingresos de los humanos que llenan formularios y determinará que esa palabra es DOUGLAS, (con coma) y a partir de que miles y miles escriban lo mismo, dará la palabra por sentado y además lo tendrá ingresado en la API como un desafío confiable.

Una vez que el sistema envía y recibe el feedback oculto de la comunidad (todo esto sin que casi nadie se entere que trabaja digitalizando texto) puede entregar el texto digitalizado con un 99,5% de efectividad ¿Groso? Miren el resultado final.

reCaptcha
Ahora, ¿qué pasa si tenemos la “suerte” de que somos el primero o el segundo en recibir una nueva palabra? En ese caso es probable que si escribimos cualquier cosa el sistema nos deje pasar de todos modos, ya que la base de datos de esa palabra no existe.


El sistema no “valida” la palabra nueva como challenge, solamente lo hace con la de control, así que la primera (a veces varía el orden) es como desafío y la segunda es para “digitalizar”.

Si están con ganas de más les recomiendo este PDF (en inglés)

"

Twitter Delicious Facebook Digg Stumbleupon Favorites More