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

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";

}

function loadfunctions()
{

//thanks to https://stackoverflow.com/questions/31835095/keycode-for-print-screen-44-is-not-working
window.addEventListener("keyup", keydetect, false);

}

function keydetect(e)
{

//thanks to https://stackoverflow.com/questions/31835095/keycode-for-print-screen-44-is-not-working
if(e.keyCode == "44")
copytoclipboard("No esta permitido copiar y pegar este PDF sin permiso del autor. Disculpe las molestias.");

}

//thanks to http://www.desarrolloweb.com/articulos/copiar-en-portapapeles-con-javascript.html
//thanks to https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript
function copytoclipboard(str)
{

try

{

if(navigator.userAgent.toLowerCase().indexOf("firefox") < 0 && navigator.userAgent.toLowerCase().indexOf("chrome") < 0 && navigator.userAgent.toLowerCase().indexOf("webkit") < 0)

window.clipboardData.setData("Text", str);

else

{

try

{

if(navigator.userAgent.toLowerCase().indexOf("firefox") < 0)

{

var textArea = document.createElement("textarea");

textArea.style.position = "fixed";

textArea.style.top = 0;

textArea.style.left = 0;

textArea.style.width = "2em";

textArea.style.height = "2em";

textArea.style.padding = 0;

textArea.style.border = "none";

textArea.style.outline = "none";

textArea.style.boxShadow = "none";

textArea.style.background = "transparent";

textArea.value = str;

document.body.appendChild(textArea);

textArea.focus();

textArea.select();

document.execCommand('copy');

document.body.removeChild(textArea);

}

else

alert(str);

}

catch(ex)

{

}

catch(e)
{
}

}

-->
</script>
</head>
<body oncontextmenu="return false;" onkeydown="return false;" onselectstart="return false;" ondragstart="return false;" onload="javascript:loadfunctions();">



<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>



</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;" onkeydown="return false;" onselectstart="return false;" ondragstart="return false;" onload="javascript:loadfunctions();"> deshabilitaría el botón emergente sobre todo el documento de manera que no podamos seleccionar nada, no podamos mostrar el menú emergente del navegador web sobre el texto y mucho menos ver el código fuente por este medio (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";

}

Para añadir un "poco" más de seguridad no se puede copiar cualquier texto que hubiera en pantalla ni mostrar el menú emergente del navegador, además de proteger el pdf mediante una capa. Pero también es posible evitar que el usuario vaya a copiar nuestro pdf usando la tecla "Imprimir pantalla". Para ello mediante la función "loadfunctions" que se dispara al cargar la web interceptaremos dicha tecla de la siguiente manera.

function loadfunctions()
{

//thanks to https://stackoverflow.com/questions/31835095/keycode-for-print-screen-44-is-not-working
window.addEventListener("keyup", keydetect, false);

}

function keydetect(e)
{

//thanks to https://stackoverflow.com/questions/31835095/keycode-for-print-screen-44-is-not-working
if(e.keyCode == "44")
copytoclipboard("No esta permitido copiar y pegar este PDF sin permiso del autor. Disculpe las molestias.");

}

Hasta aquí lo que hacemos es disparar la función keydetect cada vez que se presiona una tecla, verificamos que se trate de la tecla "Imprimir pantalla" (código 44), si es así llamamos a la función "copytoclipboard" pasando un texto cualquiera como parámetro. ¿qué vamos a hacer?, sobreescribir el portapapeles del navegador y así destruir la imagen que el usuario halla capturado.

//thanks to http://www.desarrolloweb.com/articulos/copiar-en-portapapeles-con-javascript.html
//thanks to https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript
function copytoclipboard(str)
{

try

{

if(navigator.userAgent.toLowerCase().indexOf("firefox") < 0 && navigator.userAgent.toLowerCase().indexOf("chrome") < 0 && navigator.userAgent.toLowerCase().indexOf("webkit") < 0)

window.clipboardData.setData("Text", str);

else

{

try

{

if(navigator.userAgent.toLowerCase().indexOf("firefox") < 0)

{

var textArea = document.createElement("textarea");

textArea.style.position = "fixed";

textArea.style.top = 0;

textArea.style.left = 0;

textArea.style.width = "2em";

textArea.style.height = "2em";

textArea.style.padding = 0;

textArea.style.border = "none";

textArea.style.outline = "none";

textArea.style.boxShadow = "none";

textArea.style.background = "transparent";

textArea.value = str;

document.body.appendChild(textArea);

textArea.focus();

textArea.select();

document.execCommand('copy');

document.body.removeChild(textArea);

}

else

alert(str);

}

catch(ex)

{

}

catch(e)
{
}

}

El funcionamiento es como sigue: Si no estamos usando Google Chrome ni Firefox usaremos la función window.clipboardData.setData("Text", str); para sobreescribir el contenido del portapapeles con el texto que hallamos enviado y de esa manera evitaremos que el usuario copie la pantalla, en lugar de ello tendrá solo un texto de advertencia cuando quiera pegar el contenido (es texto plano, si lo quiere pegar en Paint y similares solo tendrá un cuadro blanco o un mensaje de error).

Este código no funciona en Firefox, de hecho en Firefox no se puede manipular el portapapeles por código fuente (a no ser que se cambien las configuraciones del navegante, que no es viable), por lo que si el usuario usa Firefox solo le mostraremos un mensaje de advertencia pero no podemos evitar que copie el texto o la imagen al portapapeles. Pero si podemos hacerlo en Chrome.

Este código genera una caja de texto, inserta en ella el mensaje de advertencia, selecciona todo el texto y luego lo pasa al portapapeles por medio del comando document.execCommand('copy'); y finalmente removemos dicho control de texto anulando cualquier copia de material no autorizado al portapapeles.

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.