Proteger entradas en Blogger


En esta época de modernidad, donde el acceso a Internet es prácticamente universal, suele ser muchísimo más práctico mantener los documentos y cierta información almacenada en Internet y tenerla al alcance de un browser. Pero, a veces una porción de esa información debería estar protegida de la vista de ciertas personas, ya bien sea porque no deben verla o porque no pueden...

Siempre he tenido unas entradas de este blog que no deben ser vistas por todo el mundo y que me encantaría tener publicadas pero protegidas de alguna manera (como los métodos de varias ilusiones, los cuales sería una grave afrenta publicar para el escrutinio de todos, iniciados o no iniciados), y Blogger no me ofrecía una opción válida para proteger ese contenido, entonces decidí ponerme a buscar y creo haber encontrado un método que me permite publicar contenido que sólo sea visible para quienes deban (en este caso, quienes tengan una contraseña específica).

TL;DR: ¿Quieres proteger una entrada de Blogger? Usa CYPHER.

Primero, sería totalmente grosero no reconocer el trabajo en el que me inspiré para poder proteger las entradas, y eso allí donde entra Vincent Cheung, quien en su Blog tiene un servicio para cifrar haciendo uso de librerías de JavaScript. El servicio es formidable, Vincent desarrolló su propia librería para ofrecer el cifrado y los prompts respectivos, y tiene una completísima página con instrucciones, de verdad vale la pena verlo. No obstante, no me terminó de encajar el tener que usar una librería de un tercero, no sé que otro contenido tenga y me parece irrespetuoso halar contenido de otros sitios no destinados para eso (con Github, GoogleCode o Cloudflare no tengo el dilema moral), así que, decidí publicar mi propio servicio de cifrado de texto, con unas librerías relativamente estándar.

LA IDEA

El concepto es sencillo, quiero publicar contenido que sea visible para cualquiera, pero que sólo sea entendible para quien yo quiera. Para esto voy a utilizar cifrado simétrico (si te interesa aprender, más información acá) en las entradas del Blog, y lo acompañaré con la maquinaria suficiente para que e pueda acceder a la información sin tener que depender de software o servicios de terceros, todas las herramientas estarán en el Blog.

LA RECETA

Habiendo dicho esto, manos a la obra. Procuraré ser tan específico que cualquiera pueda replicar el desarrollo y hacer uso el mismo en sus blogs o sitios web:

INGREDIENTES

Para que la idea sea sencilla de llevar a Internet es necesario que esté fundada sobre elementos que sean estándares y comunes a Internet, por eso se decidió usar:
  • JavaScript
  • HTML
  • CSS
  • AES
Y reusar varias cosas que están por ahí disponibles, la más importante: CRYPTOJS, una librería de JS que ofrece funciones de criptografía originalmente desarrollada en Google Code, y que ahora reside en CDNJ Cloudflare.

LAS FUNCIONES

Tanto para cifrar como para descifrar se hicieron dos funciones sencillas, sé que pueden mejorarse (p.ej. recibiendo el id de DOM como parámetro), pero para fines prácticos éstas funcionan acá.

Esas funciones simplemente toman el texto de un formulario (que por facilidad llamamos "InText") y la contraseña (llamada "passwordText") y las pasamos como parámetro a una funcion de JS ("CryptoJS.AES.encrypt") para cifrar el contenido con AES. Luego el texto resultado lo ponemos formateado en otro campo.

EL ESTILO

Para garantizar que el estilo de los formularios fuese consistente con el Blog, se hicieron unos CSS sencillos para los objetos:

LOS FORMULARIOS

Se hicieron formularios simples (con sus respectivos "fieldset" para que se vean organizados), para el usuario se renderiza un campo de entrada de texto y uno de salida. Este campo es usado tanto para cifrar como para descifrar, sólo es usar el botó adecuado.

CAMPOS ADICIONALES

En la pagina se desplegaron otro par de campos, uno para informar el código HTML cifrado que puede ser incluido en una página, y otro para probar este código. Además de un par de funciones y divs cosméticos que personalmente me agradan mucho =).

EL PLATO COMPLETO

Como resultado se publicó CYPHER, una página donde cualquiera puede cifrar texto (p.ej. un post de blogger) y obtener un código que se puede publicar en cualquier sitio, el cual publicará mediante JS un formulario que solicita un password para mostrar el contenido protegido. El código completo es el siguiente:


Y ¿CÓMO FUNCIONA PARA BLOGGER?

El funcionamiento para blogger es sencillo, sólo basta agregar el siguiente código a la entrada de Blogger:
Y luego seguir los siguientes pasos:
1- Ir al blog y crear una nueva entrada normalmente:

2- Seleccionar la edición de HTML y copiar el contenido:

3- Con esto ya tenemos el contenido a proteger.

4- Para crear la entrada protegida, se debe crear una nueva entrada:

5- Seleccionar la edición de HTML:

6- Copiar el código de entrada CYPHER:

7- Ingresar a CYPHER y colocar la contraseña y en el texto colocar el contenido copiado en el paso 2. y dar click en "Encrypt":

8- Copiar el texto resultante:

9- Volver al código copiado para la nueva entrada en el paso 6 y ubicar la etiqueta "":

10- Reemplazar esta etiqueta con el texto resultante del paso 8:

11- Publicar la entrada.


Al finalizar la entrada estará "vacía" y contará únicamente con un formulario para ingresar la clave. Si se ingresa la clave correcta, el formulario desplegará el contenido:

De lo contrario la página seguirá vacía:

Cabe señalar que la entrada puede contener una combinación de contenido protegido y sin proteger, solo basta con ubicar el código "CYPHER" apropiadamente.

Espero a alguien le resulte útil la herramienta, para mi fue un agradable paseo de ingenio. CYPHER quedará disponible en el menú lateral y en la URL http://www.sheut.xyz/p/cypher.html.

Comentarios