Proteger un contenido... pero poco | Oloblogger Como respuesta a una consulta, a continuación se explica cómo proteger parte del contenido de una pá...

4 de octubre de 2009

Proteger un contenido... pero poco

Como respuesta a una consulta, a continuación se explica cómo proteger parte del contenido de una página o incluso una página entera. Que quede claro antes de empezar, que el nivel de seguridad de estos sistemas es cero. Cualquiera con unos pocos conocimientos podría averiguar la contraseña sin ningún problema. Por tanto, sólo debería usarse como divertimento o para datos sobre los que no preocupe su difusión. Los únicos sistemas seguros (casi) del todo son los que utilizan bases de datos para almacenar los idem, pero hoy por hoy, la mayoría de nosotros no tenemos acceso a manejar dichas bases de datos.

Una primera opción sería introducir este script en nuestra plantilla, antes del </head>:

<!-- Ocultar y mostrar con password -->
<style type='text/css'>
.ver {display:block;}
.ocultar {display:none;}
</style>
<script type='text/javascript'>
function desplegar(identificacion){
var menu = document.getElementById(identificacion);
if(document.formclave.clave.value == &#39;PASSWORD&#39;)
{if(menu.className == &quot;ocultar&quot;)
{menu.className = &quot;ver&quot;;}
else {window.alert(&quot;Ya está todo el contenido a la vista&quot;);}
}
else {window.alert(&quot;Contraseña errónea&quot;);}
}
</script>

A continuación sólo sería necesario introducir esta estructura de código en una entrada para que una parte de su contenido quede oculto hasta que se introduzca la contraseña correcta (en mayúsculas lo que habría que personalizar):

Para acceder a la información, introduzca la contraseña:
<form name="formclave"><input type="text" name="clave"><input type="button" value="Enviar" name="enviar" onclick="desplegar(IDENTIFICATIVO_UNICO)"></form>
<div class="ocultar" id="IDENTIFICATIVO_UNICO">AQUI EL CONTENIDO OCULTO DE LA PAGINA</div>

El script y su estilo sólo hace falta instalarlo una vez. Luego, cada vez que se quiera proteger una parte de contenido, habrá que incluir esta segunda parte de código. Hay que tener cuidado con que los pares IDENTIFICATIVO_UNICO sean iguales entre sí pero distintos con respecto a otros pares.

Para cambiar la contraseña sólo habría que cambiarla en el script (PASSWORD) y esto ya os da una pista de lo fácil que sería ver el código fuente y averiguar la susodicha, pero el caso es que ni eso haría falta: Botón derecho, ver código fuente y buscar la información oculta bastaría para verla sin preocuparnos de buscar la contraseña. Probemos aquí el sistema con la palabra "hola"


Introduzca la clave

ESTE ES EL CONTENIDO OCULTO DE ESTA PAGINA


Si preferís no trastear la plantilla porque sólo utilizareis esto para ocasiones puntuales, también se puede poner directamente el código en la entrada. En este caso, hay que hacer unas pequeñas modificaciones con las comillas y escribir toda la parte de estilo y script en la misma línea, sin saltos de línea, tal que así:

<style type="text/css">.ver {display:block;}.ocultar {display:none;}</style>
<script type="text/javascript">function desplegar(identificacion){var menu = document.getElementById(identificacion);if(document.formclave.clave.value == "PASSWORD"){if(menu.className == "ocultar"){menu.className = "ver";}else {window.alert("Ya está todo el contenido a la vista");}}else {window.alert("Contraseña errónea");}}</script>

<div align="center">Introduzca la clave
<form name="formclave"><input name="clave" type="text"><input value="Enviar" name="enviar" onclick="desplegar(IDENTIFICATIVO_UNICO)" type="button"></form></div>

<div class="ocultar" id="IDENTIFICATIVO_UNICO" align="center">ESTE ES EL CONTENIDO OCULTO DE ESTA PAGINA</div>



Ahora otra variante sin contraseña escrita en ningún sitio y sin poder ver el contenido en la página en la que se está. Tiene el inconveniente de que la información es pública para todo aquel que conozca la dirección de la página, ya que precisamente la contraseña es la dirección de dicha página o mejor dicho, una parte de esa dirección.

En este caso, lo primero que tenemos que hacer es crear la página y publicarla (la palabra lo dice, será pública). En Blogger, para que no nos salga de las primeras, deberíamos ponerle una fecha atrasada. Para que se vaya lo más lejos posible, mirad vuestra primera entrada y ponerle esa misma fecha.

Ahora comprobamos la direccion de la página. En Blogger la cosa será algo así:
http://NOMBREBLOG.blogspot.com/AÑO/MES/PALABRA1-PALABRA2-PALABRA3-PALABRA4.html

Elegimos de esa dirección la palabra que más nos guste y que será la que sirva de contraseña. Para el ejemplo cogeremos PALABRA3. Ahora se trata de escribir en el sitio oportuno la dirección entrecomillada, pero sustituyendo esa para de la dirección (contenido) por la variable que captura el formulario. Se reproduce el código en formato entrada:

<script type="text/javascript">function acceder(){window.location = "http://NOMBREBLOG.blogspot.com/AÑO/MES/PALABRA1-PALABRA2-" + document.formclave.clave.value + "-PALABRA4.html";}</script>
<div align="center">Introduzca la clave
<form name="formclave"><input name="clave" type="text"><input value="Enviar" name="enviar" onclick="acceder();" type="button"></form></div>

Una prueba para este otro sistema (password="contenido"):

Introduzca la clave

Se puede coger una sola palabra o cualquier otro trozo. Podría ser incluso toda la parte final (palabra1-palabra2-palabra3-palabra4), pero siempre sustituyendo la parte que sirve como contraseña por document.formclave.clave.value.

¿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

42 comentarios :

  1. Oloman, lo único que falla en estos trucos es que en el feed mientras leia este post las imágenes "ocultas" se veian claramente. He visto otros tutoriales en los que ocurre lo mismo. Como bien dices no son infalibles. Un saludo

    ResponderEliminar
  2. No es lo único que falla. No sólo no son infalibles, es que como ya dije, seguridad cero. Lo que ocurre es que no caí en los feeds. De todas formas he echado un vistazo y en los míos no se ve el contenido oculto ¿qué lector usas Roudy?

    ResponderEliminar
  3. Utilizo Google Reader. La imagen que vi sigue a continuación de: Probemos aquí el sistema con la palabra "hola". La del humo con fondo negro.

    ResponderEliminar
  4. Una entrada interesante. Imagino que depende para qué tipo de blogs puede ser muy práctica.
    Saludos

    ResponderEliminar
  5. Oloman hice una Captura de pantalla del feed.Sin escribir la contraseña tal como se ve apenas abre. Creo que una vez JMiur explicaba una forma de ocultar algo en una entrada y en el feed se veia. Aunque me parece lógico, una cosa es la plantilla y otra el feed. No deja de ser extraño el asunto.

    ResponderEliminar
  6. Una vez pensé en este artilugio, pero pensaba que era imposible de realizar.

    Muy Bueno el post

    ResponderEliminar
  7. Hi Oloman,

    Un truco muy curioso,

    Me gustaría saber si has sacando las texturas que utilizas en tu blog de alguna web.

    Grácias

    ResponderEliminar
  8. Roudy, vista la imagen. Está claro que depende del lector que se use, se ve o no. En el feed directo de FeedBurner que se puede ver en el navegador, permanece oculto. Y lo más sorprendente para mí ¡funciona el formulario!

    Joselop44, efectivamente. Depende para qué puede resultar interesante utilizarlo o una metedura de pata.

    Mercier, si lo piensas utilizar, ya sabes que sólo sería como un juego y que la informacion oculta no quedaría a buen recauda en ninguna forma.

    Anónimo, si te refieres a los gráficos que forman el blog, las imágenes que forman el cuaderno y las notas, venían prácticamente igual en la plantilla original. Tienen sus dimensiones cambiadas, los tonos, algo precisamente la textura y añadidos a mano cosas como los efectos de sombra para no utilizar png.
    Los fondos de cabecera, laterales y pie, están realizado a base de fotomontaje de otros pequeños elementos encontrados no recuerdo dónde y luego dibujando lo que es la "textura". Si buscas algo similar, quizás puedes empezar por esta entrada.

    ResponderEliminar
  9. Muy bueno , claro todo depende a lo que va destuinado el blog , yo como que lo dejo cómo está :P , saludos.

    ResponderEliminar
  10. Hola, interesante articulo y buen blog, es mi primera impresion. Continua asi.

    Busco afiliacion de blog's o amistad. Interesados visitar www.a-expresion.blogspot.com

    ResponderEliminar
  11. Hola Oloman, yo otra vez:)

    Mira, siguiendo tu post sobre configurar la fecha de cada entrada, la segunda parte, instalé ese tipo de diseño en mi blog.
    Y me preguntaba cómo en la página principal ( en los sumários ) poner un diseño diferente al que saldría al pinchar la entrada, como tienes tu en tu blog ( en los sumários la cinta adhesiva i en la entrada la etiqueta )

    Grácias

    ResponderEliminar
  12. Pau, échale un vistazo a la entrada sobre el uso de condicionales. Una vez entendido, es fácil poner una condición para que si estamos en la página inicio o no estamos en un post, algunas cosas se muestren y otras no.

    ResponderEliminar
  13. nunca voy a entender los del copyright. quieren que les hagas publico y hacerles propagandas pero no quieren que lo publiques?

    ResponderEliminar
  14. Hola!!!!!
    Gracias por pasar por mi humilde casa, es que tienes tan linda decoración, que siempre me dio no se que plasmar mis pisadas aquí, pasaba en puntita de pie…..te felicito, por el primer puesto y por el tercero en la general, creo que sos unos de los favoritos junto a Deprisa para el jurado.

    Como me gustaría estar el 22/10 brindando con ustedes, jijiji
    Un abrazo de oso.

    ResponderEliminar
  15. Claro que soy manly de dama de agua, eso sí, esta vez dejo ver mi faceta más guerrera. Un saludo y te felicito por el tu gran blog.

    ResponderEliminar
  16. Yo tampoco lo entiendo, Rumanos en España. Te aseguro que no lo entiendo ;)

    Je, je. Eres muy zalamera Común. Mi casa no está recién fregada, por lo que se puede pisar sin miedo a dejar huellas. Pasa cuando quieras.

    Manly, no está en tu perfil ese blog, por eso dudaba. Quizás ya lo hubiera visto anteriormente, pero esta basura de memoria mía me engaña constantemente. Un saludo.

    ResponderEliminar
  17. gracias por tu respuesta, como es proteger sin proteger de momento creo que está mas seguro como está el blog, te parece?

    ResponderEliminar
  18. Sólo permitiendo lectores invitados, es hoy por hoy la forma más segura con la que puedes lograr proteger tu contenido. Estas opciones son para entretenimiento y pensé que por el carácter de tu blog, quizás te podrían venir bien.

    Lo que a tí te parece seguro que es lo correcto, porque nadie mejor que tú sabe lo que quieres.

    Saludos Luz

    ResponderEliminar
  19. Hola Oloman

    Queria preguntarte si depronto este metodo es incompatible con alguna libreria, me refiero a Scriptaculous o jQuery etc etc, es que yo utilizo una de estas librerias... pero fijate que al insertar correctamente este metodo que aqui explicas pss que crees! no me funciona y el contenido oculto no lo muestra...

    ¿Oloman me podrias hechar una manito?

    Te lo Agradeceria! ;)

    ResponderEliminar
  20. El primer contenido oculto de prueba de este post esta hecho precisamente con scriptaculous, por lo que te puedo confirmar que no hay ningún tipo de incompatibilidad. Lo normal es que hayas puesto algo de más o de menos, Circulo W.H.. Repasa tu código.

    ResponderEliminar
  21. mmm ya veo!...
    Ahi puede estar el problema, en mi blog utilizo solo JQuery, y le codigo tuyo lo repase y lo repase y no le encontré diferencia, y pss las librerias no las he combinado, la verdad es que me tocaria modificar unas cosas para lograr que las dos librerias juntas funcionen.
    ¿¿ Y por casualidad no sabes otro metodo seguro de ocultar con password algun contenido que utilice JQuery??
    La verdad lo necesito para un blog privado y en este momento tengo otro script que no me recomendaste en tu post de Cookies y del que me hiciste dudar respecto a la seguridad!....

    Agradezco por adelanto cualquier ayuda! ;)

    ResponderEliminar
  22. No Circulo W.H. No conozco ningún método seguro que funcione con JavaScript y te recuerdo que tanto jQuery, como Scriptaculous son eso, librerías JavaScript.

    Para un sistema 100% seguro necesitas tener una base de datos propia (con SQL, por ejemplo), cosa que Blogger no tiene.

    ResponderEliminar
  23. Saludos Oloman, tengo una pregunta, como puedo agregar otro campo al sistema de (password="contenido"), te lo pregunto por que lo quiero para llamar ciertas paginas que cambian algunos caracteres en la url. Ejemplo: http://www.pagina.com/aquiuncodigo&post=aquiotrocodigo&post=aquielultimocodigo.html osea te lo pregunto por que el que tienes aqui lo utilizo actualmente y me funciona de maravilla... Pero necesitaba otro con 4 campos y ya seria un formulario mas complejo y no se como podria crearlo la neta soy pésimo en esto. Me Ayudas por favor?... Gracias de antemano oloman...

    ResponderEliminar
    Respuestas
    1. Una chapucilla...
      En lugar de un solo INPUT haces los que necesites, cada uno con distinto NAME (clave, clave1, clave2,etc) y sólo al último le incorporas el ONCLICK.
      Luego en la parte primera del script formateas esta parte para que te lea todas las palabras y las sume al resto de la dirección:
      window.location = "http://NOMBREBLOG.blogspot.com/AÑO/MES/PALABRA1-PALABRA2" document.formclave.clave.value + "-" + document.formclave.clave2.value + "-" + document.formclave.clave3.value;

      Eliminar
    2. Gracias Oloman, me sirvió a la perfección... Saludos!...

      Eliminar
    3. Me encantan las chapuzas que funcionan :)

      Eliminar
    4. Hola Oloman
      Nuevamente estoy aqui incomodandote con esta chapuza, ahora no quiere funcionarme luego de varios intentos para que el código quedara ajustado.

      Hice una página para que lograras decirme como podría llegar a ella, y es que Blogger tiene en sus URL de cada entrada lo siguiente: /año/mes/entrada.html y en este caso necesito crear el formulario que tenga 3 cuadros, que en el primer pida el año, en el otro el mes y en el ultimo la entrada.

      La entrada que cree para pruebas y a la que quiero llegar es la siquiente http://puntosaquarella.circulowh.com.co/2014/06/0010.html
      y este es el código que estoy usando y no funciona: http://localhostcwh.blogspot.com/p/codigo-que-no-funciona.html
      y así se ve http://localhostcwh.blogspot.com/p/formulario-de-prueba.html

      Oloman te agradezco mucho, como siempre seguiré chekando a menudo tu blog. Un abrazo.

      Eliminar
    5. "Es increíble ver que con solo un puntito que te falte, se hecha a perder todo el script"...

      ¡¡¡¡ LO LOGRÉ OLOMAN !!!!

      Me faltaba tan solo un signo de + que sin darme cuenta eliminé, Gracias por tus maravillosas ideas, seguiré al pendiente de tus nuevos post, un abrazo!

      Eliminar
    6. De nada Joan. Tú lo solucionaste ;)

      Eliminar
  24. ¡Saludos Oloman!

    He estado aprendiendo un poquito de PHP, porque quería hacerme un hosting para poner artículos protegidos por una contraseña, que se genera en esta web http://goo.gl/QKAZZG y cambia cada hora al acceder automáticamente...

    El caso es que, yo quería usar un hosting, pero, leí luego que los hosting gratuitos se caen con más de 10 usuarios a la vez conectados, y me quedé con cara de «Ahhh!!! DX<

    Por eso para evitar este problema, no me queda más remedio que poner los artículos en Blogger que da todo gratis e ilimitado: ¡Alabado sea Google!

    He leído en varias web, que se puede usar PHP mediante Javascript, pero sólo ponen ejemplos de cómo tomar la IP y ese tipo de cosas. La clave generada se guarda en esta URL: http://goo.gl/ket1KB

    Aquí dejo la plantilla que tenía preparada para los artículos: https://docs.google.com/file/d/0B70FyI2avUKbUWdFSVFWYzVPblU

    ¿Se podría aplicar este código con Javascript o hacer referencia a él desde Blogger para evitar que se sature el hosting gratuito?

    --------------------

    <?php
    $url="URL DE LA CONTRASEÑA";
    $password = file_get_contents($url);
    if (isset($_POST["password"]) && ($_POST["password"]=="$password")) {
    ?>
    <!-- HTML OCULTO -->

    ... Contenido ...

    <!-- FIN DEL HTML OCULTO -->
    <?php
    }
    else
    {
    if (isset($_POST['password']) || $password == "") {
    print "<p class=\"bordertext\" align=\"center\"><font color=\"red\"><b>Contrase?a incorrecta</b><br>Por favor, introduce la contrase?a correcta</font></p>";}
    print "<form method=\"post\"><p align=\"center\">Escribe aqu? la contrase?a para poder ver el contenido:<br><br>";
    print "<input id=\"enterpass\" name=\"password\" type=\"password\" size=\"25\" maxlength=\"20\"><br><br><input id=\"Accessbutton\" value=\"Acceder\" type=\"submit\"></p></form>";
    }
    ?>

    --------------------

    ¡Muchas Gracias por tu atención! Saludos ;)

    ResponderEliminar
    Respuestas
    1. Hola Klaus. Se puede usar PHP en Blogger pero al final necesitas un hosting dónde alojar ese PHP.

      Si tu problema es que los servicios gratuitos no soportan más de determinado número de usuarios, no lo vas a poder solucionar de ninguna manera. Sería posible meter todo desde Blogger pero finalmente habría que llamar (leer) ese PHP alojado en otro servidor. Cada vez que alguien lo usara en Blogger se haría una petición al otro servidor y a fin de cuentas, 1 peticion=1 usuario ¿Se entiende la cosa? El problema seguiría siendo el mismo.

      Si quieres usar PHP de manera ilimitada tendrás que contratar un hosting :(

      Eliminar
    2. Gracias por tu respuesta.
      Estaba un poco confundido y pensé que sería Blogger el que se conectaría al servidor solicitando el PHP, de modo que sería sólo un usuario. Pero ya veo que no.

      Empezaré con Javascript pues. Crearé un blog con generador de contraseña y, ¿se podría configurar en Javascript para que coja la contraseña del código de otra web, el texto encerrado entre una etiqueta específica? :D

      Seguramente supongo.
      Para que la contraseña que proteja el artículo se cambie cada hora, o cada X tiempo.

      ¡Pues a la carga!

      Saludos.

      Eliminar
    3. Un momento, no puedo usar Javascript para generar la contraseña, porque Javascript se ejecuta de lado del usuario y la contraseña no sería la misma, ¿o sí? D:

      Mmm tendré que pensar un poco más :s

      Gracias Oloman.

      Eliminar
    4. ¡Encontré la solución! Usaré un simple Flash para lo que quiera ocultar :D
      He descargado un curso y estoy aprendiendo ActionScript, aún así, recién acabo de encontrar el código útil en esta web: http://www.kirupa.com/developer/flash5/ifelse.htm

      Lo dejo como dato, por si sirve a alguien. Es una forma más segura que con Javascript, porque cualquier persona no va a saber descargarse un archivo .swf, decompilarlo, y ver la contraseña. En cualquier caso, mejor no usar esto para cosas muy importantes ;)

      A no ser que se use un ofuscador de Flash.
      Saludos.

      Eliminar
    5. Gracias por la idea, porque efectivamente, lo que programes en JavaScript, del lado del usuario, es fácilmente visible.

      Eliminar
  25. OLA
    NO ME FUNCIONA ! , COMO HAGO? por favor no aparece el contenido

    ResponderEliminar
    Respuestas
    1. O eres más explícito o tengo que indicarte que vuelvas a leer el post y seguir todas las instrucciones.

      Eliminar
  26. Hola Oloman!

    Este truco me ha funcionado de maravilla, pero ahora quiero saber como puedo cambiar el botón que dice "Enviar" por una imagen que lo reemplace, he intentado de muchas formas que encontré en internet pero ninguna me ha funcionado, tal vez tu puedas ayudarme un poco.

    Como siempre, muchísimas gracias amigo, un abrazo!

    ResponderEliminar
    Respuestas
    1. ¿Que en todo Internet no viene la manera de que se vea una imagen en lugar de un botón? No me puedo creer que en ningún sitio encuentres algo como esto ;)
      input[name="enviar"] {
      font-size: 0;
      border: 0;
      outline: 0;
      padding: 0;
      width: 49px;
      height: 25px;
      background-image: url(http://1.bp.blogspot.com/-vzvr5YM0sRE/VBsmbeZLZhI/AAAAAAAAROc/-hq5loX0ZhY/s1600/OK%2Bpin%2Bit.gif);
      vertical-align: top;
      }

      Eliminar
    2. Es exactamente el mismo código que encuentro en otros sitios, pero el problema es que no se donde colocarlo :'(

      Gracias de antemano.

      Eliminar
    3. En la plantilla, en la parte CSS... o si usaste el código que puse en esta entrada, también podría ir entre las dos etiquetas STYLE

      Eliminar
    4. Hola Oloman

      Muchísimas gracias, ya está visto que lo mio es el comercio x)
      Perdóname por poco entender de esto, por fin logré lo que quería gracias a ti.

      Un abrazo!.

      Eliminar