Mandamiento tercero, no cargaré JavaScript sin revisarlo primero | Oloblogger Allá por el mes de Diciembre y concretamente el día 28 , publiqué un artículo sobre cómo construir un Índice por categorías en formato acord...

1 de abril de 2015

Mandamiento tercero, no cargaré JavaScript sin revisarlo primero

Allá por el mes de Diciembre y concretamente el día 28, publiqué un artículo sobre cómo construir un Índice por categorías en formato acordeón.

La intención inicial era la de siempre, mostrar cómo hacer determinada cosa para que pudiera usarla aquel que la necesitara, pero en esta ocasión había un segundo motivo, uno algo más malvado... pero poco.

Hace tiempo que quería hablar sobre esto pero prefería hacerlo, como es habitual, con una demo en vivo. Espero que no se me haya ido la mano esta vez con dicha demo, porque posiblemente esté instalada en más de uno de vuestros sitios, los mismos que están ahora maldiciendo por todo. Sí, me pitan los oídos... lo noto.

Inocentada
Imagen: Nukamari

La cuestión es muy simple pero pienso que muchos la obviáis seguramente por desconocimiento y es que, como reza del título de esta entrada, no deberíamos usar JavaScript ajeno sin estar más o menos seguros de que el código hace lo que promete que va a hacer. Ni más, ni menos.


Cuando alguien nos pasa un código determinado en el modo en que solemos hacer en Oloblogger, esto es ofreciéndolo completo para que cada uno se lo instale, es relativamente fácil echar un vistazo y, aún sin saber mucho, deducir que no hay ninguna cosa rara.

Pero para el caso de que se nos ofrezca mediante un enlace a un fichero alojado en algún lugar externo, más o menos así...

<link href="https://googledrive.com/host/0B3b6MFUtZc42bTdJR2JHNkJqOVE/bloggerlabeltoc.css" rel="stylesheet" type="text/css"/>

...como mínimo deberíamos acceder al fichero para ver su contenido e igualmente echar un vistazo intentando ratificar que es trigo limpio.

En el ejemplo habría que ir a https://googledrive.com/host/0B3b6MFUtZc42bTdJR2JHNkJqOVE/bloggerlabeltoc.css y comprobaríamos que es un inofensivo código CSS. Todos los ficheros se pueden ver si se conoce su dirección y da igual que sea CSS, una imagen o como en este caso un .js.


Pero esto no es suficiente, porque al estar alojado fuera de vuestro control, el propietario puede añadir o quitar código a ese fichero a discreción y si bien inicialmente la cosa puede ser inofensiva, un buen día podría volverse chunga.

Las cosas raras que mencionaba antes son fáciles de incluir en un fichero JavaScript y como por pereza o desconocimiento, si me pasan una línea para copiar y pegar que carga ya todo ¿para qué me voy a poner a copiar un tocho largo para el que además tendré que buscar el sitio correcto en mi plantilla?, pues también nosotros lo estamos poniendo muy fácil.

Ahí nos pueden colar publicidad (que quizás vean todos menos nosotros), algún código malicioso que joda la página o vaya usted a saber qué cosa que no nos convenga.

En mi caso incluí desde el principio precisamente en el .js, un simple aviso que se activó hoy 1 de Abril de 2015 -aprovechando que era el April fool's day- y que para vuestra fortuna, sólo bloquea la página dónde esté puesto ese código para índice que facilité. Si lo hubiera construído para ponerlo en la plantilla en lugar de en una página concreta, a ver quién iba a caer en la cuenta de que lo que está bloqueando su sitio por completo era aquello que puso tres meses antes.

Además comprimí el código para que no se pudiera "leer" ni accediendo al fichero. Normalmente esto se hace para que ocupe menos, aunque a veces el motivo es para que nadie copie la idea. En otras muchas ocasiones es porque incluye un enlace al sitio del creador y así se obtiene una muesca más para el PageRank. Si está comprimido no lo podréis quitar precisamente por esa ilegibilidad que comenté antes.


En fin, que la moraleja de todo esto es que del JavaScript que encontréis por aquí y por allá, sólo debéis poner en vuestro blog aquel del que estáis seguros que es fiable porque hace sólo lo que debe hacer.

Si el fichero está alojado en otro sitio como mínimo echad un vistazo, pero lo ideal es que lo alojéis bajo vuestro control; primero por si desaparece del hosting original, pero sobre todo, para que no os lo modifiquen a placer sin que os enteréis.

Si no os apañáis bien con sitios dónde poder alojar JavaScript siempre podéis ponerlo en vuestra plantilla.


Bueno y lo más importante para algunos. Para poder usar el índice de marras sin que os salga el aviso que bloquea la página, simplemente buscar la dirección https://googledrive.com/host/0B3b6MFUtZc42bTdJR2JHNkJqOVE/bloggerlabeltocmin.js que forma parte de ese código y quitarle las letras "min".

Y lo mismo si tenéis este otro fichero que publiqué posteriormente cuando Google Drive se hartó de servirlo a demasiada gente al mismo tiempo:
https://sites.google.com/site/acholoblogger/ficheros/bloggerlabeltocmin.js

Y si fuistes de los últimos que usó http://yourjavascript.com/9952181135/bloggerlabeltocmin.js, entonces tu nueva dirección será http://yourjavascript.com/5321335181/bloggerlabeltoc.js.


Eso hará que en lugar de tirar del fichero chungo (bloggerlabeltocmin.js) tiréis del que no mete nada extra (bloggerlabeltoc.js).

O mejor, como ese está ya sin comprimir, también lo podéis poner directamente en vuestra página-índice en lugar de la línea que lo carga desde YourJavascript.com. Será lo mejor porque como habéis visto he tenido que cambiar la dirección hasta tres veces porque los hostings gratuitos se cansaban de que muchos tiráramos del mismo fichero ;)

<script type="text/javascript">//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(a){function b(){if("entry"in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category"in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2()}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc2(){var a=0;var b=0;document.write('<ul class="bsitemap">');while(b<postTitle.length){temp1=postLabels[b];document.write('<li><a href="javascript:void();">'+temp1+'</a><ul>');firsti=a;do{document.write('<li>');document.write('<a class="btitulo" href="'+postUrl[a]+'">'+postTitle[a]);if(postRecent[a]==true){document.write(' - <span class="bnuevo">Nuevo</span>')}document.write('</a></li>');a=a+1}while(postLabels[a]==temp1);b=a;document.write('</ul></li>');sortPosts2(firsti,a);if(b>postTitle.length){break}}document.write('</ul>')}$(document).ready(function(){$('ul.bsitemap > li:has(ul)').addClass('desplegable');$('ul.bsitemap > li a').click(function(){var comprobar=$(this).next();$('ul.bsitemap li').removeClass('activa');$(this).closest('li').addClass('activa');if((comprobar.is('ul'))&&(comprobar.is(':visible'))){$(this).closest('li').removeClass('activa');comprobar.slideUp('normal')}if((comprobar.is('ul'))&&(!comprobar.is(':visible'))){$('ul.bsitemap ul:visible').slideUp('normal');comprobar.slideDown('normal')}})});//]]></script>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

43 comentarios :

  1. Buena lección, solo que al quitarle la frase min no funcionaba, lo que he hecho a sido copiar el codigo completo en la entrada y si funciona, esperemos que no tengamos otra "sorpresa". Gracias por todo.

    ResponderEliminar
    Respuestas
    1. No funcionaba posiblemente por lo que comenté de que de Drive y Google Sites se hartaron de servirlos para tanta gente. Posiblemente eso fue lo que salvó a más de uno ;)
      Y no, no hay más sorpresas de momento con este asunto, pero no dudes de que si se me ocurre otro ejemplo en el que venga bien usar algo así, lo haré... de la misma inocua manera que ahora, por supuesto :)

      Eliminar
  2. :-) ... como dije en su día ... muy buena idea !!!

    ... y recuerda quien te lo detecto :-)))

    Es lo primero que aprendí hace unos años ... No utilizar JavaScript ofuscado.

    Saludos ;-)

    ResponderEliminar
    Respuestas
    1. Si Ymmot, recuerdo que fuiste tú el único que comentó haber visto el "truco". Gracias por guardar el secreto ;)

      Eliminar
  3. jo jo jo jo

    La letra con sangre entra, o en este caso, tras la corná se aprende a guardar distancias

    Buena lección anti C&P

    ResponderEliminar
    Respuestas
    1. Pues el post original sigue en su sitio, pero claro, ahora ya saltará el aviso nada más ponerlo.

      Eliminar
  4. O.O Me he salvado porque solo probe el gadget un ratin. Pero tuve que abrir el Script para cambiar el "Nuevo" por "New" pero no entendía la ultima parte: - -La|pista|fue|publicado|un|Diciembre|la|numChars|hoy|Abril|Si|quieres|arreglar|esto|u00e1sate|por|no|enlazar|esta|entrada|Oloblogger. Al menos ya sé para que era.

    ResponderEliminar
    Respuestas
    1. Tampoco fue nada grave Balthazar, sólo un aviso de que se venga aquí a cambiar el código por el bueno. Precisamente ese texto es parte de él, pero al comprimir el código todo se reordena de otra manera.

      Eliminar
    2. xD Lo decía porque me logre salvar del April 's Fool. Pero estuvo bueno, no lo vi venir.

      Eliminar
  5. Muy buena Oloman!, tengo una consulta, ¿cómo se comprime un javascript?, hay alguna herramienta para esto?, saludos!

    ResponderEliminar
    Respuestas
    1. Hay diversas herramientas online. Yo suelo usar esta.
      La opción normal reduce simplemente el peso del código eliminando espacios en blanco y saltos de línea. La opción Base64 lo codifica y reduce todavía más, pero no siempre sirve.

      Eliminar
  6. jaja excelente forma de enseñar. He aprendido la lección. Gracias como siempre Olo.

    ResponderEliminar
  7. Menudo susto Oloma... muy buena lección si señor, pero creo que algunos no sabremos poner en practica, por lo que me deja algo preocupada y pienso en dejar de usar estos códigos... yo siempre pienso que todo el mundo es bueno y así me va jajaja ahora ya no se que hacer...

    ResponderEliminar
  8. Me refiero a que he intentado usar la ultima opción que nos das y haciendo gala de mi condición de torpe no me ha salido bien... jajaja que desatre, gracias de todas formas!

    ResponderEliminar
  9. Uffff!!!! Tenía tu código en cuatro o cinco blogs de aula y mis alumnos ....¡me han pillado!....

    He intentado usar tu nuevo código sin comprimir, pegándolo como html en una entrada de blogger....pero no se cómo hacerlo funcionar.
    El menú me ayuda muchísimo para encontrar todo en el blog, y sobre todo a mis alumnos....¿Me puedes decir cómo arreglarlo?

    Muchas gracias por compartir todo esto.

    ResponderEliminar
  10. No entiendo cómo hacerlo funcionar.....y es muy interesante.

    ResponderEliminar
    Respuestas
    1. Lo siento Francisco :s

      A ver... A partir de lo que pusiste siguiendo la entrada original a la que hago referencia al principio de esta entrada, quita la segunda línea...
      <script src="http://yourjavascript.com/9952181135/bloggerlabeltocmin.js"></script> (u otro .js)
      ...y guardas la página. Luego edita la plantilla y justo antes del </head> pega todo el código del "Aviso" que hay sobre fondo color crema,

      De todas maneras, si no te sale a la primera, mientras pruebas lo anterior simplemente cambia la dirección del fichero .js (según el que usaste) de la manera que explico en el recuadro "Aviso".

      Eliminar
  11. He de reconocer que lo puse, vi que funcionó y he estado semanas sin acceder al blog hasta hoy y casi me da un infarto: ¿¿¡¡Una bomba lógica!!?? Lo cierto es que quite el antiguo pensando que éste estaria operativo...entiendo lo que querias demostrar lo dejare en borrador de momento hasta cuando tenga un rato para cambiarlo. Lo cierto es que solo he hecho cambios que leo como hacerlos en tu blog no soy de isntalar cualquier cosa sin mas. Pero nunca se sabe si en un futuro podria picarme con alguna carga de javascript peligrosa y confiarme :)

    ResponderEliminar
  12. te pasaste, una bomba para las y los incautos!! gracias por la lección

    ResponderEliminar
  13. Vaya susto que me hiciste pasar, pero una gran lección, gracias, voy a revisar mi blog por si las dudas Para la próxima voy a ser mas cautelosa, saludos

    ResponderEliminar
  14. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  15. gracias por el aviso...... (menudo susto)

    ResponderEliminar
  16. Muchas gracias, aprendo mucho en tu blog
    Saludos

    ResponderEliminar
  17. Muchas gracias Oloman, como siempre un auténtico crack con éstas cosas.

    Una preguntilla, se podría hacer un índice alfabético, que no fuera por categorías ni etiquetas, si no alfabético sólamente, gracias

    ResponderEliminar
    Respuestas
    1. Sí Gamerbyg. Hay alguno por ahí en este mismo blog, aunque lo publiqué hace tiempo. Utiliza el buscador y seguro que lo encuentras.
      Si no te sirve ese en concreto puedes ver en otros sitios. Hay bastantes gadgets para índices publicados.

      Eliminar
  18. Hola, estoy haciendo mi portafolio en blogger y este tipo de menú me iba a venir muy bien. Ahora entre la broma y la gracia no sé que es lo que hay que poner y lo que no y como arreglarlo, porque a mi no me aparece nada y ahora tengo miedo de haberme cargado el blog. Yo no soy programador. No sé porque no pones directamente bien el código. Así que bueno me toca ir deshaciendo mis pasos. Tenia buena pinta esta pagina de oloblogger pero no voy a volver a consultarte.

    ResponderEliminar
    Respuestas
    1. Lamento que te lo tomes así JD Miau. Sólo tendrías que haber leído el post completo y quizás entenderías cuál era su cometido.

      Y sobre qué es lo que hay que poner, también está escrito... justo al final. Por eso supongo que no lo leiste.

      Eliminar
  19. ay, madre, menudo susto, jajajajaja, muy buena forma de enseñar!!! gracias!!!

    ResponderEliminar
    Respuestas
    1. Estoy seguro de que hay un montón de personas a las que no se les va a olvidar esto nunca :D

      Eliminar
  20. es posible entonces que por ese motivo se me cierre la página de mi blog y se abra otra con publicidad??? , me refiero que quizás esté usando un JavaScript que hace que se abra una página de publicidad

    ResponderEliminar
  21. Sí, Jesús. Hay otras posibilidades pero casi seguro que es por eso.

    ResponderEliminar
  22. ¿ Y hay soluccion?, como puedo saber que javaScript me puede estar abriendo esa pagina de publicidad... Algo he intentado pero no doy con la soluccion... Per es que recientemente no he puesto nada y antes no me lo hacia y tampoco no me lo hace siempre, solo en algunas ocasiones en la que abro la pagina......Si hay solucion me puedes asesorar ya que es una gran molestia para mis lectores
    Un saludo y Gracias por todo

    ResponderEliminar
    Respuestas
    1. Eso de que sea intermitente es cosa de las cookies y a veces son tan listos esos scripts que al propio administrador del blog es al único que no le salta la publi para que no se de cuenta.

      Para saber qué te está provocando eso lo más efectivo es ir quitando uno a uno tus scripts y comprobar si continúa el problema. El que quede descartado como culpable, lo repones y sigues con el siguiente. Ve guardando los códigos en un bloc de notas para poder reponerlo fácil y las comprobaciones hazlas con el navegador en modo incógnito para que no te vincule la visita con cookies.

      Eliminar
  23. Hola... gracias por el susto aprendi de ello mas siendo mi primera vez buscando como poner un indice en mi blog jajajajaja pero no entendi como hacerlo funcionar con el nuevo codigo desplegado que tienes en este post, podrias ayudarme?
    gracias

    ResponderEliminar
    Respuestas
    1. Hola Dolores. Prueba mejor con este otro código que es más moderno y que además sirve para cuando hay más de 150 entradas publicadas. Además es inofensivo ;)

      Eliminar
  24. He encontrado todo el desarrollo excelente y el script es muy bueno. Quería consultarte sobre algunas cosas:

    1. Es posible que al clickar sobre la publicación en el menu desplegable se abra en otra pestaña?
    2. Reducir el numero de publicaciones con la marca "nuevo" o elegir la cantidad de publicaciones que la lleven?
    3. Sacar la viñeta de la publicación, la que tiene forma de circulo?

    ResponderEliminar
  25. Ya pude resolver todos los puntos excepto el 2. No encuentro donde es que se puede poner la cantidad de elementos nuevos que lo lleven.

    ResponderEliminar
  26. Tengo nuevos consultas:

    1. Qué lineas hay que editar para que el orden de las publicaciones del menu desplegable sea segun "datenewest".
    2. Como hacer que me muestre "NUEVO" en una cierta cantidad de post de cada etiqueta.

    Muchas gracias y disculpa la cantidad de comentarios seguidos, he estado casi todo el dia aprendiendo sobre esto!

    ResponderEliminar
    Respuestas
    1. Hola Claudio. Quizás en este otro código, en el que desarrollé más cosas, puedas encontrar lo que buscas. Hay incluso varias líneas anuladas con símbolos de comentarios que permiten ordenar los resultados de diferentes maneras. Y con respecto al "Nuevo", no se gestiona por número de posts nuevos, sino por fecha. Salen con la marca todos los que sean más recientes de X días.

      Eliminar
  27. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  28. Hola Buenas intentando reparar el indice de mi blogg me ha saltado la bomba logica que preparaste.
    El tema esta en que no consigo acceder al blogg y al codigo para repararlo.
    puedes orientarme?

    ResponderEliminar