How Do I Protect Javascript Files?

I know it's impossible to hide source code but, for example, if I have to link a JavaScript file from my CDN to a web page and I don't want the people to know the location and/or c

Solution 1:

Good question with a simple answer: you can't!

Javascript is a client-side programming language, therefore it works on the client's machine, so you can't actually hide anything from the client. Obfuscating your code is a good solution, but it's not enough, because, although it is hard, someone could decipher your code and "steal" your script. There are a few ways of making your code hard to be stolen, but as i said nothing is bullet-proof.

Off the top of my head, one idea is to restrict access to your external js files from outside the page you embed your code in. In that case, if you have

<scripttype="text/javascript"src="myJs.js"></script>

and someone tries to access the myJs.js file in browser, he shouldn't be granted any access to the script source. For example, if your page is written in php, you can include the script via the include function and let the script decide if it's safe" to return it's source. In this example, you'll need the external "js" (written in php) file myJs.php :

<?php$URL = $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
    if ($URL != "my-domain.com/my-page.php")
    die("/\*sry, no acces rights\*/");
?>// your obfuscated script goes here

that would be included in your main page my-page.php :

<scripttype="text/javascript"><?phpinclude"myJs.php"; ?>;
</script>

This way, only the browser could see the js file contents.

Another interesting idea is that at the end of your script, you delete the contents of your dom script element, so that after the browser evaluates your code, the code disappears :

<scriptid="erasable"type="text/javascript">//your code goes heredocument.getElementById('erasable').innerHTML = "";
</script>

These are all just simple hacks that cannot, and I can't stress this enough : cannot, fully protect your js code, but they can sure piss off someone who is trying to "steal" your code.

Update:

I recently came across a very interesting article written by Patrick Weid on how to hide your js code, and he reveals a different approach: you can encode your source code into an image! Sure, that's not bullet proof either, but it's another fence that you could build around your code. The idea behind this approach is that most browsers can use the canvas element to do pixel manipulation on images. And since the canvas pixel is represented by 4 values (rgba), each pixel can have a value in the range of 0-255. That means that you can store a character (actual it's ascii code) in every pixel. The rest of the encoding/decoding is trivial. Thanks, Patrick!

Solution 2:

The only thing you can do is obfuscate your code to make it more difficult to read. No matter what you do, if you want the javascript to execute in their browser they'll have to have the code.

Solution 3:

Just off the top of my head, you could do something like this (if you can create server-side scripts, which it sounds like you can):

Instead of loading the script like normal, send an AJAX request to a PHP page (it could be anything; I just use it myself). Have the PHP locate the file (maybe on a non-public part of the server), open it with file_get_contents, and return (read: echo) the contents as a string.

When this string returns to the JavaScript, have it create a new script tag, populate its innerHTML with the code you just received, and attach the tag to the page. (You might have trouble with this; innerHTML may not be what you need, but you can experiment.)

If you do this a lot, you might even want to set up a PHP page that accepts a GET variable with the script's name, so that you can dynamically grab different scripts using the same PHP. (Maybe you could use POST instead, to make it just a little harder for other people to see what you're doing. I don't know.)

EDIT: I thought you were only trying to hide the location of the script. This obviously wouldn't help much if you're trying to hide the script itself.

Solution 4:

Google Closure Compiler, YUI compressor, Minify, /Packer/... etc, are options for compressing/obfuscating your JS codes. But none of them can help you from hiding your code from the users.

Anyone with decent knowledge can easily decode/de-obfuscate your code using tools like JS Beautifier. You name it.

So the answer is, you can always make your code harder to read/decode, but for sure there is no way to hide.

Solution 5:

From my knowledge, this is not possible.

Your browser has to have access to JS files to be able to execute them. If the browser has access, then browser's user also has access.

If you password protect your JS files, then the browser won't be able to access them, defeating the purpose of having JS in the first place.