Javascript - Hide source files from chrome console

how to hide javascript code from view source
how to hide javascript code from client
how to hide javascript code from inspect element
hide html source code using php
react hide source code
javascript disable view source
how to hide html source code
how to hide javascript source code in php

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!

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

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

How to hide the source code of a HTML page, Open the Command Menu and run the "Disable JavaScript" command. The yellow warning icon next to Sources reminds you that JavaScript  Blackbox JavaScript Source Files Like everyone, you get bugs in your application code. You start debugging, but when you step through your code line-by-line, the debugger sometimes jumps into a source file that's not your focus (such as a third-party JS library).

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.

Sources Panel Overview | Tools for Web Developers, Keep your code safe with a bit of cunning obfuscation. How to hide your JavaScript code from View Source. By Tam function doTheTrick() { var chiffrat; console.log("Preparing to encrypt chiffrat"); chiffrat = rot13(myString);  How the Console looks after evaluating the expressions above. add(25) evaluates to 45 because when the add function is called without a second argument, b defaults to 20. Next steps. See Run JavaScript to explore more features related to running JavaScript in the Console. DevTools lets you pause a script in the middle of its execution.

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.

Disable JavaScript With Chrome DevTools, In case you didn't know - you can do that, for example with the Chrome Developer Tools. Whilst this is very useful, it's not limited to your own  Also, there are keyboard shortcuts like Ctrl+U that can be used to view source. All this method does is add about a two second delay to someone trying to view your source and it does irritate users who aren't trying to view your source. "JavaScript Encryption" This is by far the most popular way to try to hide one's source code.

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", ... }

How to hide your JavaScript code from View Source, What happens when you blackbox a script?#. Exceptions thrown from library code will not pause (if Pause on exceptions is enabled),; Stepping into/out/over  7. Searching a .css file for specific selector. You want to search a .css source file for a specific CSS selector.. Routine: From the source panel, select and open a .css source file, then use a keyboard shortcut (win: Shift+Ctrl+o, mac: Shift+Cmd+o) to open up a text filterable UI list of CSS selectors contained in the source file (Note: to un-minify the source click on the {} icon).

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

Hide JavaScript Code, When I copy from the console, I get the source for every line i.e. what line you are subscribed to the Google Groups "Google Chrome Developer Tools" group. on the Console and modify the CSS to hide the source+line number message. Next thing I thought about was using Javascript/jQuery to delete those nodes. Learn how to edit source files within Chrome and save the result to a local file. Changes can also be applied immediately without refreshing the browser.

Blackbox JavaScript Source Files, Nowadays Chrome has an exclusion mechanism in its filter box: Click on 'Filter​'-> 'Hide message from xxx.js' but fails with source maps (all messages are from one huge vendor.js ) – oluckyman allows to hide it, but this doesn't work for scripts with autogenerated file names. right click in dev console to hide a script​. The Console has 2 main uses: viewing logged messages and running JavaScript. Viewing logged messages. Web developers often log messages to the Console to make sure that their JavaScript is working as expected. To log a message, you insert an expression like console.log('Hello, Console!') into your JavaScript. When the browser executes your

Copy from console without source?, Your Chrome version may look a little bit different, but it still should be obvious Turn on developer tools with F12 (Mac: Cmd+Opt+I ). The Code Editor pane shows the source code. Now you could click the same toggler again to hide the resources list and give the code some space. In addition to the simple View page source ability that Google Chrome offers, you can also take advantage of their excellent Developer Tools to dig even deeper into a site. These tools will allow you not only to see the HTML, but also the CSS that applies to view elements in that HTML document.

Use the Chrome Devtools Console Filter to hide console errors , The Google Chrome Developer Tools, also known as Chrome browser as if the change had actually been made to the source code. When debugging JavaScript it is sometimes useful to set breakpoints. Have you ever tried to figure out where a hidden style is coming from, say the :hover selector? Debug JavaScript. Rather than using console.log() to infer where your JavaScript is going wrong, consider using the Chrome DevTools debugging tools, instead. The general idea is to set a breakpoint, which is an intentional stopping place in your code, and then step through your code's execution, one line at a time.

Comments
  • You cannot hide any file that's getting loaded on any page. Browser need it to run your website. Obfuscation is making your code harder to read essentially modifying your meaningful variable name like username to a.
  • But this seems to expose all of node_modules! Including the packages' source code!
  • Your browser needs the source code of each library in order to run them. If there are third-party libraries that you don't need at runtime, consider putting them under devDependencies in your package.json
  • Yes I understand! Isn't the transpiled react code located at dist\ folder and delivering them alone is enough? I am perfectly fine exposing code post-bundling, but this seems to be exposing all of my source code! Including all of node_modules!
  • Dont know what is your Chrome settings, but my browser only shows the complied js files that relevant to the project, i.e. component---xxxxx.js, app-xxxxxx.js. Can you check for other websites that are using react and view their source code to see if you can see similar structure folders like yours?
  • This is not compiled code. It is at best minified and uglified, but in the end, it's the exact same code. Nothing is hidden, but just harder to read.
  • @ArnaudChrist not exactly complied, but still not just minified and uglified, i.e. your project is huge but in the end, the app-xxx.js is the final result along with the components are packed into one file
  • True, single bundle which usually is the minified and uglified concatenation of all your project's files. But agree with you, this can be seen as a compilation phase. But I thought it was useful here to add some precision on the fact that the final code is not compiled in the sense that it is hiding the source code.
  • This will disable some ways to open the console in some browsers, but there's nothing you can do to really prevent opening the console.