I have seen many obfuscated codes, however, recently I came across this code: paste2.org. The latter uses arguments.callee.toString().replace(/[\s\'\"\)\}\]\[\;\.\{\(]/g, "").length; to prevent programmer from simply replacing eval() with document.write or something similar. I was wondering how do I obfuscate the code this way myself? Is there any tool for that? (p.s. note that arguments.callee.toString().repl[..] is called two times) Going deeper. Even when you get trough this stage, the code is complete mess. Variable/function names are randomized, while the strings are complete mess and look something like this: $(kj49f+4kd+fgdff+hgd25+fh2fg5+adb5) which evaluates to simply $('.wrapper .foo[name"bar"]'). What was used to do that? I have recently came across jscrambler.com which is paid JS obfuscation service. I was wondering if it is the thing that was used to obfuscate the code.
After few weeks of research, I've discovered that the program used to obfuscate the code in example is http://jscrambler.com/. This is actually a commercial software. Do I recommend it? Hm. Not sure, as I am writing this comment (May 21, 2011), it is still in pretty early stage of development & I've faced multiple issues. Though, they are quite quick to sort them out once reported.
Related
I'd like to start a discussion on the best resources for refactoring tips, with an eye towards Front-End JavaScript refactoring.
A friend whose opinion I respect suggests this book, though it uses examples in Java. I understand that the principles of OO refactoring should translate to another language.
Let's talk about refactoring in general and JS refactoring specifically.
Check out Martin's Clean Code for some inspiration. The examples are in Java but the ideas should translate to JavaScript as well.
In order to refactor properly, you'll need to test your code well as having proper tests in place is a prerequisite for it. Try finding testing tools that give you code coverage as this will be extremely valuable.
In case your code hasn't been tested yet you can think testing as a method of learning. You write tests to prove or disprove your assumptions about it. Once you are done and covered it adequately you should be able to refactor the code using various patterns provided.
As Ira mentioned having a tool to detect clones may be valuable. That's definitely one way to look at it.
I think that often having proper perspective is half the solution. If you can state your design in clear terms, you'll end up with better results. Try not to over-engineer it too much by applying every possible pattern you find. :)
Not specifically a refactoring tool, but a tool to detect the number one smell in code: our CloneDR automatically finds duplicated code (copy/paste/edit) and shows you the precise locations and a reasonable abstraction of each clone. You have to resolve the clones by hand, but knowing where they are and having been provided that first cut at an abstraction, is a big help.
EDIT: This is directly a resource for refactoring of Java and JavaScript code. CloneDR works for both of them, using langauge-precise parsing to give precise analysis of clones.
You can see sample clone detection results on Google's Javascript Closure package.
I code CSS/XHTML like it should be my mother language, and I do write valid, semantic code following guidelines of accessibility and such.
But I want to learn Unobtrusive JavaScripting, but with a total non-programmer brain I need some motivation / tips / etc., like what's the best way to learn it, and how long does it take/did it take you before you could feel the power of knowledge? :)
PS: I do have an understanding on how JavaScript works and changes the DOM etc.. I think it's more about learning the syntax by head instead of having to look it up.
See also:
Suggestions for someone starting javascript programming.
Just use it. Really, the more time you spend reading and writing the language, the more natural it becomes. Use Firebug or an equivalent console to test short ideas; take an existing web page and wire up events interactively from the command line, get used to the idea of writing behavioral code as a separate process from writing markup.
If you want a good book, i can recommend the excellent jQuery in Action - yes, it's targeted at jQuery users, but the concepts apply regardless of your choice in libraries.
Motivation, sorry can't help there.
Syntax is learned by rote. The rules are simple, and reasonably consistent, so in truth syntax isn't that hard.
What you conflate with syntax are likely the other aspects like what properties are available on what objects, what functions to call, what does your framework provide. That, again, is basically rote memorization.
Many frameworks add a little bit of syntax through clever use of the JavaScript syntax, and you'll need to learn those as well.
But when it all comes down to it, the only way to learn this stuff is to use it.
You can't read about it, you have to do it.
Find an issue that you want to work on, a feature for your site or whatever, and attack that.
If you find a tutorial or whatever on line that does what you want, TYPE IN THE CODE, don't cut and paste it. As you type it in, question every symbol or character, try to understand why you're typing what you are typing.
Make an effort to change things, even if it's just variable names, because then you get a better idea of what things are being used for, and how they're referenced. It also lets you focus on a small part of the larger program.
If you're changing the "window1" variable to "myWindow", then at least you can look at the code as "blah blah blah window1 blah blah window1" without having to understand all of it.
Start small, don't worry about "doing it right", etc. so much as just being successful. If the way it's done doesn't bother you, then you're good. If you look at it and go "That's not quite right" because you learned something later after you started, then go back and clean it up.
At this stage, function is greater than form. Much of the form simply comes from experience.
Depends on what you want to do. Are you a successful web designer who's considering getting into the development side? Forge ahead, but tread cautiously. JavaScript can be easy to start with, but it can get ugly very quickly. And it's very different from any server-side language (including Java). Some of your JavaScript skills will translate to other languages, (conditional and control-flow operators, for example). But some things are unique to JavaScript and will require some relearning if you move to another language.
Also, some things in JavaScript won't completely make sense unless you've done object-oriented development; even though JavaScript is "prototype-based" rather than strictly object-oriented, without the OO concepts to relate to, the prototyping system may be difficult to understand. The typing system also may not make much sense if you don't have a lot of experience with different typing systems (static vs. dynamic, explicit vs. implicit).
Use a good framework like jQuery or YUI, but be sure to understand what's going on behind the scenes. Shog9's suggestion to use FireBug is a good one, too. It will show you what's going on (without having to do a lot of alert() statements in your code).
Your HTML DOM and CSS experience will help some, but only in the sense of understanding what the JavaScript is trying to do. Having written HTML and CSS by hand won't help you learn to write JavaScript; HTML and CSS are document markup languages, not imperative programming languages.
So go for it, but don't expect it to be easy. You may make a lot of quick progress, only to find that you're not as far along as you think, and that things don't work the way the appear to. But with enough effort and research you'll probably get there.
I think learning Javascript is a great idea if you are all ready doing HTML and CSS. Javascript is a cool, but quirky language. Most people that use don't really know how to write good JS code. I highly recommend watching Douglas Crockford video, see http://video.yahoo.com/watch/111593
They will give the real scoop on Javascript.
I've recommended JavaScript: The Good Parts before (and can't recommend it highly enough), but if you're new to programming I suggest starting with Head First JavaScript.
(source: oreilly.com)
I think you've got an abundance of great answers and resources already, but I'd like to chime in, too, since I've seen a couple of jQuery recommendations:
I love jQuery, too, and use it nearly daily. That said, for a beginner, I would recommend that you be comfortable with javascript proper first before diving into jQuery. Being comfortable with the syntax, variables, scope, and at least some DOM concepts will greatly improve your understanding of how to do what you want with jQuery. If you try to speed too quickly past the fundamentals, you'll definitely get stuck on some common misunderstanding that jQuery won't be able to help you with.
http://codeavengers.com level 1 JavaScript is great for the complete beginner. I created the courses and have had lots of great feedback from beginners who have found my course a fun and effective way to learn JavaScript.
I understand that client side code must be readable from the browser but I wonder (since there are too many things that I ignore) if there are ways to obfuscate to code to the end user and, if not what is the best practice to "pack" the javascript code.
It is good practice to minify your JS with a tool such as YUI Compressor. I would not obfuscate it unless you have a specific need to do this. There are plenty of online obfuscators such as this one
See this article: http://developer.yahoo.net/blog/archives/2007/07/high_performanc_8.html
Check this out.
Other than min'ing it, I don't think you can really hide js. It all goes the user's browser and there are plenty of ways of seeing it once its there.
See here for a Free Javascript Obfuscator.
Given that it is in fact possible, if the reason you intend to obfuscate is to protect intellectual property, you are probably trying to derive value from your work the wrong way. It's fairly easy to reverse the obfuscation, and you would probably be wasting time maintaining your code.
Focus more on what services you intend to provide to those who visit your site as a means to differentiate your site from competitors
There are tools that could be used to compress javascript code and render it difficult for the end user to understand.
Is there a reason why this won't do the trick for you?
http://www.javascriptobfuscator.com/
Do not put any sensitive or personal information in javascript.
Spend your time on keeping your data on the server secure.
Step 1: Don't.
You would have to do a lot to achieve any meaningful level of obfuscation. Obfuscating the names alone is not enough, since all of the standard functions will still be there (although they may be buried in a layer of shorter/obfuscated aliases), and deriving the purpose of a particular function is easy once the code is formatted nicely again. Anybody who really wants to know what your JS code does can, and will, no matter what you do to it before their browser gets a copy of it.
If you truly have valuable business processes in your JavaScript, then you're Doing It Wrong(tm).
No obfuscation is going to keep your code truly secure and it might just give you the false illusion of security (cf. security by obscurity).
If you do need to keep some portion of your code secret, consider pulling the sensitive portions into a server side script and making (say) AJAX calls to the script. Especially with the advent of JSON, communicating with server-side scripts has never been easier.
It is possible to use following tools:
YUI Compressor - requires Java - very good compressor
Packer - creates the most confusing, and smallest code, but scripts don't run as fast as YUI - this can be used online though. Select 'Base62 encode' for maximum effect.
The Dojo Compressor I've never used this one, but it's on the top-list. It also requires Java.
JSMIN By Douglas Crockford, this one has a very simple algorythm, but it is still good. Meant to be used in combination with JSLint.
How can I garble JavaScript code before sending it to client-side? I don't want to expose functionalities. The code is already compressed using jsmin.
You need an obfuscator, see this for an example.
Anyone determined enough can always reverse it though, and tools like this can help.
Javascript is interpreted plaintext. As such any obfuscation is a placebo at best and easily reversed.
More to the point, if you're writing enough Javascript to constitute a work valuable enough to protect, you're doing something wrong.
My Javascript these days consists of including jQuery, a handful of plug-ins and some code to activate those plug-ins and do some styling.
I have a hard time envisioning writing anything in Javascript significant enough that I'd care about protecting it, which is just as well because you can't protect it. Not really.
You could try some online obfuscator like this:
http://www.javascriptobfuscator.com/Default.aspx
Search google for: Javascript obfuscator
You might add your platform to the query, as well. There are plenty of tools already out there that you can incorporate into your project.
A word of warning: most obfuscated JS on the internet is security hole exploit code. You risk being mistaken for a sploit, particularly by the more paranoid anti-virus scanners.
I have extensively used Prototype before and it helped us add considerable interactivity to our web applications. However we are looking at making the move to use jQuery in order to standardize on something better supported in Visual Studio.
I understand that we can use the jQuery.noConflict to run it alongside Prototype, but we would like to avoid having users need to download both libraries to use our website.
So, is there a good resource that can help us move old scripts from Prototype to jQuery?
I can't really help you too much with your question, other than to say that I haven't heard of any such tool, and that I'd be really surprised if one actually existed.
While I think jQuery is a great library, and that you're right to be wanting to only use one library, just remember that the cost of you changing over all your scripts is going to be many many hours of work. The cost of your users downloading an extra 30kb of scripts is going to be roughly 0.3 seconds. Perhaps try to slowly phase out Prototype and only refactor your existing pages when a) you have to, or b) if you've got nothing better to do.
Falkayn,
There is no automated process available for conversion of JavaScipt code written against one JS library to another one. Moreover there cannot be one. Different libraries implement different proramming models as well as they arrange their APIs in different manner.
So, before you have found a solution to your problem now ask yourself a question: Am I going to convert my jQuery code once another even "cooler" "X-type" JavaScript library became available?
If your answer is no, take your time and convert the code manually no mater how long will it take. In case you answer "yes" don't convert the code at all.
So it goes.
Thanks guys for your input. I was looking for more of a syntax comparison than anything automated, but nickf makes a good point in that the real cost need not be too great. We only used Prototype on a few pages that really needed a high level of interactivity, so as long as mind out Ps and Qs it should not hurt to use jQuery everywhere else.