Menubar

martes, 12 de febrero de 2019

Como incrustar un archivo PDF en un iframe y desactivar el botón derecho del mouse sobre ese archivo

Por J. Manuel Mar H. Editar
Compartir en Facebook
Compartir en Twitter
Compartir en Google+
Enviar a Reddit
Guardar en Internet archive
Guardar en  archive.today
Enviar por email
Logo PDF  El presente tutorial no pretende ser una medida de seguridad exhaustiva, sino un simple truco para proteger nuestra información a mostrarse en Internet. Queremos mostrar un archivo PDF insertado en nuestra web, pero que al mismo tiempo no se pueda copiar su contenido, ni guardarlo ni mucho menos imprimirlo. ¿Cómo lo podríamos lograr?, les invito a seguir leyendo este post.


  Supongamos que queremos mostrar un archivo PDF en nuestra web, pero que sea solo de consulta, no ofreciendo al visitante la posibilidad de copiar nuestro contenido, OK, sabemos que no es posible proteger del todo nuestra información en la red y el único método 100% seguro es simplemente no ponerla, pero aún así a veces vamos a tener que poner algo que al menos de primera instancia no sea tan sencillo de copiar.

Para ello haremos uso del siguiente código fuente:

<html>
<head>
<title>Embed PDF</title>
<script language="JavaScript">
<!--

function loadpdf()
{

   var path = "ruta de nuestro archivo pdf";

   //thanks to https://www.codexworld.com/embed-pdf-document-file-in-html-web-page/
  document.getElementById("pdf").src = trim(path) + "#toolbar=0&statusbar=0&navpanes=0";
  document.getElementById("pdf").style.display = "block";
  document.getElementById("pdf").style.visibility = "visible";
  
  document.getElementById("nomenu").style.display = "block";
  document.getElementById("nomenu").style.visibility = "visible";
  
  document.getElementById("loading").style.visibility = "hidden";

}

-->
</script>
</head>
<body oncontextmenu="return false;">

<!-- Thanks to https://stackoverflow.com/questions/737022/how-do-i-disable-right-click-on-my-web-page -->

<div id="loading" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><font class='defaulttext'>Cargando, espere un momento por favor...</font></div>
<iframe src="emptyframe.php" id="pdf" frameborder="0" width="100%" height="100%" style="visibility: hidden;" onload="javascript:loadpdf();">Su navegador web no soporta iframes.</iframe>
<div id="nomenu" style="position: absolute; left: 0px; top: 0px; width: 98%; height: 100%; visibility: hidden; z-index: 1000;"></div>

<!-- Thanks to https://stackoverflow.com/questions/737022/how-do-i-disable-right-click-on-my-web-page -->

</body>
</html>

El funcionamiento es el siguiente:

  En el cuerpo de la página web donde queremos insertar nuestro PDF tenemos una capa que muestra el texto "Cargando, espere un momento por favor...", esto para evitar que el navegante vea solo una pantalla en blanco mientras inicia la carga del archivo PDF y así no tenga la sensación de que nada está pasando.

  Posteriormente tenemos la etiqueta <iframe></iframe> que será la responsable de cargar nuestro archivo PDF, inicialmente está cargando un simple archivo en blanco, no lo pongo en éste tutorial porque simplemente no tiene nada, solo la estructura básica de un archivo html con el color de fondo del documento en color blanco. Fijamos la visibilidad del iframe a hidden mediante la hoja de estilos integrada al iframe (style="visibility: hidden;") y finalmente cuando se halla cargado el archivo PDF se disparará el evento loadpdf mediante el evento onload del iframe.

  A continuación viene la parte esencial de este tutorial: una capa oculta identificada como "nomenu", puesta de forma absoluta sobre el iframe (estamos asumiendo que lo único que vamos a mostrar es un iframe en la página web ocupando todo el espacio disponible también. Si vamos a colocar el iframe en otra posición necesitaremos ajustar estos parámetros.

 Esta capa lleva la siguiente hoja de estilos:  style="position: absolute; left: 0px; top: 0px; width: 98%; height: 100%; visibility: hidden; z-index: 1000;"

Donde:

position: absolute; visibility: hidden y z-index: 1000 garantizan que esta capa ocultará el contenido del iframe, pero siendo transparente al mismo tiempo.

left: 0px; top: 0px; width: 98%; y height: 100%; harán que efectivamente esta capa se coloque sobre sobre el iframe con el archivo PDF cargado consiguiendo que ya no sea posible mostrar el menú emergente que el navegador genera al hacer clic con el botón derecho o secundario del mouse y por lo tanto desaparecerían las opciones de copiar, guardar e imprimir el archivo incrustrado. El ancho de 98% permite que si se visualicen la barra vertical del iframe y poder navegar por el archivo incrustado sin problemas.

  Finalmente la etiqueta <body oncontextmenu="return false;"> deshabilitaría el botón emergente sobre todo el documento de manera que no podamos seleccionar nada, ni ver el código fuente (como dije antes, esto no es una medida de seguridad exhaustiva, hay otras maneras de ver el código fuente) disuadiendo al menos por un tiempo a los navegantes novatos.

  Cuando la página web inicia su proceso de carga veremos en primer lugar un aviso que nos indica que se encuentra cargando el archivo, posteriormente una vez cargado se dispara la función loadpdf y mediante el código fuente se oculta la capa "loading", se muestra el iframe y se muestra la capa "nomenu" y así queda protegido nuestro archivo PDF tal como se muestra mediante el siguiente código fuente:

function loadpdf()
{

   var path = "ruta de nuestro archivo pdf";

   //thanks to https://www.codexworld.com/embed-pdf-document-file-in-html-web-page/
  document.getElementById("pdf").src = trim(path) + "#toolbar=0&statusbar=0&navpanes=0";
  document.getElementById("pdf").style.display = "block";
  document.getElementById("pdf").style.visibility = "visible";

  document.getElementById("nomenu").style.display = "block";
  document.getElementById("nomenu").style.visibility = "visible";

  document.getElementById("loading").style.visibility = "hidden";

}

  Como pueden ver, se trata de un código fuente muy sencillo. No ofrece una seguridad total, pero para usuarios novatos o con muy pocos conocimientos puede servir de algo, espero les halla sido de mucha utilidad.

  Les invito del mismo modo a ver el post en este blog sobre como prevenir la descarga de algunos tipos de archivos, por ejemplo MP3, que se puede combinar con este tutorial para ofrecer un poco más de seguridad.

Procedencia de las imágenes:
File: Logotipo oficial de Adobe PDF 
Licencia: Creative Commons

¿Te gustó este post?, entonces si lo deseas puedes apoyarnos para continuar con nuestra labor, gracias.



Publicidad:


Compartir:


Temas relacionados:


No hay comentarios. :

Publicar un comentario

:) :( ;) :D :-/ :x :P :-* =(( :-O X( :7 B-) #:-S :(( :)) =)) :-B :-c :)] ~X( :-h I-) =D7 @-) :-w 7:P 2):) :!! \m/ :-q :-bd ^#(^

Danos tu voto
Comunidad Kynamio
Directorio de blogs, ¡agrega el tuyo!
Programas para el mantenimiento de Windows
Blog de seguridad informatica