Scripts "protege plantillas" parte II

plantillas blogger protegidas mediante javascript Este es un tema del que ya hable hace bastante tiempo y del que dije que no iba a seguir haciéndolo; pero ahora me encuentro ofuscado encabronado porque esta práctica esta literalmente rayando en el abuso.

Como es bien sabido existen muchas páginas que se dedican a vender plantillas para Blogger, algunas optan por ofrecer una versión de pago de cada ítem completamente funcional y una gratuita con una licencia limitada y además algunos de sus scripts principales cifrados para garantizar que en la práctica se cumplan las condiciones de dicha licencia; un poco cuestionable, no en su propósito pues es legitimo que protejan sus intereses, pero si en su aplicación pues algunas aplican la estrategia de forma bastante burda, usando scripts mal codificados que entorpecen la carga de un blog que utilice la plantilla así el usuario este cumpliendo a con las condiciones del contrato de licencia.

Que algún vendedor ofrezca la versión gratuita de alguna plantilla con algunas limitaciones es hasta cierto punto razonable; pero que hagan lo mismo en la versión de pago llegando hasta el punto de hacerla inutilizable en comparación con la versión gratuita de alguna plantilla de otro vendedor es un abuso y una completa estafa.

Mi molestia

Ahora llegamos al punto de por qué me encuentro tan inconforme y molesto con este asunto, hace algunos días decidí comprar una plantilla “premium” para Blogger en una de estas páginas, estaba implementando un proyecto para el que pensé dicho tema era perfecto estéticamente y me ahorraría valioso tiempo aprovechable en otros aspectos del proyecto que tanta atención me demandaba; dicha plantilla en lugar de ahorrarme tiempo y esfuerzo se convirtió en una autentica pesadilla pues casi el 70% del cuerpo del blog (incluso más de la mitad del css y el cuerpo de las entradas) estaba contenido dentro de un JavaScript que además estaba encriptado. Lo note apenas comencé la “instalación” de dicha plantilla pues no encontraba donde traducir algunos textos, el famoso “Read more” para ser más exacto; luego de buscar el texto en el código html me encuentro con un garabato como este:


javascript original con variables encriptadas

De inmediato me remití al vendedor (que no voy a mencionar aquí pues no me paga regalías por publicidad) lo que resulto en un ejercicio realmente inútil pues no conseguí ninguna solución por parte de este, ni mucho menos por parte de la plataforma que utiliza para vender, no me quedo más alternativa que volver a recurrir a la ingeniería inversa para poder hacer uso de aquello por lo que había pagado.

Como lo hice

Normalmente, para hacer estas cosas utilizo algunas herramientas que no voy a mencionar aquí, no por evitar que alguien más trate de hacer lo mismo, si no por qué existe una forma sencilla y satisfactoria de hacerlo usando Js Beautifier, una herramienta usada para formatear scripts y hacerlos un poco más entendibles; esta herramienta contiene unas interesantes opciones que sirven para limpiar un poco el código ofuscado y eliminar los famosos p.a.c.k.e.r.s que son precisamente las que se necesitan para estos casos.

Si bien en mi plantilla lo había hecho de la forma que ya conocía probé también este método que funciono realmente bien.

Lo primero que hice fue buscar los scripts que me complicaban la vida y analizarlos un poco.
 
variable encriptada en js beautifier

Pude notar que el código que se encontraba encriptado estaba dentro de una variable por lo que simplemente seleccione y dicha variable desde la palabra var hasta el corchete donde termina su contenido.

Pegue la porción de código en js beautifier y active las opciones de código ofuscado y p.a.c.k.e.r.s, después de esto procedí a ejecutarlo.

opciones para desofuscar javascript

El resultado no es precisamente lo mas claro del mundo pero al menos ya es texto y algo se puede hacer con el.

javascript ya un poco desofuscado

Reemplace en resultado que arrojo js beautifier en el script y guarde los cambios, al actualizar la página note que esta funcionaba exactamente igual que con el script original.

Después de eso simplemente volví a buscar el texto “read more” que esta vez si apareció por lo que simplemente lo reemplace y como dice el dicho "listo eucalipto", pude modificar los textos que me faltaban para traducir la plantilla.

Lo anterior también funciona para eliminar los créditos en esas plantillas que redirigen hacia la pagina del autor al cambiar los enlaces del footer, no voy a profundizar en eso ni mucho menos publicar el procedimiento exacto de como se hace, pero es muy facil solo leyendo un poco.

Para terminar simplemente hago una recomendación, en lo posible no compren plantillas de estos sitios a menos que garanticen que el código no tiene ninguna clase de encriptación en la versión de pago, de mi parte jamás pienso volver a pagar por una plantilla por muy elegante que luzca.

Como configurar un dominio usa.cc en Blogger

Este resumen no está disponible. Haz clic en este enlace para ver la entrada.

Mejoras al Formulario de contacto (HTML5 y PHP)

Desde hacia cierto tiempo que quería escribir este post, pues he recibido bastantes preguntas con respecto al formulario que publique hace ya algunos meses en una entrada y que es el mismo que tengo funcionando en el blog, pero que a lo largo del tiempo le he hecho algunas modificaciones, mas que todo simplificarlo.

¿Que diferencias tiene?

La única diferencia perceptible en cuanto a funcionamiento es que simplifique el proceso de validación de campos eliminando el script de validación y aprovechando la que viene incluida en HTML5, además de unas pocas mejoras en cuanto a css.

Lo primero que hay que hacer, es verificar que nuestra plantilla este hecha en HTML5 yendo a la edicion HTML de nuestra plantilla y ver el Doctype que tiene, si este es <!DOCTYPE html> esta hecha en HTML5 si no lo esta debemos agregarlo en la pagina estatica donde vamos a crear el formulario (es un poco chapucero pero si no se hace no funciona).
En caso de que la plantilla este hecha en HTML5 Podemos obviar el Doctype y agregar solamente lo que esta dentro de las etiquetas body.


<!DOCTYPE html>

<html>

  <head>

    <meta content="text/html; charset=windows-1252" http-equiv="content-type">

    <title>Contacto mt</title>

    <style type="text/css">

/*—————- algunos estilos css dentro de la pagina ————*/

input:focus, textarea:focus {

border-color: #33ccff;

background-color: #f9f9f9;

}

</style> </head>

  <body>

    <form action="url-del—archivo/contacto.php" method="post">

      <label for="name">Nombre Completo:<br>

        <input required="required" id="name" name="name" size="27" type="text">

      </label><br>

      <br>

      <label for="email">Correo Electrónico:<br>

        <input required="required" id="email" name="email" size="27" type="email">

      </label><br>

      <br>

      <label for="subject">Asunto:<br>

        <input required="required" id="subject" name="subject" size="27" type="text">

      </label><br>

      <br>

      <label for="message">Mensaje: <br>

        <textarea required="required" cols="30" id="message" name="message" rows="5"></textarea>

      </label><br>

      <br>

      <input name="submit" value="Enviar"

        type="submit"></form>

    

  </body>

</html>

La única diferencia con el código anterior es que los nombres de los campos están dentro de etiquetas label, por lo que adoptarían el estilo css de la plantilla y facilitaría también establecer reglas para crear los propios, además de que el campo de email esta marcado como tipo "email" lo que en HTML5 es suficiente para comprobar que las direcciones de correo que se introducen son validas lo mismo que required="required" en los campos obligatorios lo que es suficiente para comprobar que se diligencien.



El pequeño código CSS al comienzo es simplemente para resaltar el campo en el que se esta escribiendo, podemos agregarlo tal cual como esta arriba o directamente en la plantilla antes de </b: skin>


El archivo php es el mismo que se utilizo para el formulario anterior, solo le cambie la redirección por javascript por HTML.


<?php

@$name = addslashes($_POST['name']);

@$email = addslashes($_POST['email']);

@$subject = addslashes($_POST['subject']);

@$message = addslashes($_POST['message']);



$cabeceras = "From: $email\n" //El remitente

 . "Reply-To: $email\n"; //Dirección de respuesta

$asunto = "$subject"; //El asunto

$email_to = "email@dominio.com"; //El email

$contenido = "$name le ha enviado el siguiente mensaje:\n"

. "\n"

. "$message\n"

. "\n";



//Envia el mensaje

if (@mail($email_to, $asunto ,$contenido ,$cabeceras )) {

//Si el mensaje se envía muestra una confirmación

die("Muchas gracias, su mensaje fue enviado correctamente");

}else{

//Si el mensaje no se envía muestra el mensaje de error

die("Error: Su mensaje no pudo ser enviado, intente más tarde");

}

?>

El mensaje de confirmación y redirección

Simplemente cambiamos la linea die("Muchas gracias, su mensaje fue enviado correctamente"); por:

echo '<html>

<head>

  <meta http-equiv="Refresh"

 content="5;url=http://direccion del blog">

  <link href="http://direccion delblog/favicon.ico"

 rel="icon" type="image/x-icon">

</head>

<body>

<p style="text-align: center;"></p>

<p style="text-align: center;"><big

 style="font-weight: bold;"><big><big></big></big></big></p>

<p style="text-align: center;"><big

 style="font-weight: bold;"><big><big>Su mensaje

ha sido

enviado correctamente en breve nos pondremos en contacto con Ud.</big></big></big></p>

<div style="text-align: center;">

<p>Sera redireccionado a la

página principal en 5 segundos. En caso contrario puede regresar

haciendo <a href="http://direccion del blog">click

aquí</a></p>

</div>

</body>

</html>

';
Si queremos que redireccione también cuando hay un error con el mensaje, simplemente cambiamos la linea por el código anterior y cambiamos el texto "su mensaje ha sido enviado correctamente... " por "su mensaje no pudo ser enviado, intente mas tarde"

La forma mas facil de centrar Adsense

No soy un experto en cuanto a blogs se refiere, creo que no me consideraría uno ni siquiera cuando sea capaz de hacer plantillas desde cero con poco esfuerzo, pero ahora se muchas cosas que de haberlas sabido antes me hubiesen ahorrado mucho tiempo y dolores de cabeza, una de esas es alinear Adsense, lo hacia con códigos muy complicados de añadir, pudiéndose hacer fácilmente con CSS:

Para centrarlo en la barra lateral


.AdSense {
text-align:center;
}

Para centrarlo entre las entradas o el cuerpo del blog

.inline-ad {
text-align: center;
}

Para alinearlo a la izquierda o a la derecha, simplemente basta con cambiar center por left o right respectivamente.

Scripts "protege plantillas" en Blogger

Hacia mucho tiempo que no entraba a paginas de plantillas para Blogger pero últimamente estuve buscando una para un blog y encontré algunas bastante interesantes html5, diseño responsive, gratis y sobre todo bastante elegantes, cualquiera parecía ser la plantilla perfecta para lo que estaba planeando y hago énfasis en parecía ya que tuve algunos problemas al usarlas, debido a un sistema de «protección» que parece estar ahora de moda, pues lo encontré en la mayoría de las plantillas nuevas con que me tope.

No tengo nada en contra de que los autores busquen la forma de proteger sus derechos, pero usar un script que genera carga innecesaria para poner solamente el enlace en el footer, no me parece una opción razonable por lo que opte por eliminarlo y poner el link en el footer manualmente mientras dedicaba tiempo a probar la plantilla.

Nota: no pongo imágenes del blog o de las plantillas que probé, ni cualquier otra cosa por las que puedan identificarse o revelar la identidad de los autores, aunque sin hacer esto ultimo ya mas de uno estará molesto.

1. Instalo la plantilla y visualizo el blog, se ve como debería aunque mucho mas lento que en la demostración (20 segundos aproximadamente).
2. Trato de ver el código fuente con ctrl + u y este no aparece, muestra esto en su lugar:

en lugar del codigo


Si nos fijamos bien en la esquina superior izquierda aparece el logo de google drive, lo que me da una pista de los scripts que debo buscar en el código de la plantilla.


3. Busco script por script y voy descartando hasta quedarme con los sospechosos, encuentro un script con un nombre muy corto que casi pasa desapercibido, copio la url en el navegador y me doy cuenta que tiene una variable bastante larga (de 11 kb la sola variable) codificada (luego la logre descifrar con el convertidor de elhacker.net), que es lo que ralentiza la carga en el navegador pues este tiene que descargarla y después traducirla, después de esto la desactivo comentando el código, actualizo y automáticamente puedo notar 3 cosas: la carga del blog se agilizo, desapareció el enlace en el footer y ahora puedo ver el código.



4. Después de esto simplemente añadimos el link del autor en el footer, html muy simple.

Aunque técnicamente sea posible desactivar dichos scripts para dejar la plantilla mas usable, preferiría no hacerlo, de hecho en el blog para el que buscaba plantilla use otra provisionalmente mientras hago una propia, si el que hizo una plantilla no quiere que la usemos, pues demosle gusto.

Evitar que nos copien las imagenes con Inkscape

Hace algunos meses escribí un post sobre como evitar que nos copien las imágenes (o al menos hacerlo un poco mas complicado) dividiéndolas en varias partes con Gimp, ya que en ocasiones puede resultar molesto como cuando nos copian alguna publicación de carácter comercial haciendo que esta pierda efectividad.
No copiar esta imagen image/svg+xml Openclipart
Esta vez el turno le toco a Inkscape, o para ser mas exacto al estándar SVG, que es el que realiza el truco ya que los archivos SVG de Inkscape y otros programas de dibujo vectorial, son en si archivos XML que contienen toda la información de la imagen y son completamente compatibles con HTML por lo que se pueden integrar directamente en el código de nuestra publicación haciendo que sea mas complicado de copiar ya que solo se podría hacer copiando la porción de código correspondiente a la imagen y guardándola como un archivo con extensión svg.
Nota: Esto solo funciona con imágenes en formato vectorial, no con cualquier imagen en JPG, PNG o GIF a menos que las vectoricemos primero.
Lo primero que debemos hacer es abrir el archivo SVG con cualquier editor de texto.
Copiamos todo el código y lo pegamos donde lo vayamos a insertar, en caso de una entrada de un blog debemos pegarlo en la vista html, si es en la sidebar lo hacemos como un elemento html, etc.

No copiar esta tampoco image/svg+xml No copiar esta tampoco

Con esto le complicaremos la vida a quienes se dedican a copiar nuestras imágenes, pero también un poco a nosotros mismos ya que para alinear o cambiar el tamaño de las imágenes necesitamos saber HTML, por lo menos lo suficiente para trabajar con tablas y contenedores.