Is there any way to hide the CSS and JavaScript file from the client-side user and still embed it in the webpage shown to the 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.
You can always minify the JavaScript file to make it harder for someone to reads it or to modify it.
For example : http://www.minifyjavascript.com/
You can also do the same thing with CSS.
http://developer.yahoo.com/yui/compressor/ (it can do both JavaScript and CSS)
There are other sites that offers a way to minify the files, but there is no way to hide it completely from the client-side.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With