Any Way to Hide CSS and JavaScript File from the Client-Side User

Any way to hide CSS and JavaScript file from the client-side user?

No. CSS and Javascript must be parsable and readable by the browser, therefore a human can get access to the same data.

It is possible to obscure/compress/minify the javascript, but all that generally does is remove whitespace and rename/shorten variable names. The script is still functional and anyone interesting in how it really works can still figure it out (perhaps by using some tools to reformat it) with a little more time.

The typical reasons for minification is to reduce the download size of your scripts (speeding up site performance), but it also has the side effect of making the code harder to read by a human. One should not count on minification providing any real protection as the code can be reformatted and still understood by anyone determined to do so.

If you need to keep something private, keep the logic on the server and don't put it in the client. Clients can access server-based functionality via ajax if need be.

I've never heard of anyone thinking there was a business reason to protect CSS. It's layout/presentation formatting.

How to protect/Hide Javascript method or JS file from user to view

1. try packing the code/minifiying it

google closure compiler is a good start

there is also a YUI lib that you can use and many others.

This will make your code pretty much impossible to debug in firebug.

There is no full proof way though to stop users for mucking with your code, since it does run on the client side by definition.

1. Another thing you can do is put the methods you want to hide inside of a closure, so that the user cant simply run someMethod() from firebug and have it execute code.

How do I hide javascript code in a webpage?

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.example/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:

1. Put it in an external .js file.
2. 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...
3. 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.
4. 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 what you do, not by having secrets. That's ultimately how success works on the web anyway.

Hiding the source CSS code

So is this code going to hide my css

No

or will fake the users the origin of css..?

No

---

It will make it very slightly harder to spot using View Source… but I haven't see anyone use that as the first approach to examine how a page works for years. DOM inspector tools will show the generated <link> element, and will show the styles applying to any given element along with a link to the stylesheet file they appear in. Network monitoring software (including that which is built into Firebug, Chrome Developer Tools, etc, etc) will show the HTTP requests and responses for the stylesheets too.

---

What it will do, is delay any loading of the CSS until the JS has run. That is all.

This may be so that some CSS is only used in browsers which have JS enabled (the CSS might hide some content which is then only revealed via JS interactions, so the author wants it to default to being visible if it can't later be revealed with JS).

This may be so that the content loads first and gets styled later (as a hack to give content loading performance priority over content styling).

How do I protect JavaScript files?

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

<script type="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.example/my-page.php")
    die("/\*sry, no acces rights\*/");
?>
// your obfuscated script goes here

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

<script type="text/javascript">
    <?php include "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:

<script id="erasable" type="text/javascript">
    //your code goes here
    document.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.

hide javascript from showing up in browser

There is a free javascript obfuscator at javascriptobfuscator.com. It will not prevent dedicated people from "stealing" your code, but normal copy&paste will not be easy.

Also see this question: How can I obfuscate (protect) JavaScript? . It contains some very good answers and also explain how this is security through obscurity.

Is there any way to hide css code from source code

There is NO way to hide the client side components like CSS.

you can check it here

---

Related Topics