Pregunta:

Fecha: 23-06-2016 15:27:06 (En Español)

Block Print Screen Key 44. APORTE[Resuelta]

Buenas noches un cliente en días pasados, me ha pedido bloquear la captura de pantalla mas conocido como print screen, pues luego de buscar y buscar por toda la web, y haciendo caso omiso a los comentarios de algunos usuarios de la red los cuales afirmaban ser imposible realizar dicha operacion, ya que esta es netamente del sistema operativo, al final de todo enecontre este script que funciona muy bien en todos los exploradores, excepto IE

Les dejo el codigo y espero sirva para sus scripts.

function copyToClipboard() {
  // crear un "hidden" input
  var aux = document.createElement("input");
  // Asignarle el valor del elemento especificado
  aux.setAttribute("value", "No puede capturar imagenes.");
  // Anexar al body
  document.body.appendChild(aux);
  // Resalte su contenido
  aux.select();
  // Copiar el texto resaltado
  document.execCommand("copy");
  // Quitarlo del body
  document.body.removeChild(aux);
  alert(" prohibido por seguridad Print screen esta deshabilitado.");
}

Etiquetas: Aporte - Javascript - Seguridad Votos: 5 - Respuestas: 14 - Vistas: 14 Compartir en: Google Facebook Twitter LinkedIn Link

Respuestas:

5

Walter Sánchez Karma: 6600

Fecha: 23-06-2016 17:28:29 Hola

Muchas gracias por compartir tu investigación . +1

Es muy interesante lo que expones.
Alguien con un poco de conocimiento podría evadir la imposibilidad de capturar la pantalla con solo desactivar la ejecución de javascript en su navegador.
Pero funcionaria para la mayoría de los internautas que desconozcan como hacerlo.

Espero ver mas publicaciones tuyas contribuyendo al conocimiento libre de esta comunidad.

Saludos Votos: 5 - Link respuesta
4

Gonzalo Herrera Karma: 618

Fecha: 23-06-2016 19:22:07 Muy bueno el aporte, y tambien muy acertado el comentario de Walter que desactivando js del navegador puedan saltar esa validación.

¡Saludos! Votos: 4 - Link respuesta
4

Karen Aguilar Karma: 680

Fecha: 24-06-2016 06:35:15 Hola Bryan, muchas gracias por el aporte, es interesante pero no se como puedo/debo aplicarlo, ¿alguien podrá darme un ejemplo completo, o alguna indicación? gracias! Votos: 4 - Link respuesta
0

Bryan Villalobos Karma: 853

Fecha: 24-06-2016 19:13:46 claro karen solo debes agregar este codigo en la etiqueta head de tu archivo y listo! Votos: 0 - Link respuesta

Fernando Mosquera Karma: 10241

Fecha: 25-06-2016 04:00:59 Hola Bryan, en base a la consulta de Karen estaba tratando de implementar la solución que aportas y me encontre con que la misma esta incompleta, falta la parte más importante, detectar el momento en que se presiona la tecla "print pant", "print screen", o como quieran llamarle, por lo que me di a la tarea de hacer un ejemplo 100% ejecutable.

Aquí el ejemplo con los comentarios de "que hacemos" en cada línea de código:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Block/Disable Print Screen/Print Pant</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script type="text/javascript">
            function copyToClipboard() {
                // creamos un elemento input oculto ("hidden")
                var aux = document.createElement("input");
                // asignamos un valor al elemento en el atributo "value"
                aux.setAttribute("value", "Debido a las medidas de seguridad del sistema, no esta permitido realizar impresión de pantalla de esta página.");
                // agregamos el elemento al body de nuestra web
                document.body.appendChild(aux);
                // seleccionamos el contenido (el texto)
                aux.select();
                // copiamos el texto seleccionado
                document.execCommand("copy");
                // removemos el input oculto del body
                document.body.removeChild(aux);
                alert("Print Screen Deshabilitado.");
            }

            $(window).keyup(function (e) {
                if (e.keyCode == 44) {
                    //cuando se detecta la tecla 44 (o sea, print paint) ejecutamos la función copyToClipboard()
                    copyToClipboard();
                }
            });

            $(window).focus(function () {
                //cuando la ventana esta en foco, se muestra su contenido
                $("body").show();
            }).blur(function () {
                //cuando se pierde el foto de la ventana, se oculata el contenido (a fin de que si se hace un print screen del contenido con el ventana sin foco, este no sea visible)
                $("body").hide();
            });
        </script>
    </head>
    <body>
        <h1>Block/Disable Print Screen/Print Pant</h1>
        <h2>Sub título de prueba</h2>
        <p>Texto de prueba, texto de prueba, texto de prueba, texto de prueba, texto de prueba, texto de prueba, texto de prueba, texto de prueba, texto de prueba.</p>
    </body>
</html>

Aquí les dejo un enlace a la demo para que puedan hacer sus pruebas: DEMO

Comentarios extra:
a) El objetivo de la línea document.execCommand("copy"); es de copiar al portapapeles del sistema el texto "Debido a las medidas de seguridad del sistema, no esta permitido realizar impresión de pantalla de esta página.", con lo que se termina remplazando la imagen copiada con la tecla "print pant" por el texto mencionado.

b) Si bien utilice JQuery para el ejemplo, el mismo puede ser realizado 100% con Javascript puro. Para los que prefieran Javascript puro aquí el ejemplo y demo (creo que es interesante ver que se puede sobrevivir sin JQuery):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Block/Disable Print Screen/Print Pant</title>
        <script type="text/javascript">
            function copyToClipboard() {
                // creamos un elemento input oculto ("hidden")
                var aux = document.createElement("input");
                // asignamos un valor al elemento en el atributo "value"
                aux.setAttribute("value", "Debido a las medidas de seguridad del sistema, no esta permitido realizar impresión de pantalla de esta página.");
                // agregamos el elemento al body de nuestra web
                document.body.appendChild(aux);
                // seleccionamos el contenido (el texto)
                aux.select();
                // copiamos el texto seleccionado
                document.execCommand("copy");
                // removemos el input oculto del body
                document.body.removeChild(aux);
                alert("Print Screen Deshabilitado.");
            }
        </script>
    </head>
    <body>
        <h1>Block/Disable Print Screen/Print Pant</h1>
        <h2>Sub título de prueba</h2>
        <p>Texto de prueba, texto de prueba, texto de prueba, texto de prueba, texto de prueba, texto de prueba, texto de prueba, texto de prueba, texto de prueba.</p>
        <script type="text/javascript">
            window.addEventListener("keyup", function (e) {
                if (e.keyCode == 44) {
                    //cuando se detecta la tecla 44 (o sea, print paint) ejecutamos la función copyToClipboard()
                    copyToClipboard();
                }
            });
            
            window.addEventListener("focus", function () {
                //cuando la ventana esta en foco, se muestra su contenido
                document.body.style.display = "block";
            });
            
            window.addEventListener("blur", function () {
                //cuando se pierde el foto de la ventana, se oculata el contenido (a fin de que si se hace un print screen del contenido con el ventana sin foco, este no sea visible)
                document.body.style.display = "none";
            });
        </script>
    </body>
</html>

Demo Javascript puro: DEMO

Vale aclarar que este ejemplo esta basado en un tema abierto en stackoverflow, siempre es importante referenciar la fuente: http://stackoverflow.com/questions/3130983/stop-user-from-using-print-scrn-printscreen-key-of-the-keyboard-for-any-we

Saludos y buen código! Votos: 6 - Link respuesta

2

Walter Sánchez Karma: 6600

Fecha: 25-06-2016 14:24:42 Fernando Muy bueno la exposición del codigo y del demo online y mucho mas valioso es la explicación de mismo
Votos: 2 - Link respuesta
0

Bryan Villalobos Karma: 853

Fecha: 27-06-2016 16:50:17 Walter Sánchez, conoces de algun script que cuando el java script no este habilitado mi codigo no s ejecute? Votos: 0 - Link respuesta
2

Walter Sánchez Karma: 6600
Fecha: 28-06-2016 11:48:05
Hola Bryan
Para detectar javascript desactivado te dejo un codigo básico para que sea mas entendible

No se podría detectar con algún javascript ya que si se encuentra deshabilitado este no tendría funcionalidad.

Pero se podría lograr utilizando las etiquetas de HTML <noscript></noscript>
```
 <!doctype html>
 <html>
   <head>
      <meta charset="utf-8"/>   
      <title>Detectando Javascript</title>
   </head>

   <body>

<noscript>
          Javascript está deshabilitado en su navegador web.<br />
            Por favor, para ver correctamente este sitio,<br />
            <b><i>habilite javascript</i></b>.
            <br />
            <br />
            Para ver las instrucciones para habilitar javascript en su navegador, haga click  <a href="http://www.enable-javascript.com/es/"  target="_blank">aquí</a>.
</noscript>

<script type="text/javascript">
   alert('Usted tiene JavaScript activado');
</script>

</body>

 </html>
```
Se puede mejorar notoriamente al codigo expuesto

Aunque creo que tambien se podria evadir, con el inspector de elementos que traen las mayoría de los navegadores, claro esta que se debe tener conocimientos para ello.

Como siempre ningún sistema es lo suficientemente seguro, es relativa la seguridad.
Con conocimientos + tiempo + persistencia + ingenio se logra vulnerar los sistemas.

Saludos
Votos: 2 - Link respuesta
1

Bryan Villalobos Karma: 853

Fecha: 28-06-2016 15:24:44 En eso tienes toda la razon, el script funciona de maravilla Gracias Votos: 1 - Link respuesta
2

Walter Sánchez Karma: 6600
Fecha: 28-06-2016 17:13:00
Bryan me alegra que te haya sido de utilidad todas las respuestas que se te ha brindado y de tal manera hayas logrado resolver el caso ;)

Espero que continúes participando en la comunidad
```
<?php
           echo 'Enjoy it';
?>
```
Saludos
Votos: 2 - Link respuesta
0

Yaya Fontz Karma: 1

Fecha: 07-02-2019 03:37:15 WOW, muchas Gracias Fernando, tremenda aportacion. Efectivamente, si, el prt sc, se ha desactivado, ahora me siento mas segura publicando en mi web. Votos: 0 - Link respuesta
0

David Garcia Karma: 1

Fecha: 13-05-2019 14:37:43 A mi no me funcionan las soluciones, tengo instalado el programa de captura de pantalla lightshot, y me deja pulsar la tecla imprimir pantalla y capturar la pantalla. ¿Tienen alguna solución?, gracias. Votos: 0 - Link respuesta
0

Bryan Villalobos Karma: 853

Fecha: 13-05-2019 15:29:54 David en ese caso si es imposible bloquear un software externo. Votos: 0 - Link respuesta
1

Luis Mendoza Karma: 7
Fecha: 26-09-2020 08:05:18
Hola Fernando gracias por el aporte, es espectacular y funciona que es lo mejor, quisiera aportar unas mejoras:

Primero desactivar el Alert ya que cuando se lanza si vuelves a presionar imprimir pantalla ya no se ejecuta el código.

Y segundo en mi caso necesitaba tener la información visible así que vacíe el clipboard al perder el foco de la venta.
```
function clearClipboard(){
            	window.clipboardData.clearData();
            }
```
Y en en lugar de $("body").hide(); ejecuto la función clearClipboard();

Espero les ayude a mejorar aún falta evitar que se recorte la pantalla, vamos por ello :P

Saludos.
Votos: 1 - Link respuesta

Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión

frjcbbae garagebible.com

Pregunta:

Block Print Screen Key 44. APORTE[Resuelta]

Respuestas:

secciones

La comunidad

Mi Cuenta