5

Estoy realizando un webdoc con contenido multimedia demasiado variado. Me están solicitando que por favor bloquee cualquier forma que sea posible para ver el código de la página y así proteger la ruta del contenido multimedia.

Quisiera saber cómo podría bloquear la combinación Ctrl + S y Ctrl + U. He bloqueado el menú del click derecho y la teca F12 así:

document.onkeypress = function(event) {

  event = (event || window.event);

  if (event.keyCode == 123) {

    return false;

  }

  if (event.which == 123) {

    return false;

  }

}

document.onmousedown = function(event) {

  event = (event || window.event);

  if (event.keyCode == 123) {

    return false;

  }

  if (event.which == 123) {

    return false;

  }

}

document.onkeydown = function(event) {

  event = (event || window.event);

  if (event.keyCode == 123) {

    return false;

  }

  if (event.which == 123) {

    return false;

  }

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>

<html>

<head>

  <title>LA CHIVATERA: CAMINOS DE ANTA&Ntilde;O</title>

</head>

<body oncontextmenu="return false">

  <div class="container">

    Hola.

  </div>

</body>

</html>

Quisiera bloquear sólo esas combinaciones, pues no puedo bloquear todas las teclas, ya que hay un sistema de comentarios y no vendría bien.

6
  • 3
    ¿Qué sucede si el cliente desactiva Javascript en el navegador? Commented el 5 feb. 2020 a las 20:14
  • 1
    Buff... Siendo sincero, no lo había considerado. Sin embargo, es una petición y me están acosando con eso. Quiero cumplir al menos en esa parte. Aunque si me pueden ayudar sin JS, lo agradecería.
    – Saco04
    Commented el 5 feb. 2020 a las 20:18
  • 3
    ¿Sí sabes usando google chrome se pasan esa restricción por el arco del triunfo? agrega view-source: antes del http de la siguiente manera: view-source:http://fredyfx.com/ y boom shakalaka, todo el código fuente del front, visible
    – fredyfx
    Commented el 5 feb. 2020 a las 20:20
  • 1
    Wow.. Estoy aprendiendo más de lo que realmente esperaba. Jajajaja. Sin embargo, es sólo para tener a un cliente tranquilo. Aún así, le aclararé que sigue siendo posible ver el código.
    – Saco04
    Commented el 5 feb. 2020 a las 20:22
  • 2
    Impedir que se vea el código no lo vas a lograr a pulso. Aún si intentas evitar que el usuario vea la URL del recurso, tampoco lo lograrás, ya que el navegador necesariamente hará una solicitud http la cual se muestra por la consola de desarrollador del navegador. Tu solución debe venir en todo caso del lado servidor, todo lo que hay del lado cliente está expuesto. Saludos Commented el 5 feb. 2020 a las 20:31

2 respuestas 2

3

Controlar comportamiento del navegador - Combinaciones de teclas

Una forma de controlar el comportamiento del navegador cuando se presionen las teclas Ctrl + S y/o Ctrl + U es evaluando previamente si el usuario ha presionado la tecla Ctrl como se muestra a continuación:

if ( e.ctrlKey ) {
  // Si el usuario ha presionado la tecla Ctrl
  // las instrucciones acá serán ejecutadas, como
  // por ejemplo:

  e.preventDefault();
}

Ten en cuenta que puede utilizar preventDefault() con stopPropagation() para evitar el comportamiento por defecto del navegador. Vamos a colocar un ejemplo práctico de dicho comportamiento, pero antes, debes recordar que una vez presiones el botón «Ejecutar» seleccione la región del marco flotante donde se muetran los resultados para que posteriormente presiones las teclas para la realización de las pruebas:

onkeydown = e => {
  let tecla = e.which || e.keyCode;
  
  // Evaluar si se ha presionado la tecla Ctrl:
  if ( e.ctrlKey ) {
    // Evitar el comportamiento por defecto del nevagador:
    e.preventDefault();
    e.stopPropagation();
    
    // Mostrar el resultado de la combinación de las teclas:
    if ( tecla === 85 )
      console.log("Ha presionado las teclas Ctrl + U");
    
    if ( tecla === 83 )
      console.log("Ha presionado las teclas Ctrl + S");
  }
}
Primero haga clic acá y luego presione las teclas `Ctrl + S` y `Ctrl + U`

Si bien, se muestra un mensaje indicando que se han presionado las teclas Ctrl + U y Ctrl + S, a la vez, se evita que el navegador muestre el código fuente de la página o se guarde cuando el usuario realice cualquiera de las dos (02) combinaciones. Sin embargo, eso no evita que, utilizando otros métodos puedan acceder a dicho código, como por ejemplo, si se descarga la página de la siguiente forma:

wget -r https://ejemplo.com/

En el ejemplo anterior el comando wget -r descarga una página de forma recursiva. Es decir, se descarga el código HTML, JavaScript, CSS, imágenes, etc. Por lo tanto, no es posible evitar que el quiera ver el código fuente acceda a él.

Uso práctico

Normalmente, cuando se bloquea algún comportamiento por defecto del navegador se hace con la intención de utilizarse para realizar acciones que requieran dichas combinaciones de teclas.

Un posible uso práctico de la combinación de las teclas Ctrl + S es hacer que nuestra aplicación guarde registros en una base de datos en lugar de guardar la página en nuestro computador, que es la acción por defecto del navegador.

2

Se que esta pregunta ya fue resuelta hace unos 50 años pero bueno quería compartir que efectivamente si hay una forma de resolver este conflicto de seguridad, es decir, a lo que me refiero es que aunque se pregunte como bloquear ciertas teclas para que el usuario no pueda obtener o ver recursos de la pagina, se pueden mezclar ciertas cosas para poder hacer que el JS sea imposible de ver (tambien intente mirar si descargando la pagina tambien descargaba los modulos de JS pero no lo hace, por lo que por ese lado estamos bien).

Lo primero de todo, en el snippet que voy a poner a continuación no se encuentra el script definido de esta manera, pero es muy importante que el script este definido de esta manera:

<script type = "module" src="index.js"></script>

fijense en el type es muy importante, ahora bien el snippet a continuación:

/*
  En tu script principal si quieres proteger codigo
  para que al inspeccionarlo no se pueda ver, deberas hacer
  exports en otro archivo e importar los metodos, propiedades,
  clases y constantes que quieras que no sean visibles en
  view:source.
*/
//import nuestrasFuncionesInvisibles from './Alguna ruta.js';

//Por ejemplo esto de aquí supongamos que este en ./invisible.js:

export default function fetchImagen(){
  const url = 
        encodeURI("https://img.freepik.com/vector-gratis/fondo-azul-clasico-estilo-abstracto_23-2148427983.jpg?size=626&ext=jpg");
    const img = new Image();
    img.download = "";

    img.onload = ()=>{
        img.setAttribute("href", img.src);
        URL.revokeObjectURL(img.src);
        document.body.appendChild(img);
    }

    fetch(url, { method: 'GET'})
    .then(res => res.blob())
    .then(blob =>{
        img.src = URL.createObjectURL(blob);
    });
}

//Y no queremos que se vea en nuestro archivo principal llamado: ./Alguna ruta.js

import fetchImagen from "./invisible.js";

window.onload = ()=>{
  fetchImagen();
}

/*
  El resultado es que en view:source no vas a poder ver el contenido de ese import
  pero vas a poder seguir usando la funcion normalmente desde JS.
*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Lo segundo notable es la encapsulación:

window.onload = ()=>{
    //Todo el código aquí dentro
}

Como estamos usando script con un type definido como modulo entonces no es necesaria del todo la encapsulación, sin embargo consideremoslo como una doble medida de seguridad.

Lo siguiente es que tenemos las funciones URL.createObjectURL y URL.revokeObjectURL que respectivamente nos permiten crear objetos url que se ven del tipo: blob:http://direccionServidor:puerto/url-hasheada sin embargo el metodo URL.createObjectURL no nos permite usar URLS directamente para obtener el contenido, ya que entre las cosas que acepta esta el tipo Blob por lo tanto, para obtener un recurso de nuestro servidor como un tipo blob podemos usar fetch:

fetch(url, { method: 'GET'})
    .then(res => res.blob())
    .then(blob =>{
        img.src = URL.createObjectURL(blob);
});

Por supuesto la URL en el snippet esta hardcodeada, pero en una pagina normal real, normalmente las url las consultamos desde una base de datos, por lo que no son directamente visibles en el código.

Lo siguiente que tenemos es la función encodeURI que lo que hace es formatear la URL de tal forma que maximice la compatibilidad de la URL que pasamos a fetch para que así por motivos de por ejemplos caracteres extraños no se detecte bien la URL como valida.

Otro dato importante, las imagenes las estamos creando dentro del código:

const img = new Image();

Y en el mismo código les estamos pasando el blob URL creado por URL.createObjectURL:

img.src = URL.createObjectURL(blob);

Como la imagen la creamos desde javascript, en el html no es visible hasta que nosotros no le digamos que la vamos a meter dentro:

document.body.appendChild(img);

Esto hace que el recurso este protegido hasta que se cargue y se revoke la URL.

Sin embargo otra forma mas comoda de hacer lo mismo e igualmente segura es en vez de crear los objetos img desde javascript, podemos crear nuestras imagenes sin una ruta en el html inicialmente:

<img src = "" id = "imagen">

y pues en el js por cada imagen o recurso que quieras que sea privado usar un metodo que haga uso de lo anteriormente mencionado:

function metodoDeSafeURL(){
  /*
    Metodo que podrias crear en base a lo anterior para
    proteger tus recursos.
  */
  
  /*
    Lo importante es que aquí dentro se use URL.createObjectURL
    Y NO LO REVOKES AQUÍ MISMO.
  */
}

$("img").each(()=>{
  /*
    Cuando la imagen se cargue con el URL.createObjectURL
    podemos hacer uso de URL.revokeObjectURL de manera segura
    porque la imagen ya cargo sus datos.
  */
  metodoDeSafeURL();
  URL.revokeObjectURL($(this).attr("src"));
  console.log("todo en orden y seguro!");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src = "">

Bien, en resumen:

  • Hacer del script un type module.
  • Encapsular el código javascript
  • fetch o ajax que nos devuelva un formato admitido del archivo para pasarle a URL.createObjectURL().
  • No poner el src directamente en las imagenes o recursos, osea no poner el original para cargarlo si no poner el cargado por URL.createObjectURL.

El resultado es el siguiente:

  • El js no es visible si le das a inspeccionar en el navegador (muestra la ruta al archivo pero nunca su código fuente (nisiquiera se muesra como link, se muestra como texto plano su ruta)).

  • Los archivos usando esta forma no son descargables.

  • Descargar la pagina entera para ver sus archivos es posible pero no se descargaran los modulos usados: script type = module.

  • Si intentas ir directamente al src de la imagen que nos da URL.createObjectURL como hacemos un URL.revokeObjectURL la URL no estara disponible, la data en memoria del navegador que adicionalmente usaba URL.createObjectURL del recurso será desmontada y ademas al intentar te va a decir simplemente que el objeto no pudo ser localizado (mozilla firefox, en chrome simplemente error en la pagina).

  • Al encapsular nuestro código el js sus funciones metodos, clases y variables no son accesibles por consola, y aun así no sería accesible por que adicionalmente pusimos nuestro script como type = module.

Esto entonces creo que sería un poco mejor a simplemente bloquearle comportamientos al usuario o limitarlo de no poder hacer cosas.

No limitamos la visibilidad al usuario y hacemos que pueda ver el recurso mas no que pueda manipularlo.

3
  • 1
    Esta un poco tarde por aca, asi que mañana talvez edite un poco el código para complementarlo... se que faltan cosas, sobre todo para lo ultimo... pero mas o menos ya te darias una idea de como puede hacerse.
    – Layer
    Commented el 7 feb. 2020 a las 5:31
  • 1
    Ah una cosa mas que se me olvido comentarte, al declarar al script como tipo modulo no puedes correr ya el archivo index,html de manera normal, debes correrlo en un servidor local, por ejemplo xampp o http-server de nodejs, si no te dará un error que no te dejara cargar el modulo o los modulos.
    – Layer
    Commented el 7 feb. 2020 a las 19:23
  • Sorry, una edición, si se puede ver el src de los archivos definidos como type = module, pero no se puede ver el source de las cosas importadas con la sentencia import en alguna parte, y los recursos llamados por import al descargar la pagina entera, no apareceran.
    – Layer
    Commented el 22 abr. 2020 a las 4:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.