CODEWITHSUNDEEP
javascriptreactjsnpmparceljs
Nandhakishore
Nandhakishore

Reputation: 69

Javascript - Hide source files from chrome console

I'm kinda new to Javascript development myself. Lately, I've been working on a web app using React and ExpressJS. Express will deliver the static bundled(using Parcel) files of front-end React page. The code organisation is something like this:

> dist\    
>     [static files here] 
> node_modules \ 
> src \
>     client\
>        compontents\       
>        index.html
>        index.js
>     server\
>       models\
>       routes\
>       index.js

The build process works fine and I get a perfectly working web app. The problem is that Google Chrome's Source developer tool exposes all of my source code for the client. Exposed source code files

Some googling led me to terms such as blackboxing and obfuscation. But I have a hard time understanding them. Some explanation of them and advice on hiding source files will be helpful. Thanks!

Upvotes: 2

Views: 8145

Answers (6)

Abhishek Chauhan
Abhishek Chauhan

Reputation: 1

Set the below property in .env

GENERATE_SOURCEMAP=false

Rebuild 𝗻𝗽𝗺 π—Ώπ˜‚π—» π—―π˜‚π—Άπ—Ήπ—± will generate minified files.

Upvotes: 0

Shantha Moorthy K
Shantha Moorthy K

Reputation: 5

It is not really possible to completely block inspect element on your website. But you can block some popular ways of accessing it.

1. Use of F12 key on the browser:

This can be blocked using javascript key event listener. Use the below script to do accomplish it.

$(document).keydown(function(e){
    if(e.which === 123){ 
       return false; 
    } 
});

2. Use of Right click

You can block this using javascript or with just your html

<html oncontextmenu="return false">
</html>
or

$(document).bind("contextmenu",function(e) { 
    e.preventDefault();

});

3. Use of other shortcuts involving Ctrl keys

Include this snippet inside the body element.

oncontextmenu="return false" onkeydown="return false;" onmousedown="return false;"

4. By temporarily removing DOM when inspector is opened

What the below snippet does is to detect when the debugger is opened, and removes the code and stores the code in a variable and and when the debugger is closed, it returns it.

var currentHtmlContent;

var element = new Image();

var elementWithHiddenContent = document.querySelector("#element-to-hide");

var innerHtml = elementWithHiddenContent.innerHTML;   


element.__defineGetter__("id", function() {

    currentHtmlContent= "";

});

setInterval(function() {

    currentHtmlContent= innerHtml;

    console.log(element);

    console.clear(); 

    elementWithHiddenContent.innerHTML = currentHtmlContent;

}, 1000);

Upvotes: -3

Andres G
Andres G

Reputation: 57

If you don't set the following option, your react source code (not minimized) will be visible. You need to turn off the GENERATE_SOURCEMAP flag.

in package.json

"scripts": { ... "build": "GENERATE_SOURCEMAP=false react-scripts build", ... }

Upvotes: 1

Meler Lawler
Meler Lawler

Reputation: 175

You can blackbox your web app by using a service like HideJS to create an interactive stream of your site, instead of actually compiling the code on their end.

The code never reaches their computer, so it's not possible to see it.

Upvotes: 0

Nandhakishore
Nandhakishore

Reputation: 69

Finally got it. I had to include --no-source-maps in parcel build command

parcel build ./src/client/index.html --no-source-maps

Upvotes: 3

Duc Vu
Duc Vu

Reputation: 95

Basically a web browser need to download your .js files in order to work. You cannot prevent this. However, in the published react project, the js files are minified so you dont need to worry about exposing your source code.

Upvotes: 0

Related Questions