Te tengo una solución, pero no es que sea lo mas ortodoxa... sin embargo tengo que decirte unas cuantas cosas primero...
- No tiene sentido esconder el código, ya que como comenta fredyfx puedes acceder al archivo principal (index.html o index.php y revisar los recursos ahí),(esto en cuanto a los recursos del html).
- Como lo de arriba se puede hacer de manera tan sencilla como escribir: "view-source:linkPagina", tampoco tiene sentido que hagas una función para bloquear en este caso la combinación de teclas ctrl + U.
- Para solucionar las dos cosas de arriba, lo ideal sería que usaras PHP para mostrar las imagenes y recursos, ya que este no se ejecuta en la pagina de view-source, si no que solo se ejecuta cuando cargas contenido en la pagina como tal, de esta manera todos los recursos solo se podran ver en la pagina.
- Si o si debes ya sea desactivar el menu contextual, tambien debes desactivar la tecla que parece un documento que tienen algunas computadoras y dejar al usuario sin este menu, o desactivar el menu contextual y crear uno personalizado (por ejemplo mira un video de youtube y dale click derecho al video).
- Debes desactivar la combinación de teclas Ctrl + Mayusc + I, Ctrl + Shift + I y la tecla F12 y por si las moscas crear una función rebuscada para que la persona si de alguna u otra manera logra abrir la consola detectar este comportamiento y hacer algo al respecto para esconder los recursos (ya te comento mas abajo qué es).
- Puedes evitar que la persona vea el código fuente de todos los archivos que desees haciendo uso de ES6, pero te advierto que si usas ES6 (Que ya la mayoria de navegadores lo soporta y ya esta siendo muy usado), si lo usas en un navegador desactualizado o que no lo soporte lo bueno es que igual la persona no va a poder ver ningun modulo (archivos javascript) que se carguen desde el script principal, esto debido a que como no reconocera bien la etiqueta type = "module" de script y tampoco reconocera la instrucción import, no te va a mostrar la ruta a los archivos ni tampoco estos, lo malo es que estos no se ejecutaran... aparte si guardas la pagina solo se descarga el script principal y no los modulos haciendo imposible su obtección directa.
Aquí un ejemplo de el ultimo punto que dije para que la persona no tenga acceso a los archivos script:
html:
<html>
<head>
<title>Prueba modular</title>
<!-- Fijate que el script esta declarado como type = module -->
<script type = "module" src = "main.js"></script>
</head>
<body>
</body>
</html>
Archivo main.js:
import "./script.js";
Fijate que se hace un import de otro script llamado 'script.js', cabe recalcar que el contenido y el archivo 'main.js', si es accesible, descargable y puede verse su contenido, pero el modulo o los modulos requeridos por este 'script.js' NO LO SON.
Archivo script.js:
window.onload = ()=>{
console.log("Hello world!");
}
Apartir del archivo 'script.js' puedes tener otros modulos que cargas dentro de este, pero... no es necesario, el archivo script.js que enrealidad es un modulo, como no es accesible para revisarlo tampoco podras obtener sus recursos (la pagina si, por ejemplo si creas y añades una imagen desde este archivo, pero este archivo como tal en sí no) por lo tanto no es necesario dentro de este colocar otros imports a otros archivos si quieres tener tu código todo junto en este archivo protegido.
Lo siguiente es hacer lo que te habia comentado de bloquear las combinaciones de teclas que posiblemente puedan hacer que el usuario haga cosas como abrir la consola, abrir el menu contextual y demas cosas, para ello el código como lo tienes te sirve, pero hay que cambiarle una pequeña linea...:
if (event.keyCode == 123) {
return false;
}
suponiendo que quieres bloquear la tecla con el keyCode = 123, en vez de hacer un return false, deberias por seguridad colocar:
if (event.keyCode == 123) {
event.stopPropagation();
}
De esta manera evitas cualquier acción que haga ese boton en especifico.
Ahora, viene la parte mas importante y es crear una función que te permita detectar cuando se ha abierto la consola, no hay función que permita hacer esto directamente por temas de seguridad... sin embargo, se puede jugar un poco con el hecho de que la ventana se hace mas pequeña cuando abrimos la consola, y no solo eso... si no tambien detectando si la ventana perdio el foco, en caso de que sucedan estas dos cosas, se detecta que efectivamente que la persona abrio la consola de desarrolladores, caso en el cual se procede una vez detectado este cambio a esconder cualquier contenido que no se le quiera dejar acceso a modificar o guardar a la persona:
let lastOuterWidth = window.screen.width;
let lastInnerWidth = window.innerWidth;
function detectConsoleOpened(firstTime){
if(firstTime){
/*Si la condición se cumple procederemos a realizar la operación para proteger los archivos.
*esta es una función generica, talvez en algunos casos no funcione correctamente...*/
if(window.innerWidth < lastOuterWidth){
lastOuterWidth = window.outerWidth;
lastInnerWidth = window.innerWidth;
blockContent();
}else{
lastOuterWidth = window.outerWidth;
lastInnerWidth = window.innerWidth;
}
}
window.onresize = ()=>{
/*Si la condición se cumple procederemos a realizar la operación para proteger los archivos.
*esta es una función generica, talvez en algunos casos no funcione correctamente...*/
if(window.outerWidth < lastOuterWidth || window.innerWidth < lastInnerWidth){
lastOuterWidth = window.outerWidth;
lastInnerWidth = window.innerWidth;
blockContent();
}else{
lastOuterWidth = window.outerWidth;
lastInnerWidth = window.innerWidth;
}
}
}
function blockContent(){
//Aquí procederias a hacerle algun cambio al src por ejemplo de los archivos que tengas
//Hay que ser creativos, talvez algo diferente mas eficiente que se te ocurra, pero si no, podrias
//Guardar los elementos en arreglos separados segun los recursos y luego cambiar los actuales,
//luego cuando se detecte de que ya la consola no esta abierta.
console.log("Hello world!");
}
detectConsoleOpened(true);
document.onblur = detectConsoleOpened(false);