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.
view-source:http://fredyfx.com/
y boom shakalaka, todo el código fuente del front, visibleURL
del recurso, tampoco lo lograrás, ya que el navegador necesariamente hará una solicitudhttp
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