How do I hide javascript code in a webpage?

Javascript Problem Overview

Is it possible to hide the Javascript code from the html of a webpage, when the source code is viewed through the browsers View Source feature?

I know it is possible to obfuscate the code, but I would prefer it being hidden from the view source feature.

Javascript Solutions

Solution 1 - Javascript

I'm not sure anyone else actually addressed your question directly which is code being viewed from the browser's View Source command.

As other have said, there is no way to protect javascript intended to run in a browser from a determined viewer. If the browser can run it, then any determined person can view/run it also.

But, if you put your javascript in an external javascript file that is included with:

<script type="text/javascript" src="http://mydomain.com/xxxx.js"></script>

tags, then the javascript code won't be immediately visible with the View Source command - only the script tag itself will be visible that way. That doesn't mean that someone can't just load that external javascript file to see it, but you did ask how to keep it out of the browser's View Source command and this will do it.

If you wanted to really make it more work to view the source, you would do all of the following:

Put it in an external .js file.
Obfuscate the file so that most native variable names are replaced with short versions, so that all unneeded whitespace is removed, so it can't be read without further processing, etc...
Dynamically include the .js file by programmatically adding script tags (like Google Analytics does). This will make it even more difficult to get to the source code from the View Source command as there will be no easy link to click on there.
Put as much interesting logic that you want to protect on the server that you retrieve via ajax calls rather than do local processing.

With all that said, I think you should focus on performance, reliability and making your app great. If you absolutely have to protect some algorithm, put it on the server, but other than that, compete on being the best at you do, not by having secrets. That's ultimately how success works on the web anyway.

Solution 2 - Javascript

No, it isn't possible.

If you don't give it to the browser, then the browser doesn't have it.

If you do, then it (or an easily followed reference to it) forms part of the source.

Solution 3 - Javascript

My solution is inspired from the last comment. This is the code of invisible.html

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="invisible_debut.js" ></script>
<body>
</body>

The clear code of invisible_debut.js is:

$(document).ready(function () {
var ga = document.createElement("script"); //ga is to remember Google Analytics ;-)
ga.type = 'text/javascript';
ga.src = 'invisible.js';
ga.id = 'invisible';
document.body.appendChild(ga);
$('#invisible').remove();});

Notice that at the end I'm removing the created script. invisible.js is:

$(document).ready(function(){
    alert('try to find in the source the js script which did this alert!');
    document.write('It disappeared, my dear!');});

invisible.js doesn't appear in the console, because it has been removed and never in the source code because created by javascript.

Concerning invisible_debut.js, I obfuscated it, which means that it is very complicated to find the url of invisible.js. Not perfect, but enought hard for a normal hacker.

Solution 4 - Javascript

Use Html Encrypter The part of the Head which has

<link rel="stylesheet" href="styles/css.css" type="text/css" media="screen" />
<script type="text/javascript" src="script/js.js" language="javascript"></script>

copy and paste it to HTML Encrypter and the Result will goes like this
and paste it the location where you cut the above sample

<Script Language='Javascript'>
<!-- HTML Encryption provided by iWEBTOOL.com -->
<!--
document.write(unescape('%3C%6C%69%6E%6B%20%72%65%6C%3D%22%73%74%79%6C%65%73%68%65%65%74%22%20%68%72%65%66%3D%22%73%74%79%6C%65%73%2F%63%73%73%2E%63%73%73%22%20%74%79%70%65%3D%22%74%65%78%74%2F%63%73%73%22%20%6D%65%64%69%61%3D%22%73%63%72%65%65%6E%22%20%2F%3E%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%73%63%72%69%70%74%2F%6A%73%2E%6A%73%22%20%6C%61%6E%67%75%61%67%65%3D%22%6A%61%76%61%73%63%72%69%70%74%22%3E%3C%2F%73%63%72%69%70%74%3E%0A'));
//-->

[HTML ENCRYPTER][1] [1]: http://www.iwebtool.com/html_encrypter

Note: if you have a java script in your page try to export to .js file and make it like as the example above.

And Also this Encrypter is not always working in some code that will make ur website messed up... Select the best part you want to hide like for example in <form> </form>

This can be reverse by advance user but not all noob like me knows it.

Hope this will help

Solution 5 - Javascript

'Is not possible!'

Oh yes it is ....

//------------------------------
function unloadJS(scriptName) {
  var head = document.getElementsByTagName('head').item(0);
  var js = document.getElementById(scriptName);
  js.parentNode.removeChild(js);
}


//----------------------
function unloadAllJS() {
  var jsArray = new Array();
  jsArray = document.getElementsByTagName('script');
  for (i = 0; i < jsArray.length; i++){
    if (jsArray[i].id){
      unloadJS(jsArray[i].id)
    }else{
      jsArray[i].parentNode.removeChild(jsArray[i]);
    }
  }      
}

Solution 6 - Javascript

I'm not sure there's a way to hide that information. No matter what you do to obfuscate or hide whatever you're doing in JavaScript, it still comes down to the fact that your browser needs to load it in order to use it. Modern browsers have web debugging/analysis tools out of the box that make extracting and viewing scripts trivial (just hit F12 in Chrome, for example).

If you're worried about exposing some kind of trade secret or algorithm, then your only recourse is to encapsulate that logic in a web service call and have your page invoke that functionality via AJAX.

Solution 7 - Javascript

I think I found a solution to hide certain JavaScript codes in the view source of the browser. But you have to use jQuery to do this.

For example:

In your index.php

<head>
<script language = 'javascript' src = 'jquery.js'></script>
<script language = 'javascript' src = 'js.js'></script>
</head>

<body>
<a href = "javascript:void(null)" onclick = "loaddiv()">Click me.</a>

<div id = "content">
</div>

</body>

You load a file in the html/php body called by a jquery function in the js.js file.

js.js

function loaddiv()
{$('#content').load('content.php');}

Here's the trick.

In your content.php file put another head tag then call another js file from there.

content.php

<head>
<script language = 'javascript' src = 'js2.js'></script>
</head>

<a href = "javascript:void(null)" onclick = "loaddiv2()">Click me too.</a>

<div id = "content2">
</div>

in the js2.js file create any function you want.

example:

js2.js

function loaddiv2()
{$('#content2').load('content2.php');}

content2.php

<?php
echo "Test 2";
?>

Please follow link then copy paste it in the filename of jquery.js

http://dl.dropbox.com/u/36557803/jquery.js

I hope this helps.

Solution 8 - Javascript

You could use document.write.

Without jQuery

<!DOCTYPE html>
<html>
<head><meta charset=utf-8></head>
<body onload="document.write('<!doctype html><html><head><meta charset=utf-8></head><body><p>You cannot find this in the page source. (Your page needs to be in this document.write argument.)</p></body></html>');">
</body></html>

Or with jQuery

$(function () {
  document.write("<!doctype html><html><head><meta charset=utf-8></head><body><p>You cannot find this in the page source. (Your page needs to be in this document.write argument.)</p></body></html>")
});

Solution 9 - Javascript

Is not possbile!

The only way is to obfuscate javascript or minify your javascript which makes it hard for the end user to reverse engineer. however its not impossible to reverse engineer.

Solution 10 - Javascript

Approach i used some years ago -

We need a jsp file , a servlet java file and a filter java file.

Give access of jsp file to user. User type url of jsp file .

Case 1 -

Jsp file will redirect user to Servlet .
Servlet will execute core script part embedded within xxxxx.js file and
Using Printwriter , it will render the response to user .
Meanwhile, Servlet will create a key file .
When servlet try to execute the xxxx.js file within it , Filter
will activate and will detect key file exist and hence delete key
file .

Thus one cycle is over.

In short ,key file will created by server and will be immediatly deleted by filter .

This will happen upon every hit .

Case 2 -

If user try to obtain the page source and directly click on xxxxxxx.js file , Filter will detect that key file does not exist .
It means the request has not come from any servlet. Hence , It will block the request chain .

Instead of File creation , one may use setting value in session variable .

Solution 11 - Javascript

It's possible. But it's viewable anyway.

You can make this tool for yourself:

const btn = document.querySelector('.btn');
btn.onclick = textRead;
const copy = document.querySelector('.copy');
copy.onclick = Copy;
const file = document.querySelector('.file');
file.type = 'file';
const pre = document.querySelector('.pre');

var pretxt = pre;

if (pre.innerHTML == "") {
    copy.hidden = true;
}

function textRead() {
    let file = document.querySelector('.file').files[0];
    let read = new FileReader();
    read.addEventListener('load', function(e) {
        let data = e.target.result;
        pre.textContent = data;
    });
    read.readAsDataURL(file);
    copy.hidden = false;
}

function Copy() {
    var text = pre;
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(text);
    selection.addRange(range);
    document.execCommand('copy');
    selection.removeAllRanges();
}

<input class="file" />
<br>
<button class="btn">Read File</button>
<pre class="pre"></pre>
<button class="copy">Copy</button>

How to use this tool?

Create a JavaScript file.
Go in the tool and choose your JavaScript file.
Copy result.
Paste the result in Notepad.
Remove data:text/javascript;base64,.
Paste eval(atob('Notepad Text')) to your code and change Notepad Text to your Notepad text result.

How to view this hidden code?

Copy the hidden code and paste it in Notepad.
Copy a string that after eval and atob.
Paste data:text/javascript;base64,String and change String to your copied string.

Solution 12 - Javascript

Put your JavaScript into separate .js file and use bundling & minification to obscure the code.

http://www.sitepoint.com/bundling-asp-net/

Content Type	Original Author	Original Content on Stackoverflow
Question	arun nair	View Question on Stackoverflow
Solution 1 - Javascript	jfriend00	View Answer on Stackoverflow
Solution 2 - Javascript	Quentin	View Answer on Stackoverflow
Solution 3 - Javascript	Armand Arapian	View Answer on Stackoverflow
Solution 4 - Javascript	HINAYUPAKS	View Answer on Stackoverflow
Solution 5 - Javascript	Addinall	View Answer on Stackoverflow
Solution 6 - Javascript	Mark Carpenter	View Answer on Stackoverflow
Solution 7 - Javascript	Jepp	View Answer on Stackoverflow
Solution 8 - Javascript	Blue Sheep	View Answer on Stackoverflow
Solution 9 - Javascript	gabriele brunori	View Answer on Stackoverflow
Solution 10 - Javascript	Bhushan Mahajan	View Answer on Stackoverflow
Solution 11 - Javascript	Programmer	View Answer on Stackoverflow
Solution 12 - Javascript	Asad Naeem	View Answer on Stackoverflow