You are here

Agregador de canales

Una caricatura sobre el DNS a través de HTTPS

Noticias de Mozilla Hispano - Sáb, 22/09/2018 - 17:24

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por Emmanuel Sanchez.

Las amenazas a la privacidad y seguridad de los usuarios está creciendo. En Mozilla hemos seguido de cerca estas amenazas. Creemos que tenemos la obligación de hacer todo lo que podamos para proteger a los usuarios de Firefox así como sus datos.

Nos enfrentamos a las compañías y organizaciones que en secreto recolectan y venden información de los usuarios. Esa es la razón por la que hemos agregado la protección contra rastreo y lanzamos la extensión Facebook Container. En los próximos meses nos verás haciendo más cosas en favor de la protección de nuestros usuarios.

Dos nuevas protecciones que estamos agregando son:

  1. DNS a través de HTTPS, un nuevo estandar del IETF que hemos promovido
  2. “Resolutivo Recursivo de Confianza”, una nueva forma de resolver DNS para el cual nos hemos asociado con Cloudflare

Con estas dos iniciativas, estamos quitando algunos de los posibles riesgos para tus datos que han sido parte del sistema de nombres de dominio (DNS) desde que fue creado hace 35 años. Por lo mismo nos gustaría que nos ayudes a probar estas iniciativas. Veamos la forma en la que el DNS sobre HTTPS y el Resolutivo Recursivo de Confianza protegen a nuestros usuarios.

Pero primero veamos la forma en la que las páginas se mueven a través de Internet.

Un breve curso sobre HTTP

Cuando se trata de explicar la forma en la que un navegador descarga una página, generalmente se hace así:

  1. Tu navegador realiza una solicitud GET al servidor
  2. El servidor responde con un archivo HTML

Este sistema es llamado HTTP.

Pero el diagrama está demasiado simplificado. El navegador no se comunica con el servidor directamente. Esto debido a que probablemente no se encuentra cerca uno del otro.

El servidor podría estar a miles de kilómetros de distancia. Y probablemente no exista una conexión directa entre tu computadora y el servidor.

Entonces la solicitud entre el servidor y el navegador va a pasar a través de múltiples manos antes llegar. Lo mismo ocurrirá cuando el servidor responda.

Me gusta pensar en que es parecido a la forma en la que los niños se pasan notas entre sí durante una clase. Escrito en la parte de afuera, la nota indica la persona a la que se debe dirigir. El niño que escribió la nota se la pasara a su vecino. Después los niños lo van a pasar a sus “vecinos”, que probablemente no son el destinatario, pero es alguien que se encuentra más cerca a él.

El problema de esto es que cualquiera a través del recorrido puede abrir la nota y leerla. Además no hay forma de saber de antemano el camino que la nota va a recorrer, ni las personas que tendrán acceso a ella.

Puede terminar en manos de personas que realicen acciones peligrosas…

Como compartir el contenido de la nota con todos.

O cambiar la respuesta.

Para evitar estas situaciones, se ha creado una nueva versión de HTTP. Ésta es llamada HTTPS. Con HTTPS, es como si cada mensaje tuviera un candado.

Tanto el navegador como el servidor conocen la combinación para abrir el candado, pero no los que se encuentran en medio del camino.

Con esto aunque los mensajes pasen a través de varias manos, solo tu y el sitio web (el servidor), serán capaces de leer el contenido de los mensajes.

Esto resuelve muchos agujeros de seguridad. Pero algunos de los mensajes entre tu navegador y el servidor no son cifrados. Esto significa que personas que se encuentren en medio pueden seguir viendo parte de lo que estás haciendo.

Un momento en el cual los datos siguen están expuestos es cuando se está realizando la conexión con el servidor. Cuando envías un mensaje inicial al servidor, envías el nombre del servidor también (en un campo llamado “Indicador del Nombre del Servidor”). Esto le permite a los administradores de servidores utilizar la misma computadora (el mismo servidor) para múltiples sitios, y conocer con cuál de ellos deseas hablar. Esta solicitud inicial es parte del proceso para establecer el cifrado, pero la solicitud en sí no está cifrada.

El otro lugar donde los datos son expuestos es en el DNS. Pero, ¿qué es el DNS?

DNS: el Sistema de Nombres de Dominio

En la metáfora anterior, mencioné que el nombre del receptor debía de estar en la parte de afuera de la nota. Esto también ocurre en peticiones HTTP; se necesita decir quién va a recibir el mensaje.

Pero no puedes usar un nombre. Ningún enrutador (router) sabe dónde se encuentra el sitio web con el que deseas hablar. Entonces, en vez de eso utilizamos una dirección IP. De esta forma los enrutadores conocen el servidor con el que te deseas comunicar.

Esto genera un problema. No vas a querer que los usuarios tengan que recordar la dirección IP de tu sitio. En vez de eso, quieres darle a tu sitio un nombre que puedan recordar.

Esa es la razón por la cual tenemos un sistema de nombre de dominio (DNS). Tu navegador utiliza DNS para convertir el nombre de dominio en una dirección IP. El proceso de convertir un nombre de dominio a una dirección IP se denomina “resolución de nombre de dominio”.

¿Cómo sabe el navegador hacer esto?

Una opción sería tener una gran lista en el navegador, parecido a un directorio telefónico. Pero debido a que continuamente llegan nuevos sitios, o se mueven a otros servidores, sería muy difícil tener una lista adecuadamente actualizada.

En vez de tener una gran lista que registre todos los dominios, existen muchas pequeñas relacionadas entre sí. Esto permite que sean manejadas independientemente.

Para obtener la dirección IP que corresponde al nombre del dominio, se debe de buscar la lista que contiene ese nombre de dominio. Hacer esto es un poco como la búsqueda de un tesoro.

¿Como se vería la búsqueda de la versión en inglés de Wikipedia (en.wikipedia.org)?

Podemos dividir el dominio en partes: subdominio, dominio de segundo nivel y dominio de primer nivel.

Con estas partes tenemos lo necesario para encontrar la lista que contiene la dirección IP del sitio. Pero para esto debemos de solicitar ayuda. La herramienta que nos ayudará a convertir el nombre de dominio en una dirección IP se llama “resolutivo” (resolver).

Primero, el resolutivo se comunica con un Root DNS (algo así como un servidor DNS principal). Él conoce unos pocos servidores Root DNS, así que envía mensaje a uno de ellos y le pregunta el lugar donde podrá obtener más información sobre el dominio de primer nivel .org.

El servidor Root DNS le dará la dirección de un servidor que conoce las direcciones .org.

El siguiente servidor se llama servidor de nombres de dominio de nivel superior (top-level domain, TLD). El servidor TLD conoce todos los nombre del dominio que terminan en .org.

Sin embargo, no sabe nada sobre los subdominios de wikipedia.org, por tanto no conoce la dirección IP para en.wikipedia.org.

El servidor TLD le dirá al resolutivo que pregunte al servidor de nombres de dominio de Wikipedia.

El resolutivo casi ha terminado de realizar su trabajo. El servidor de Wikipedia es llamado “servidor autoritario”. Él conoce todo sobre los subdominios de wikipedia.org, incluyendo en.wikipedia.org, o la versión alemana de.wikipedia.org. El servidor autoritario le dice al resolutivo la dirección IP que contiene los archivos HTML del sitio (en este caso en.wikipedia.org).

El resolutivo devolverá al sistema operativo la dirección IP de en.wikipedia.org.

Este proceso es llamado resolución recursiva, debido a que va a diferentes servidores a realizarles básicamente la misma pregunta.

Anteriormente dijimos que el resolutivo nos ayudaría. Pero, ¿cómo hace el navegador para encontrarlo? En general le pide al sistema operativo que le provea con un resolutivo que le pueda ayudar.

¿Cómo conoce el sistema operativo el resolutivo que debe utilizar? Existen dos posibles caminos.

Tu puedes configurar un resolutivo en el cual confías. Pero pocas personas hacen esto.

En vez de eso, la mayoría de la gente utiliza el que se encuentra por defecto. Y el que se encuentra por defecto, es cualquiera que la red le haya dicho al sistema operativo que se conectara. Cuando una computadora se conecta a la red y obtiene su dirección IP, la red le recomienda un resolutivo a utilizar.

Esto significa que el resolutivo que estés utilizando puede cambiar a lo largo del día. Si vas a una cafetería por la tarde, es probable que estés utilizando un resolutivo diferente al que estabas utilizando en la mañana. Y esto puede ocurrir aunque hayas configurado tu propio resolutivo, dado que no existe seguridad en el protocolo DNS.

¿Cómo se puede vulnerar el protocolo DNS?

¿Cómo puede hacer esto vulnerables a los usuarios?

Usualmente un resolutivo le dirá al servidor DNS el dominio que está buscando. En esta solicitud en ocasiones se incluye su dirección IP completa. E inclusive si no se entrega a dirección IP completa, comúnmente se entrega la mayor parte de la dirección IP, la cual puede combinarse con otros datos para saber el origen (el usuario que está realizando la solicitud).

Esto significa que cada servidor al que le solicites ayuda,va a poder visualizar el sitio que estás buscando. Esto significa también que cualquiera en el camino a través de esos servidores podrán ver tu solicitud.

Los dos más grandes riesgos para los usuarios son el rastreo y la suplantación de identidad.

Rastreo

Como acabamos de ver, es relativamente fácil tomar de forma parcial o completa tu dirección IP y saber el sitio que estás buscando. Tanto el servidor DNS como cualquier otro servidor que esté entre tú y ese servidor pueden hacer un perfil tuyo y registrar los sitios que has estado visitando.

Los datos tienen un valor. Muchas personas y empresas pagarán mucho dinero para saber los sitios por los cuales has estado navegando.

Aún si confías en los servidores DNS y los enrutadores que por defecto se encuentran en medio, tu información aún así puede ser recabada y vendida. Esto debido a que el mismo resolutivo que te dio tu red podría no ser de confianza.

E inclusive si confías en el resolutivo que utilizas, lo más probable es que solo lo utilices en tu casa. Como se mencionó anteriormente, cada vez que vas a la cafetería o a un hotel o cualquier otra red es probable que estés utilizando otro resolutivo. Y, ¿acaso sabes cuáles son sus políticas de recolección de datos?

Más allá de que los datos sean recolectados y vendidos sin tu conocimiento o consentimiento explícito, existen otras maneras en que tu información puede estar en peligro.

Suplantación de identidad

Con la suplantación de identidad, alguien en el camino al servidor DNS cambia la respuesta del servidor DNS. En vez de decirte la dirección IP real, te dará una dirección IP diferente. De esta forma, se puede bloquear tu acceso a cierto sitio, o enviarte a una versión falsa del mismo.

De nuevo, este es un caso en el cual el resolutivo puede actuar maliciosamente.

Por ejemplo, imaginemos que tu estas comprando algo en Megatienda. Deseas revisar si el producto que estás planeando comprar se encuentra más barato en la tienda en línea otratienda.com.

Pero estás conectado a la red inalámbrica de Megatienda, y por tanto utilizando el resolutivo que ellos te indican. El resolutivo podría alterar la respuesta para decir que otratienda.com no está disponible.

¿Cómo lo podemos arreglar?

En Mozilla creemos que tenemos la responsabilidad de proteger a nuestros usuarios y sus datos. Por ello hemos estado trabajando en arreglar estas vulnerabilidades.

Hemos desarrollando dos nuevas características para arreglar esto –  Resolutivo Recursivo de Confianza (Trusted Recursive Resolver, TRR) y DNS sobre HTTPS (DNS over HTTPS, DoH). Realmente existen tres amenazas aquí:

  1. Puedes llegar a utilizar un “resolutivo” que rastree tus solicitudes, o modifique las respuestas de los servidores DNS.
  2. Los enrutadores que se encuentra en medio de tu y el servidor DNS pueden hacer lo mismo.
  3. Los servidores DNS pueden rastrear tus solicitudes de DNS.

Entonces, ¿cómo se puede solucionar esto?:

  1. Evitar los resolutivos en los que no confiamos, con TRR.
  2. Protegerse en contra del espionaje o posible manipulación de mensajes que se pueda generar en el camino hacia el servidor, utilizando DoH.
  3. Enviar tan poca información como sea posible para evitar la identificación de los usuarios.
Evitar la desconfianza de resolutivos usando TRR

Las redes pueden proveer resolutivos no confiables que pueden robar datos o engañar a los usuarios para dirigirlos a otros sitios webs, debido a que muy pocos usuarios conocen los riesgos o la forma en la que pueden protegerse.

Incluso para los usuarios que conocen los riesgos, es difícil para ellos cerciorarse que su ISP u otra organización maneja los datos de DNS adecuadamente.

En Mozilla hemos estudiado los riesgos, y en conjunto con nuestro poder de negociación hemos buscado una empresa que colabore con nosotros para proteger los datos de los usuarios. Y la hemos encontrado: Cloudflare.

Cloudflare provee un servicio de resolución recursiva, con una política de privacidad enfocada en los usuarios. Se han comprometido a borrar todo los datos que puedan identificar a un usuario después de 24 horas, así como nunca compartir esos datos a terceros. También habrán auditorías periódicas para verificar que los datos son borrados como se espera.

Con esto tenemos un resolutivo en el cual podemos confiar para proteger la privacidad de los usuarios. Esto significa que Firefox puede ignorar el resolutivo que le proporcione la red e ir directamente a Cloudflare. Y con ello no tenemos que preocuparnos de utilizar un resolutivo que venda los datos de los usuarios o que dirija a los usuarios a sitios web maliciosos.

¿Por qué los elegimos? Cloudflare está tan emocionado como nosotros en construir un servicio resolutivo de DNS enfocado en la privacidad. Ellos han trabajado con nosotros para construir un servicio de DoH transparente para los usuarios. Han estado muy abiertos a agregar protecciones para los usuarios, por lo que estamos muy felices de colaborar con ellos.

Pero esto no significa que los usuarios de Firefox solo puedan usar los servicios de Cloudflare. Los usuarios tienen la libertad de configurar Firefox para usar cualquier servicio que deseen. Así que a medida que las ofertas de estos servicios crezcan, planeamos facilitar el descubrimiento y utilización de los mismos.

Proteger contra el espionaje y los intrusos mediante DoH

El resolutivo no es la única amenaza. Los enrutadores pueden rastrear y falsificar las respuestas del DNS, debido a que pueden ver los contenidos tanto de las solicitudes hacia el DNS como de sus respuestas. Pero ya se han desarrollado métodos para asegurarse que los enrutadores no puedan hacer cosas como esas. Es el cifrado del cual hablé antes.

Utilizando HTTPS para intercambiar los paquetes entre el equipo y el DNS, nos podemos asegurar que no se puedan espiar ni modificar los solicitudes entre ellos.

Enviar la menor cantidad de datos posibles para evitar la identificación

Además de proveer un resolutivo confiable usando DoH, Cloudflare está trabajando con nosotros para hacer de esto todavía más seguro.

Normalmente, un resolutivo envía el nombre del dominio completo a cada servidor –  el servidor Root, el TLD, etc. Pero Cloudflare hará algo diferente. Solo enviará aquello que es importante al servidor DNS con el que esté hablando ese momento. Esto es llamado minimización QNAME.

El resolutivo usualmente también incluye los primeros 24 bits de tu dirección IP en la solicitud. Esto puede ayudar al servidor DNS a saber el lugar donde te encuentras y poder seleccionar el CDN más cercano a ti, pero esta información puede ser utilizada para relacionar diferentes solicitudes de DNS a un mismo usuario.

En vez de hacer esto, Cloudflare hará la solicitud desde la IP de uno de sus servidores que se encuentra más cerca del usuario. Esto permite la geolocalización sin vincularlo a un usuario en particular. Además de esto estamos buscando la forma de hacer esto aún mejor sin olvidarnos de la privacidad.

Haciendo esto – eliminado las partes relevantes del nombre del dominio y no incluyendo la dirección IP del usuario – significa que los servidores DNS tienen muchos menos datos que puedan recolectar.

¿Que no está arreglando TRR or DoH?

Con estas correcciones hemos sido capaces de reducir la cantidad de personas que pueden visualizar los sitios que tú estás visitando. Pero esto no elimina las filtraciones de datos por completo.

Después de que se utiliza el servicio de DNS para encontrar la dirección IP, aún se debe de realizar la conexión al servidor. Para realizar esto, se debe de hacer una solicitud. Esta solicitud incluye el nombre del sitio en el servidor al cual te quieres conectar, y esta solicitud no está cifrada.

Esto significa que tu ISP puede conocer los sitios que estás visitando. Además los enrutadores que llevan tu solicitud desde tu navegador al servidor también pueden ver la información.

Una vez que se ha realizado la conexión al servidor web, todo las conexiones futuras son cifradas, permitiendo no solo utilizar la conexión con un sitio web en especifico, sino con todos los sitios que estén alojados en el servidor.

Esto se llama reutilización de conexión. Cuando tu te conectas a un servidor que lo soporta, el servidor te va a decir los otros sitios que almacena. Entonces puedes visitar dichos sitios mediante una conexión cifrada.

¿Por qué esto ayuda? Porque ya no tienes que iniciar una nueva conexión para visitar los otros sitios web. Esto significa que no tendrás que enviar un mensaje sin cifrar indicando el sitio al que te quieres conectar. Lo cual permite que te conectes a otros sitios en el mismo servidor sin revelar dichos sitios a tu ISP o a los enrutadores que utilices.

Con el aumento de servicio de CDN, más sitios están siendo servidos a través de un único servidor. Permitiendo reutilizar la conexión con dicho servidor para conectarse a diversos sitios web y con ello evitar filtrar datos cuando te conectes a otros sitios web. Esto significa que conforme pase el tiempo esto aumentará, así como la privacidad de los usuarios.

¿Cuál es el avance?

Tu puedes utilizar DNS sobre HTTPS hoy, de hecho te motivamos a ello.

Queremos activar esta función por defecto para todos los usuarios. Nosotros creemos que todos los usuarios merecen tener privacidad y seguridad de sus datos sin importar el nivel que conocimientos técnicos que tengan.

Esto es un gran cambio y debemos de hacer las pruebas pertinentes primero. Es por esto que estamos realizando un estudio acerca de esta función. Hemos solicitado a la mitad de los usuarios de Firefox Nightly que nos apoyen para la recolección de dato sobre el rendimiento de la función.

Nosotros usamos el resolutivo por defecto como lo conocemos, pero también enviamos una solicitud al resolutivo de Cloudflare con DNS sobre HTTPS. Entonces comparamos los dos “resultados”, para verificar que todo se encuentra funcionando como se espera.

Para los participantes en este estudio, la respuesta que entregue Cloudflare no se utilizará. De momento solo verificamos que todo funcione adecuadamente y después ignoramos la respuesta de Cloudflare.

Estamos agradecidos por el apoyo que hemos obtenido por parte de los usuarios de Firefox Nightly – esas personas que nos ayudan día con día a probar Firefox para que funcione cada vez mejor para todos – y esperamos que nos ayuden con esta funcionalidad también.

Categorías: Mozilla Hispano

A propósito de la salud de Internet

Noticias de Mozilla Hispano - Jue, 20/09/2018 - 20:31

El jueves pasado estuvimos en la semana Linux a través de una presentación del Reporte para la salud de Internet (IHR) que Mozilla lanzó este año.

Definir cómo Internet es saludable se hace complejo porque los contextos, historias y también oportunidades que tenemos son diferentes, y esto gracias a los lugares en los que nos encontramos. Sin embargo, una forma de saber cómo internet puede ser saludable es a través de casos en los que se vulneran los derechos de los cibernautas, prácticas, actores y sobre todo, las oportunidades que se dan.

Para el contexto colombiano y buscando la participación, percepción y reflexión de más personas, presentamos casos específicos para cada uno de los puntos en los que se centra el IHR, además de definir lo que se entiende en cada ámbito y también formular preguntas para conocer más de la percepción y opinión de los asistentes.

 

A continuación presentamos el recuento de la presentación y reflexión en torno a cada una de las áreas que se presentan en el Reporte para la Salud de Internet: privacidad y seguridad, apertura, descentralización, inclusión digital,  y alfabetización digital.

 

Privacidad y seguridad. Presentamos información respecto al caso colombiano en el que los ataques de ransomware cayeron de 638 millones a 184 millones en 2017: Ataques de ransomware cayeron de 638 millones a 184 millones en 2017. 

Y también reflexionamos sobre nuestra navegación diaria a través de las siguientes preguntas: cuando usted navega en internet ¿se siente seguro? ¿siente que tiene el control de su información, datos, privacidad? ¿Si? ¿No? ¿Por qué? ¿En qué contextos si y en cuáles no?

Apertura. En Colombia se encuentra activa la iniciativa del Portal de datos abiertos del Estado, sin embargo una pregunta que tenemos es: ¿Qué tan abiertos son los datos y dinámicas en las que se obtiene y da acceso a los mismos?

De igual forma, presentamos para el caso de reformas o leyes de derechos de autor, el caso Colombiano, en el que hace unos meses la sociedad civil participó de manera muy activa en la reforma de la ley de derechos de autor, planteando desafíos en términos de acceso a la información, derechos de autor, el funcionamiento de bibliotecas, entre otros. Pueden encontrar más información en una publicación de la Fundación Karisma de Colombia sobre la Reforma de derecho de autor.

Descentralización. En términos de neutralidad, la invitación que hacemos es a pensar y reflexionar respecto a nuestras prácticas diarias de navegación. ¿Qué aplicaciones usamos? ¿A quiénes pertenecen? ¿Quién las controla? Respecto a este tema hablamos del caso de Mark Zuckerberg, además de WeChat en China y el monopolio de los navegadores web.

Inclusión digital. Partiendo de la premisa que Internet debería reflejar la diversidad y experiencia de todas las personas, en cualquier lugar del mundo; que todos y todas deberíamos tener la oportunidad de participar en la creación, avance y estructuración de internet, sin tener algún tipo de amenaza. Al respecto, hablamos de los grupos y colectivos que empoderan a mujeres para que incremente su participación en Internet. De igual forma, hablamos de Mozilla Nativo, la comunidad de Mozilla que se dedica a empoderar a través de proyectos de localización de Software a hablantes de lenguas indígenas para que ellos se vuelvan constructores de herramientas (Firefox, Firefox para Android, mozilla.org, entre otras herramientas y plataformas) y estas estén en sus lenguas.

Alfabetización digital. En este punto se plantea que no solo es necesaria la conectividad a internet, también se necesita de habilidades como leer, escribir y participar en el mundo digital. En Colombia también hay varias inicitiavidas, así que dentro de la presentación hablamos de los Puntos vive Digital de MINTIC, del tema de ciudadanía digital y también de la nueva modalidad de trabajo, el teletrabajo.

 

Agradecemos al GLUD -Grupo Linux de la Universidad Distrital-, a los participantes que estuvieron en nuestra presentación y a nuestra nueva voluntaria, Alejandra Zerta, quien se integra a la comunidad desde Manizales.

 

¿Quieres participar del equipo local de reflexión e investigación sobre el Reporte de la Salud de Internet?

¡Escríbenos!

Nuestras redes sociales: FanpageTwitter o al Correo: monica@mozillacolombia.org

Te incitamos a descargar y compartir nuestra presentación. ¡Somos Mozilla Colombia!

Categorías: Mozilla Hispano

Depurando aplicaciones web modernas

Noticias de Mozilla Hispano - Dom, 26/08/2018 - 22:00

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

El desarrollo y depuración de aplicaciones JavaScript modernas en las herramientas de desarrollador de Firefox dieron un salto cuántico hacia adelante. En colaboración con Logan Smyth, Líder Técnico para Babel, subimos de nivel el soporte a mapas de fuente para permitirte inspeccionar el código que realmente escribiste. Combinado con la iniciativa en marcha para ofrecer soporte de primera clase a frameworks JS a través de nuestras herramientas, esto aumentará la productividad para desarrolladores de aplicaciones web modernas.

Los frameworks JS y las herramientas de construcción (build) juegan un rol crítico hoy en día. Frameworks como React, Angular y Ember le permiten a los desarrolladores construir interfaces de usuario declarativas con JSX, directivas y plantillas. Herramientas como Webpack, Babel y PostCSS le permiten a los desarrolladores usar las nuevas características de JS y CSS antes que sean soportadas por los creadores de navegadores. Estas herramientas ayudan a los desarrolladores a escribir código más simple, pero generan código más complicado de depurar.

En el siguiente ejemplo, usamos Webpack y Babel para compilar Módulos ES y funciones asíncronas dentro de JS simple, que puede correr en cualquier navegador. El código original a la izquierda es muy simple. El código generado, compatible con navegadores a la derecha es mucho más complicado.

Archivo original a la izquierda, archivo generado a la derecha.

Cuando el depurador se pausa, usa los mapas de fuentes para navegar desde la línea 13 en el código generado a la línea 4 en el código original. Desafortunadamente, ya que la pausa realmente ocurre en la línea 13, eso puede hacer difícil para el usuario para descubrir cuál es el valor que dancer tiene en ese momento. Moviendo el puntero del ratón sobre la variable dancer retorna undefined y la única manera para encontrar el contexto de dancer es abrir todos los seis contextos en el panel de Contextos seguidos por expandir el objeto _emojis. Este proceso complicado y frustrante es el por qué mucha gente opta por deshabilitar los mapas de fuentes.

Valor de dancer es undefined, seis contextos separados en el panel de Contextos.

Para hacer frente a este problema, formamos un equipo con Logan Smyth para ver si era posible hacer que la interacción se sintiera más natural, como si estuvieras depurando el código original. El resultado es un nuevo motor que mapea los datos de mapas de fuentes con el árbol de sintaxis de Babel para mostrar las variables que esperas ver en la manera que quieres verlas.

El valor correcto de dancer es mostrado, el panel de Contextos muestra un contexto.

Estas mejoras fueron implementadas primero para Babel y Webpack, y actualmente estamos agregando soporte para TypeScript, Angular, Vue, Ember y muchas otras. Si tu proyecto genera fuentes de mapas hay una buena posibilidad para que esta característica funcione para ti.

Para probarlo, sólo dirígete y descarga Firefox Developer Edition. Puedes ayudarnos probando esto en tu propio proyecto y reportando cualquier error. Si quieres seguir adelante, decir hola, o contribuir, también puedes encontrarnos en los canales de devtools en GitHub, Mozilla Discourse o en el Slack de devtools.

Nuestro objetivo para el 2018 es mejorar la vida de los desarrolladores web que desarrollan aplicaciones modernas usando los últimos frameworks, herramientas y mejoras prácticas. Corregir variables es sólo el inicio ¡El futuro es brillante!

Categorías: Mozilla Hispano

El Arco: Uso de Rust y WebAssembly para animar 30 mil luces LED de colores

Noticias de Mozilla Hispano - Mar, 21/08/2018 - 03:08

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

En junio, Mozilla colaboró con un artista llamado Ian Brill para crear una instalación llamada el “Arco” en la JSConf EU de Berlín. Este ambiente interactivo permitió a la gente experimentar la intersección del arte y la tecnología de una manera física, palpitante e inmersiva.

Los visitantes pudieron ver el Arco impresionante y experimentar un espectáculo de luces siempre cambiante compuesto de 30.000 LEDs de colores. Para apoyar la exposición, los ingenieros de Mozilla construyeron una plataforma que permitía a cualquiera utilizar tecnologías web (con una implementación subyacente en Rust y WebAssembly) para controlar las animaciones del Arco y hacer que la pantalla de luz fuera interactiva. El resultado fue divertido y colorido, y dio a los desarrolladores la oportunidad de interactuar con nuevas tecnologías desconocidas.

Tal vez recuerdes haber leído el post de Lin Clark sobre “Primer módulo Rust+WebAssembly para bebés“. Ofrece una excelente visión general de por qué decidimos crear una instalación artística en torno a Rust y WebAssembly. TL:DR: Los proyectos “Hola mundo” están bien, pero esto proporciona una forma divertida y atractiva de aprender algo nuevo.

JSConf recientemente publicó el vídeo completo de la charla de Lin. Puedes comprobarlo más abajo:

Enlaces adicionales:

Categorías: Mozilla Hispano

Usando la nueva API de tematización en Firefox

Noticias de Mozilla Hispano - Sáb, 11/08/2018 - 19:20

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Desde las poderosas extensiones como Stratiform o FT Deep Dark hasta los sencillos temas ligeros, los temas han sido bastantes populares dentro de Firefox. Ahora que Firefox Quantum (57) se ha lanzado con muchas mejoras de desempeño y una nueva interfaz brillante, queremos cerrar la brecha con una nueva API de tematización que te permita ir más allá de los básicos temas de peso ligero.

Demostración por John Gruen

¿Qué puedes tematizar?

Antes del lanzamiento de Quantum, los temas ligeros tenían un limitado conjunto de propiedades que podían ser tematizadas: sólo podías agregar una imagen de cabecera y establecer el color de texto y el color de fondo del marco. La nueva API de tematización introduce algunas nuevas propiedades. La lista completa puede ser encontrada en MDN. Un objeto Theme básico luce como esto:

{ "colors": { "accentcolor": "tomato", "textcolor": "white", "toolbar": "#444", "toolbar_text": "lightgray", "toolbar_field": "black", "toolbar_field_text": "white" }, "images": { "headerURL": "" } }

Así es como se muestra el tema anterior:

Nota cómo la propiedad images.headerURL es establecida con una cadena de texto vacía. Esto es porque es una de las tres propiedades obligatorias: images.headerURL, colors.accentcolor y colors.textcolor.

Finalmente, otra mejora sobre los temas ligeros es el soporte para múltiples imágenes, usando el campo images.additional_backgrounds que toma una matriz de rutas de imágenes. Las alineaciones y mosaicos de estas imágenes se logran usando properties.additional_backgrounds_alignment y properties.additional_backgrounds_tiling, que toman una matriz de valores background-position y background-repeat respectivamente. Puedes revisar esto en la MDN para un ejemplo. Puedes usar múltiples fondos para mostrar cortinas en ambos lados de la interfaz del navegador, o como una forma de agregar varios indicadores temáticos (deportes/clima/navegación privada) en la interfaz.

Temas dinámicos

Digamos que te gustaría introducir un modo noche a tu tema. Los temas dinámicos te permiten hacer esto. Éstos tienen el poder completo de una extensión normal de navegador. Para usar la tematización dinámica, necesitas agregar el permiso de theme en tu archivo manifest.

El método browser.theme.update() es el núcleo de este tipo de tematización. Éste toma un objeto Theme como parámetro. El método puede ser llamada en cualquier lugar de tus scripts en segundo plano.

Para este ejemplo, vamos a crear una extensión que cambie el tema dependiendo de si es de noche o de día. El primer paso es crear una función en tu script de background que cambie tu tema al tema de día o al tema de noche:

var currentTheme = ''; const themes = { 'day': { images: { headerURL: 'sun.jpg', }, colors: { accentcolor: '#CF723F', textcolor: '#111', } }, 'night': { images: { headerURL: 'moon.jpg', }, colors: { accentcolor: '#000', textcolor: '#fff', } } }; function setTheme(theme) { if (currentTheme === theme) { // No se cambia el tema si ya ha sido cambiado return; } currentTheme = theme; browser.theme.update(themes[theme]); }

El código anterior define dos temas: El tema de día y el tema de noche, la función setTheme usa browser.theme.update() para establecer el tema. El siguiente paso ahora es usar esta función setTheme y verificar periódicamente si la extensión debe intercambiar los temas. Puedes hacer esto usando la API de alarmas. El código anterior verifica periódicamente y establece el tema de acuerdo a:

function checkTime() { let date = new Date(); let hours = date.getHours(); // Se establecerá el tema de día entre las 8am y 8pm. if (hours > 8 && hours < 20) { setTheme('day'); } else { setTheme('night'); } } // Al inicio, verificar el tiempo para ver qué tema mostrar. checkTime(); // Configurar la alarma para verificar esto regularmente. browser.alarms.onAlarm.addListener(checkTime); browser.alarms.create('checkTime', {periodInMinutes: 5});

¡Eso es todo para este ejemplo! El ejemplo completo está disponible en el repositorio de GitHub de webextension-examples.

Otros método que no es cubierto por el ejemplo es browser.theme.reset(). Este método simplemente reinicia el tema al tema predeterminado del navegador.

Temas por ventana

La API de tematización es muy poderosa, ¿pero qué pasa si necesitas aplicar un tema diferente para ventanas privadas o ventanas inactivas? Desde Firefox 57 en adelante, es posible especificar un parámetro windowId tanto a browser.theme.update() como browser.theme.reset(). El windowId es el mismo ID retornado por la API de ventanas.

Vamos a hacer un ejemplo sencillo que agrega un tema oscuro a ventanas privadas y mantiene las otras ventanas con el tema predeterminado

Empezamos definiendo la función themeWindow:

function themeWindow(window) { // Verifica si la ventana está en navegación privada if (window.incognito) { browser.theme.update(window.id, { images: { headerURL: "", }, colors: { accentcolor: "black", textcolor: "white", toolbar: "#333", toolbar_text: "white" } }); } // De otra forma, reinicia al tema predeterminado else { browser.theme.reset(window.id); } }

Una vez que está hecho, podemos conectar esto con la API de ventanas:

browser.windows.onCreated.addListener(themeWindow); // Tematizar todas las ventanas abiertas actualmente browser.windows.getAll().then(wins => wins.forEach(themeWindow));

Bastante sencillo, ¿verdad? El ejemplo completo lo puedes encontrar aquí. Así es como se ve el ejemplo:

Otro complemento que hace uso de estas capacidades es Containers Theme por Jonathan Kingston, que establece el tema de cada ventana según el contenedor de la pestaña seleccionada. El código fuente de este complemento lo puedes encontrar aquí.

El complemento VivaldiFox también hace uso de esta capacidad para mostrar diferentes temas de sitios web en diferentes ventanas.

Obtener información sobre el tema actual

Desde Firefox 58 en adelante, puedes obtener información sobre el tema actual y vigilar actualizaciones del tema. He aquí por qué esto importa:

Esto permite a los complementos integrar su interfaz de usuario sin problemas con el actual tema instalado por el usuario. Un ejemplo de esto sería coincidir los colores de tu barra lateral con los colores de tu tema actual.

Para hacerlo, Firefox 58 provee dos nuevas API: browser.theme.getCurrent() y browser.theme.onUpdate.

Aquí está un ejemplo que aplica algunas de las propiedades del tema actual al estilo de un sidebar_action:

function setSidebarStyle(theme) { const myElement = document.getElementById("myElement"); // colors.frame y colors.accentcolor son alias if (theme.colors && (theme.colors.accentcolor || theme.colors.frame)) { document.body.style.backgroundColor = theme.colors.accentcolor || theme.colors.frame; } else { document.body.style.backgroundColor = "white"; } if (theme.colors && theme.colors.toolbar) { myElement.style.backgroundColor = theme.colors.toolbar; } else { myElement.style.backgroundColor = "#ebebeb"; } if (theme.colors && theme.colors.toolbar_text) { myElement.style.color = theme.colors.toolbar_text; } else { myElement.style.color = "black"; } } // Establecer los estilos cuando la página de la extensión se carga browser.theme.getCurrent().then(setSidebarStyle); // Observar cambios de tema browser.theme.onUpdated.addListener(async ({ theme, windowId }) => { const sidebarWindow = await browser.windows.getCurrent(); /* Solo actualiza el tema si aplica a la ventana donde está la barra lateral. Si se pasa un windowId en una actualización, el tema solo se aplica a esa ventana. Sino, el tema se aplica globalmente a todas las ventanas. */ if (!windowId || windowId == sidebarWindow.id) { setSidebarStyle(theme); } });

El ejemplo completo puede ser encontrado en Github. Como puedes ver en la siguiente captura de pantalla, la barra lateral usa los colores del tema del navegador aplicado actualmente:

Otro ejemplo es el complemento Tree Style Tab que hace uso de estas API para integrar su interfaz con el tema usado actualmente. Este es un ejemplo real del complemento funcionando junto con VivaldiFox:

¿Qué sigue?

¡Hay más APIs llegando! Tenemos planeado expandir el conjunto de propiedades soportadas y pulir algunas asperezas a la forma en cómo los temas son aplicados. El registro de bug para el API puede ser encontrado en Bugzilla.

Por mientras, no podemos esperar para ver de lo que serás capaz de hacer con la nueva API de tematización. Por favor, déjanos saber qué mejoras te gustaría ver.

Categorías: Mozilla Hispano

Mozilla Activate Day 2018 – San Salvador

Noticias de Mozilla Hispano - Lun, 06/08/2018 - 12:16

Desde hace tres años la comunidad Mozilla en Centroamérica realiza un evento anual donde se reúnen diversos representantes de los distintos países de la región para dar a conocer los proyectos en los que la comunidad Mozilla está trabajando y asi unir esfuerzos para mejorar las comunidades y la organización por país.

Este año, el encuentro se realizó en la Universidad Don Bosco ubicado en la ciudad de San Salvador el día miércoles 11 de julio del 2018 y se enfocó en los temas relacionados a la campaña Mozilla Activate,  donde se dieron a conocer al público los proyectos, actividades, iniciativas y eventos que se están realizando dentro de la comunidad hispana.

Dentro de este Mozilla Activate Day se hablaron diversos temas:

  • Como participar en la comunidad
  • Desarrollo con Rust
  • Realidad virtual para la web abierta
  • AFrame y WebVR
  • Using & Testing Nightly
  • Charlas de Tecnología con Tech Speakers!
  • Crea tu propia extensión para Firefox
  • Diversidad e inclusión en Mozilla
  • El proyecto Common Voices
  • Desarrollo de video juegos
  • Mozilla IOT (Internet of Things)

La Agenda del día se presentó de la siguiente manera:

Introducción a la comunidad Mozilla
  • Expositor: Aaron Galagarza (Mozilla Costa Rica)
  • Descripción: Se Presentaron los temas relacionados a la comunidad Mozilla general, breve descripción sobre qué es el proyecto Mozilla, y como es la participación de la comunidad en los distintos países de la región.

Realidad Virtual y WebVR 
  • Expositor: David Gonzalez Blanchard (Mozilla Nicaragua)
  • Descripción: WebVR es una especificación abierta que hace posible experimentar VR en su navegador. El objetivo de la charla fué proporcionar a todos los participantes acceso a experiencias de realidad virtual, sin importar qué dispositivo se utilice y que tengan conocimientos básicos sobre cómo crear contenido VR para la web.

Diversidad e inclusión en Mozilla / El proyecto Womoz 
  • Expositor: Karla Hernández (Mozilla El Salvador)
  • Descripción: Esta charla se enfocó en el corazón de Mozilla, el cual son las personas. Las personas son nuestra prioridad y hacemos todo lo posible por reconocer, valorar y respetar la diversidad de nuestros colaboradores globales. En el proyecto Mozilla se aceptan las contribuciones de todos aquellos que compartan nuestros objetivos y deseen contribuir de una manera positiva y constructiva dentro de nuestra comunidad.

Programación de extensiones web (Web extensions) 
  • Expositores:
  • Descripción: Los complementos proporcionan una forma segura, simple y potente de personalizar su experiencia de navegación. Gracias a las API de WebExtensions, es más fácil que nunca crear extensiones que puedan trasladarse fácilmente a Firefox, Chrome, Edge y Opera. A través de esta actividad, se mostró a los nuevos desarrolladores la oportunidad de crear extensiones de navegador para resolver problemas reales y mejorar sus vidas y la web.

Dive into Rust: el futuro de la programación de sistemas
  • Expositores:
  • Descripción: Rust es un lenguaje de programación de sistemas importante para el futuro de la web. Funciona increíblemente rápido, previene fallas de segmentación y garantiza la seguridad de los hilos de ejecución. Con esta charla, queremos que más desarrolladores entiendan, usen y evangelicen este lenguaje para hacer que la web sea mejor y más segura.

Como participar en la Comunidad 

Mozilla IOT (Internet of Things) 
  • Expositor: Yeffri Salazar (Mozilla Guatemala)
  • Descripción: El Internet de las cosas es un concepto que se refiere a la interconexión digital de objetos cotidianos. Con esta charla se demostró la apuesta de Mozilla para el mundo de Internet de las cosas o como ellos lo denominan web de las cosas, una manera entretenida y sencilla de utilizar tu navegador como control de cosas conectadas a Internet

Privacidad en la web y tips para navegar seguro. 
  • Expositor: Roni De León. (Mozilla Panamá)
  • Descripción: Su privacidad es un factor importante considerado por Mozilla en el desarrollo de cada uno de nuestros productos y servicios.  Mozilla tiene como misión que Internet siga creciendo de forma saludable. En esta charla se mostraron algunos tips para navegar de forma segura y que aspectos de la privacidad debemos tomar en cuenta diariamente.

Servo, el motor para el navegador del futuro 
  • Expositor: Carlos Cárcamo (Mozilla El Salvador)
  • Descripción: Charla sobre el nuevo motor de renderizado de Mozilla para el firefox del futuro y cómo colaborar con el proyecto. El proyecto Servo es un esfuerzo comunitario para crear un motor de navegador capaz de aprovechar el hardware multinúcleo para mejorar la velocidad, la estabilidad y la capacidad de respuesta. Servo está escrito en el lenguaje de programación Rust, brindando un rendimiento increíblemente rápido y seguridad de memoria al navegador.

Desarrollo de Videojuegos para la Web 
  • Expositor: Jorge Aguilar (Mozilla Honduras)  
  • Descripción: El objetivo de la charla fue dar a conocer el estado y el mercado de los videojuegos para la web. se mostraron ejemplos de diferentes proyectos open source para el desarrollo de videojuegos web y se presentó en vivo un juego funcional creado con VanillaJS.

Conversatorio sobre experiencias de trabajo en la web y la comunidad Mozilla.

 

Agradecemos mucho a todos los participantes del evento, a la comunidad en general, a la universidad Don Bosco y sus autoridades y en especial a Mozilla por permitirnos la oportunidad de llevar su misión y representar a la comunidad en este evento.

El próximo año estamos planeando llevar el Encuentro Mozillero centroamericano hacia Guatemala, por lo que están cordialmente invitados para el próximo año. Coméntanos ¿que te gustaría que presentemos el próximo año? y que expectativas tendrías para un próximo Activate day.

Categorías: Mozilla Hispano

Firefox 60 – Módulos y más

Noticias de Mozilla Hispano - Dom, 22/07/2018 - 19:44

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Ya Firefox 60 está aquí, y continúa el desarrollo de Quantum. El poder del procesamiento paralelo de Quantum CSS ahora se encuentra disponible  en Firefox para Android,  y seguimos trabajando en WebRender, que moderniza toda la idea de lo que significa dibujar una página web. Pero no estamos aquí solo para adorar las cosas internas del navegador. Pues Firefox 60 trae un montón de mejoras para la web y algunas de ellas orientadas a los desarrolladores. Aquí vemos las más importantes:

¡Los módulos ES están aquí!

 

El código modular no solo es una buena idea, se debe hacer por ley ¡es una gran idea! La posibilidad de separar unidades funcionales del software, permite la reutilización individual de módulos y facilita la inclusión de código de terceros.  Muchos lenguajes tienen soporte para módulos, y si estás familiarizado con NodeJS, éstos han estado disponibles desde hace tiempo mediante el uso de require en el API de  CommonJS , pero una sintaxis estandarizada se creó como parte de ES2015 (ES6).

Aunque la sintaxis para módulos de ES fue estandarizada, solo faltaba que los navegadores entendieran y descargaran dichos módulos. Esto toma un poco de tiempo adicional, pero ahora que el comportamiento de carga del navegador fue estandarizado, ha iniciado su soporte, y en este lanzamiento se ha agregado el soporte a Spidermonkey, el motor de JavaScript de Firefox. Puedes chequear la documentación en MDN, y por supuesto no te pierdas el articulo en inglés de Lin Clark’s sobre los detalles de los módulos de ES.

Mantén las cookies solo para ti

Firefox 60 soporte el atributo Same-Site cuando se establecen las cookies. Cuando se activa, el navegador no enviará las cookies junto a una petición cross-origin request al servidor, por ejemplo, cuando se descarga una imagen. Este ayuda a mitigar las vulnerabilidades de tipo Cross-Origin Request Forgery. Existe un modo “relajado”  que implementa lo anterior, además de un modo estricto que, adicionalmente no enviará las cookies al recibir conexiones. Esto previene que un sitio malicioso enlace a una página donde pueda ocurrir un comportamiento extraño cuando se envíen las cookies. Puedes leer mas sobre esto en este artículo (en inglés) del blog de Mozilla Security.

API de Autenticación Web

Es conocido desde hace tiempo, que en muchos contextos, la combinación de un usuario conocido (como una dirección de correo) y las contraseñas generadas por usuarios no son los suficientemente seguras para la autenticación. Esto ha llevado a implementar autenticación de múltiples factores (Multi-Factor Authentication en inglés), usualmente 2 factores de autenticación, el cual, adicionalmente a la contraseña, los usuarios también deben proveer información de una fuente adicional. Muchos sitios envían un mensaje SMS con un código a un dispositivo móvil, y otros aceptan códigos generados por una aplicación generadora de códigos o con un hardware construido para ello. Todo esto ha requerido que el usuario copie números de una pantalla a un campo de texto o un hardware que simule la presión de las teclas.

La API de Autenticación Web (también conocido como WebAuthn) busca eliminar la incomodidad de este proceso al permitir a un dispositivo o aplicación de autenticación de multi-factores, comunicarse directamente con el sitio. El proceso de cómo funciona esto es un poco complejo para manejarse en esta entrada, pero puedes aprender de WebAuthn en MDN o en este blog.

Un trazo de estilo

La propiedad (aún no es estándar)  text-stroke define una línea centrada horizontalmente a lo largo de los caracteres de un texto. Permite hacer efectos que no son posibles hacer solo con text-shadow. Un trazo ancho puede obstruir porciones de caracteres porque por defecto, la línea es dibujada sobre la tipografía. Esto puede ser un poco feo. Para arreglarlo, los navegadores están tomando prestado la propiedad paint-order del estándar SVG. Cuando se coloca la propiedad, los navegadores dibujarán un trazo debajo la tipografía, por ejemplo:

Check out the demo on Glitch

Es súper elegante, pero no olvides que aún no es un estándar, y siempre debes chequear que el texto es legible sin aplicar efectos. Puedes leer más en MDN y chequear la matriz de comparación.

ESR / Política de Grupos

Firefox 60 es la siguiente versión de Firefox diseñada a ser una versión de soporte extendido, mejor conocido como ESR “Extended Support Release”. Las versiones ESR están orientadas a administradores de sistemas que implementan y mantienen entornos de escritorio en organizaciones grandes. Ellas reciben actualizaciones de seguridad en sincronización con las últimas versiones de lanzamiento de Firefox, y el soporte de cada versión ESR se traslapa con la siguiente versión. El período entre estas versiones permite a las organizaciones certificar e implementar nuevas versiones ESR  antes de dejar el soporte a la versión anterior.

Firefox 60 se lanza junto a la primera encarnación del Motor de Políticas que permite a los administradores de las organizaciones configurar Firefox para todos los usuarios de su organización. En Windows,  esto se logra utilizando Windows Group Policy, y por medio de un archivo de configuración para otras plataformas. No es una funcionalidad que la mayoría de usuarios de Firefox necesite, pero si tu trabajo es administrar miles de instalaciones de Firefox, esperamos que disfrutes de esta funcionalidad.

¿Te gustaría saber más?

Como siempre,  la lista completa de cambios orientada a desarrolladores está en MDN y puedes encontrar las notas de lanzamiento aquí.

¡Sigue rockeando la web libre!

Categorías: Mozilla Hispano

Encuentro Centroamericano de Software Libre 2018

Noticias de Mozilla Hispano - Vie, 20/07/2018 - 16:29

Los días 11, 12 y 13 de julio de 2018, se llevo a cabo el X Encuentro centroamericano de software libre y como parte de la comunidad Mozilla centroamérica participamos de la mejor manera en este evento que se llevó a cabo en la ciudad de San Salvador, El Salvador.

El Encuentro Centroamericano de Software Libre (ECSL) es un evento anual organizado desde el año 2009 por y para la comunidad de Software Libre Centroamérica (SLCA). El ECSL es una reunión de activistas e integrantes de comunidades y grupos de usuarios/as que sirve como punto de encuentro y espacio de articulación, educación, coordinación e intercambio de ideas para fortalecer acuerdos y formas de trabajo conjuntas que faciliten la promoción del uso y desarrollo del Software Libre en la región.

El Encuentro de software libre de este año tenia los siguientes ejes temáticos:

  • Eje Temático #1: Aportemos al desarrollo de más y mejor software libre.
  • Eje Temático #2: Desarrollemos y conozcamos más sobre hardware libre.
  • Eje Temático #3: Liberemos espacios en la web con software libre.
  • Eje Temático #4: Usemos geo-tecnologías libres para la gestión de información geográficas.
  • Eje Temático #5: Seamos una comunidad más inclusiva y diversa.
  • Eje Temático #6: Democraticemos los medios de comunicación con el apoyo del software libre.
  • Eje Temático #7: Fortalezcamos la comunidad centroamericana de software libre.
  • Eje Temático #8: Abramos un espacio de desconferencia.

A la fecha, se ha realizado en Nicaragua (2009), Costa Rica (2010), El Salvador (2011), Guatemala (2012), Belice (2013), Panamá (2014), Honduras (2015), Nicaragua (2016) y Costa Rica (2017). En su décima edición, se realizó en la ciudad de San Salvador, El Salvador los días 11, 12 y 13 de julio del 2018.

 

Este año fue nuestro cuarto año consecutivo en el cual participamos arduamente del evento y realizamos diversas presentaciones relacionadas a los proyectos que Mozilla está llevando a cabo en este momento. Dentro de los principales tópicos tenemos la campaña de Mozilla Activate.

Los temas que presentados por la comunidad Mozilla fueron: ¿Qué es el proyecto Mozilla?


Impartida por Aaron Galagarza de Mozilla Costa Rica: La conferencia consistió en mostrar cómo funciona el proyecto de Mozilla y toda la información referente a las actividades que se realizan en la comunidad.

Realidad virtual con A-Frame


Impartida por David Antonio Gonzalez Blanchard de Mozilla Nicaragua: El objetivo del taller fue mostrarle a los participantes como crear experiencias en realidad virtual utilizando este framework  y que estos entiendan el funcionamiento de la realidad virtual con Mozilla.

Programación de extensiones web

Impartida por Jorge Mizrain Aguilar Perez de Mozilla Honduras: Durante esta charla se explicó cómo desarrollar complementos para Firefox utilizando Extension APIs, y que a su vez sean compatibles con otros navegadores que soporten esta tecnología.

Desarrollo de videojuegos para la web


Impartida por Jorge Mizrain Aguilar Perez de Mozilla Honduras: El objetivo del taller fué mostrar el estado y el mercado de los videojuegos para la web. se mostraron diferentes ejemplos de proyectos open source para el desarrollo de videojuegos web y el desarrollo en vivo de un juego funcional con VanillaJS.

Diversidad e Inclusión en Mozilla


Impartida por Karla Hernández de Mozilla El Salvador: Durante la charla se habló sobre el trabajo que se realiza en Mozilla en temas de diversidad e inclusión y también se habló sobre la colaboración, inclusión social y acercamiento de los diversos grupos al mundo de las tecnologías de información.

Colabora con Mozilla


Impartida por Eduaro Enrique Gómez Valencia de Mozilla El Salvador: El objetivo principal de esta charla fue dar a conocer la comunidad, sus principios e iniciativas en cuanto a Software Libre y como pueden incluirse en la comunidad local y global.

Privacidad web y consejos para navegar seguro


Impartida por Roni De León Villaeral de Mozilla Panamá: La principal visión de este panel de discusión fue promover el uso de Firefox como un navegador enfocado en el cuidado de la privacidad, así como diferentes complementos que brindan una navegación segura.

Servo: El motor para el navegador del futuro


Impartida por Carlos Eduardo Carcamo Mendoza de Mozilla El Salvador: Esta charla se trató sobre el nuevo motor de renderizado de Mozilla para el Firefox del futuro y cómo colaborar. El proyecto Servo es un esfuerzo comunitario para crear un motor de navegador capaz de aprovechar el hardware multi-núcleo para mejorar la velocidad, la estabilidad y la capacidad de respuesta.

Introducción a Rust y Demo práctica


Impartida por Andrés Alonzo de Mozilla Guatemala: En esta charla se dio una introducción al nuevo lenguaje de programación Rust, el cual es un lenguaje de programación compilado, de propósito general y multiparadigma que está siendo desarrollado por Mozilla.

Internet de las cosas y Mozilla IOT

 


Impartido por Yeffri Salazar de Mozilla Guatemala: El Internet de las cosas es un concepto que se refiere a la interconexión digital de objetos cotidianos. Con esta charla se demostró la apuesta de Mozilla para el mundo de Internet de las cosas, una manera entretenida y sencilla de utilizar tu navegador como control de cosas conectadas a Internet.

Agradecemos mucho a los organizadores, los patrocinadores y todas las personas que apoyaron y participaron en el ECSL El Salvador, 2018. Agradecemos de todo corazón a Mozilla por permitirnos participar en dicho evento y poder apoyarnos, ademas de permitirnos la oportunidad de representar a la comunidad a nivel centroamericano.  Esperamos participar en el próximo ECSL 2019 el cual se llevará a cabo en la ciudad de Guatemala.

Para ver más fotos el evento puedes consultar el siguiente enlace:

https://photos.app.goo.gl/y6P2DQKauNjw3YY46

Categorías: Mozilla Hispano

Depurando Web Push con Mozilla Firefox

Noticias de Mozilla Hispano - Mar, 17/07/2018 - 03:59

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Introducción

Este artículo es parte de una serie sobre el uso y funcionamiento con Web Push y el servicio Web Push de Mozilla. Este artículo no pretende ser una guía general, sino ofrecer sugerencias y visión en el mejor uso del servicio. Se presume algún conocimiento de JavaScript, Python, u otras tecnologías.

Uno de los retos con los problemas de implementación de Web Push es intentar averiguar qué pasó mal. Web Push tiene un gran número de “partes en movimiento”, sistemas y componentes que necesitan trabajar juntos para que tu mensaje sea satisfactoriamente enviado y recibido. Mientras este artículo no puede localizar todas las razones que un mensaje dado de Push podría fallar, intentaré proporcionar herramientas y guía para los problemas más comunes.

Problemas comunes Informes de errores

El problema más grande que vemos es desde sitios que no prestan atención a los códigos de retorno que suministramos. Un artículo previo mencionó como puedes manejar suscripciones para reducir tu coste de envío de mensajes que nunca serán entregados. Es también importante prestar atención a el error que es devuelto.

Un error puede retornar un cuerpo como el siguiente:

{ 'errno': 102, 'message': 'Request did not validate invalid token', 'code': 404, 'more_info': 'http://autopush.readthedocs.io/en/latest/http.html#error-codes', 'error': 'Not Found' }

La lista de valores errno está disponible en la documentación de Autopush. (Autopush es el nombre del servidor open source que ejecutamos para manejar la recepción y envío de actualizaciones de subscripciones push.) El servidor intenta proporcionar tanto detalle y ayuda como sea posible, así que si tus mensaje no están llegando, los mensajes Autopush pueden ayudarte un poco.

Asuntos relacionados con VAPID

Otro problema potencial es la confusión sobre VAPID. VAPID es una especificación en desarrollo para la “auto identificación” de sitios de suministro de suscripciones. Esto significa que si hay un problema importante, el operador del servidor push tiene una manera de contactar a quien está enviando mensajes problemáticos. Si estás viendo un amplio número de mensajes con código de respuesta “401”,  es posible que tienes un problema con tu autenticación VAPID.

VAPID también permite a un sitio crear “suscripciones restringidas”. Estas suscripciones son bloqueadas así que solo la parte que tiene la clave VAPID puede enviarlas. Esto puede ser un poco confuso.

Muy simple, VAPID es un bloque de datos criptográficos firmado con una clave que consta de dos partes: una clave privada que nunca compartes y es usada para firmar el token VAPID, y una clave pública que es segura para compartir y es usada para crear la suscripción restringida. Generalmente, tienes una clave VAPID que dura por bastante tiempo. No es una buena idea que dure para siempre, pero ciertamente puede durar por un año o similar. Hablaré sobre las implicaciones de esto en un momento.

Cuando tu aplicación solicita un endpoint push, tienes la opción de proporcionar tu clave pública VAPID como applicationServerKey. Esto creará una nuevo endpoint de suscripción que está bloqueado a esa clave. Para poder enviar una petición de suscripción con éxito, debes firmar el bloque VAPID usando la clave privada correspondiente, e incluir la clave pública con tu petición. (Cómo incluir la clave pública cambió entre la versión (Draft) 01 y la versión 02. Probablemente quieres encontrar una librería que realice la firma. También querrás consultar la documentación para el servicio de push que elijas para ver qué formas aceptan. La mayoría de las plataformas push aceptan la versión 02.)

Ten en cuenta que la clave pública VAPID está atada a la URL que hayas solicitado. Esto significa que necesitas usar el mismo par de claves cada vez que quieras enviar datos a esa URL. Si alguna vez quieres cambiar la clave VAPID, necesitarás acceder a un nuevo endpoint y descartar el anterior. Tu decides como hacer esto, por supuesto. Tu aplicación podría simplemente acceder la nueva clave pública desde una localización conocida, generar una nueva petición URL y enviar la nueva información de registro de nuevo al servidor. Estos usa mucho del mismo código que usarías para un evento pushsubscriptionchange.

Así que , para errores 401 VAPID, querrás chequear:

  1. ¿Estás usando la misma clave para que usaste para adquirir la suscripción restringida?
  2. ¿Has firmado correctamente tu clave de autorización VAPID?
  3. ¿Has incluido todas las cabeceras VAPID requeridas con tu petición?
Encriptado de datos

Finalmente, está la encripción de datos. Esto puede ser lo más complicado de depurar porque el servidor push no tiene forma de saber si la encripción es correcta cuando acepta un mensaje para entrega. Además, un mensaje solo es entregado por el agente usuario (UA) si el UA puede descifrarlo satisfactoriamente. Esto previene tu aplicación de despertar para mensajes falsos, lo cual podría agotar la vida de la batería.

De nuevo, la mejor manera de resolver esta clase de problemas es usar una librería. Esto no es siempre posible, y puedes tener situaciones donde necesites crear una propia. Hay una página que te puede ayudar a guiarte al proceso de encriptado de tus datos, sin embargo actualmente solo funciona para Firefox.

Ten en cuenta que hay numerosos cambios en las especificaciones que podrían no estar soportadas aún. A partir de la fecha de publicación, la mayoría de implementaciones push aceptaran el encoding ECE Draft 03 “aesgcm”.

Hay una propuesta para que el agente reporte las formas de criptografía que soporta, pero esto no ha sido formalmente aceptado todavía. Desafortunadamente, este es uno de los problemas con el uso de tecnología que aún está en desarrollo. Si deseas seguir con los cambios que están siendo propuestos, deberías seguir los grupos de trabajo.

Desafortunadamente, muchos errores de encriptación no son detectados por el Servicio Push. Esto es porque el servicio Push no puede descrifrar tu mensaje. Afortunadamente, es posible to echar un vistazo al cliente para ver si podría haber un error.

Depurar el escritorio

Usa la consola del navegador para que te ayude a depurar el escritorio. Date cuenta, que esto es diferente a la consola web que aparece en el panel de las herramientas de desarrollador. La consola de navegador muestra un mayor nivel de mensajes que pueden no ser visibles por la página o la consola web.

El beneficio es que serás capaz de ver mensajes que tu service worker así como otros mensajes push. Por ejemplo, si miras a la página de pruebas que usamos, podrías ver algo similar en tu navegador:


Un ejemplo de la salida de la consola de navegador.

Cerca del final de esa ventana, podrías notar cuatro mensajes desde “sw.js”. Los primeros tres son mensajes console.info() que indican que un nuevo mensaje ha llegado, qué contiene el mensaje, y los clientes asociados. Nota que el cuarto mensaje es un console.error() diciendo "Service worker couldn't send message: Error: No valid client to send to.". Esto puede ocurrir cuando un service worker pierde su asociación con el padre. En resumen: las buenas noticias es que el mensaje llega bien, las malas noticias es que no tiene dónde ir.

Otra herramienta útil para considerar es el depurador de service worker en about:debugging#workers. Esta página muestra todos los service workers registrados y permite desregistrarles, opcionalmente enviar eventos push, y depurar el script de service worker. Mozilla hacks tiene más detalles sobre about: debugging page.

Depurar Android

Depurar push en Android es algo similar. Así como en el escritorio, querrás establecer dom.push.debug como true y dom.push.loglevel como debug. Desafortunadamente, no como en el escritorio, no hay una manera fácil de ver la consola de navegador desde Android. Los mensajes son registrados en el log de error de android, así que es posible usar un comando como adb logcat para seguir el log de error. Algunos desarrolladores pueden ser capaces de usar grep para buscar solo los registros que contengan "Gecko(Push|Console)".

Desafortunadamente, esta vista no es tan bonita, pero muestra más de lo mismo, incluyendo mensajes de consola desde service workers los cuales te pueden ayudar a identificar y resolver bugs. Merece la pena apuntar que adb puede truncar mensajes muy largos.

Un ejemplo de adb log sería así:

04-24 15:18:04.432 7015 7037 I GeckoPushGCM: Cached GCM token exists: crWSbvAk4e4:APA91bHozW8bSTCrBwPerd7... 04-24 15:18:04.432 7015 7037 D GeckoPushManager: Existing uaid is fresh; no need to request from autopush endpoint. 04-24 15:18:04.488 7015 7037 I GeckoPushManager: Got chid: c0ef2... and endpoint: https://updates.push.services... 04-24 15:18:04.500 7015 7038 I GeckoPush: console.debug: PushServiceAndroidGCM: 04-24 15:18:04.520 7015 7038 I GeckoConsole: put() [object Object] 04-24 15:18:04.521 7015 7038 I Gecko : put() 04-24 15:18:04.522 7015 7038 I Gecko : Object 04-24 15:18:04.522 7015 7038 I Gecko : - pushEndpoint = https://updates.push.services.mozilla.com/wpush/v1/... 04-24 15:18:04.522 7015 7038 I Gecko : - scope = https://jrconlin.github.io/Webpush_QA/ ... 04-24 15:18:04.526 7015 7038 I Gecko : console.debug: PushDB: 04-24 15:18:04.528 7015 7038 I GeckoConsole: put: Request successful. Updated record c0ef2... 04-24 15:18:04.528 7015 7038 I Gecko : put: Request successful. Updated record 04-24 15:18:04.528 7015 7038 I Gecko : c0ef2... 04-24 15:18:04.563 7015 7038 I GeckoConsole: receiverKey BNPFRn... 04-24 15:18:04.565 7015 7038 I GeckoConsole: Auth key: 0Gkt8... 04-24 15:18:04.567 7015 7038 I GeckoConsole: data: Amidst the mists and coldest frosts, I thrust my fists against ... ... 04-24 15:18:04.650 7015 7038 I GeckoConsole: echo -ne "\xa\xc6\xfb\xd3\x13\x0e\xa\xa\xa\xad\x59\xad\x71\xa\xa\... 04-24 15:18:04.652 7015 7038 I GeckoConsole: payload 191,40,74,54,29,62,188,190,133,70,86,70,120,194,173,100,62,... 04-24 15:18:04.653 7015 7038 I GeckoConsole: Fetching: https://updates.push.services.mozilla.com/wpush/v1/gAAAAA... 04-24 15:18:04.960 7015 7038 I GeckoConsole: Message sent 201 04-24 15:18:05.753 7015 9696 D GeckoPushGCM: Message received. Processing on background thread. 04-24 15:18:05.754 7015 7037 I GeckoPushService: Google Play Services GCM message received; delivering. ... 04-24 15:18:05.774 7015 7038 I Gecko : console.debug: PushService: 04-24 15:18:05.774 7015 7037 I GeckoPushService: Delivering dom/push message to Gecko! 04-24 15:18:05.777 7015 7038 I GeckoPush: console.debug: PushServiceAndroidGCM: 04-24 15:18:05.781 7015 7038 I GeckoPush: ReceivedPushMessage with data 04-24 15:18:05.782 7015 7038 I GeckoPush: Object 04-24 15:18:05.782 7015 7038 I GeckoPush: - channelID = c0ef2... 04-24 15:18:05.782 7015 7038 I GeckoPush: - con = aesgcm ... 04-24 15:18:05.783 7015 7038 I GeckoPush: console.debug: PushServiceAndroidGCM: 04-24 15:18:05.784 7015 7038 I GeckoConsole: Delivering message to main PushService: [object ArrayBuffer] ... ... 04-24 15:18:05.786 7015 7038 I Gecko : console.debug: PushService: 04-24 15:18:05.787 7015 7038 I GeckoConsole: receivedPushMessage() 04-24 15:18:05.787 7015 7038 I Gecko : receivedPushMessage() 04-24 15:18:05.788 7015 7038 I Gecko : console.debug: PushDB: 04-24 15:18:05.789 7015 7038 I GeckoConsole: getByKeyID() 04-24 15:18:05.789 7015 7038 I Gecko : getByKeyID() 04-24 15:18:05.795 7015 7038 I Gecko : console.debug: PushDB: 04-24 15:18:05.797 7015 7038 I GeckoConsole: getByKeyID: Got record [object Object] 04-24 15:18:05.810 7015 7038 I Gecko : console.debug: PushDB: 04-24 15:18:05.811 7015 7038 I GeckoConsole: update: Update successful c0ef2... ... 04-24 15:18:05.840 7015 7038 I Gecko : console.debug: PushService: 04-24 15:18:05.841 7015 7038 I GeckoConsole: notifyApp() https://jrconlin.github.io/Webpush_QA/ 04-24 15:18:05.841 7015 7038 I Gecko : notifyApp() 04-24 15:18:05.841 7015 7038 I Gecko : https://jrconlin.github.io/Webpush_QA/ 04-24 15:18:05.848 7015 7038 I GeckoConsole: **** Recv'd a push message:: {"isTrusted":true} 04-24 15:18:05.850 7015 7038 I GeckoConsole: Service worker just got: Amidst the mists and coldest frosts, I ... 04-24 15:18:05.853 7015 7038 I GeckoConsole: Service worker found clients {} 04-24 15:18:05.854 7015 7038 I GeckoConsole: Service worker sending to client... [object WindowClient] 04-24 15:18:05.857 7015 7038 I GeckoConsole: Service Worker sent: {"type":"content","content":"Amidst the mists ... 04-24 15:18:08.033 527 32517 E ResourceManagerService: Rejected removeResource call with invalid pid. 04-24 15:18:05.865 7015 7015 D GeckoToolbar: onTabChanged: LOCATION_CHANGE

Date cuenta que tienes un poco más de información aquí, incluyendo mensajes indicando que GCM recibió el mensaje y transmitido a Gecko. Puede que los mensajes de log hayan sido borrados o comprimidos sin espacios para la publicación, pero esto puede ayudar a aislar si el problema está en tu aplicación o en la red.

Conclusión

Trabajar con Push es gratificante, pero recuerda que es una tecnología nueva. Esto significa que las cosas pueden cambiar, y que puede haber elementos ásperos para tener en cuenta. Como siempre, apreciamos los bugs cuando los encuentres y sugerencias en como hacer las cosas más fáciles. Puedes encontrarnos en irc.mozilla.org en el canal #push si tienes preguntas.

Categorías: Mozilla Hispano
Subscribe to Proyecto NAVE agregador