Skip to main content
se añadieron 25 caracteres en el cuerpo
Origen Enlace
Layer
  • 6.1k
  • 2
  • 11
  • 32
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 = "">
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.
  */
  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 = "">
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 = "">
se eliminaron 2 caracteres en el cuerpo
Origen Enlace
Layer
  • 6.1k
  • 2
  • 11
  • 32
/*
  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 invisiblesvisibles 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>
/*
  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 invisibles 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>
/*
  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>
se añadieron 50 caracteres en el cuerpo
Origen Enlace
Layer
  • 6.1k
  • 2
  • 11
  • 32
window/*
  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 invisibles en
  view:source.onload
*/
//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>
window.onload = ()=>{

    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);
    });

}
<!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>
/*
  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 invisibles 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>
se añadieron 50 caracteres en el cuerpo
Origen Enlace
Layer
  • 6.1k
  • 2
  • 11
  • 32
Loading
se eliminaron 2 caracteres en el cuerpo
Origen Enlace
Layer
  • 6.1k
  • 2
  • 11
  • 32
Loading
Origen Enlace
Layer
  • 6.1k
  • 2
  • 11
  • 32
Loading