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.

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

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

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

• Google
• Facebook
• Twitter