Obfuscation in JavaScript

I love the word obfuscation. It seems to reflect its own definition. To obfuscate something is to make it difficult to understand.

So why would we want obfuscation in JavaScript. Well, let me give you an example. Recently I was working on a project where we had to connect to an online system. The online system did not have the security fully implemented yet, and as a result we had to include some of the details about the system in the JavaScript code. Well, we didn’t want it to be super simple for someone to discover that information. We wanted to hide it a bit. So the solution…we obfuscated that portion of the JavaScript code.

I learned about a couple of sites that help do this. They obfuscate your JavaScript code by moving things around and converting information to Hex. I used both of these locations. I would pass the code through the first location and then pass the results through the second. Technically, someone could figure it out, but it is quite difficult. Drop some code in, obfuscate it, and then see if you can make heads or tails of it.

https://javascriptobfuscator.com/Javascript-Obfuscator.aspx

https://www.daftlogic.com/projects-online-javascript-obfuscator.htm

Finding JavaScript Libraries and Frameworks

Several weeks ago I wrote about javascripting.com. At that time I had just discovered the site and found it very helpful in providing information about JavaScript libraries and frameworks. Since that time I have created a video on the All Things JavaScript YouTube channel that talks about three sites that can be used for gathering information about libraries and frameworks.

The tutorial not only provides more information on javascripting.com, but also talks about microjs.com and Github’s explore page. If you have found javascripting.com helpful, you may also enjoy the information on the other sites. He is the tutorial that was recently releases on the YouTube channel.

Trying Out Thimble by Mozilla

A couple of weeks ago I first learned about Thimble while reading one of the several newsletters I receive each week. Quoting directly from the Thimble web site, it is an online code editor that makes it easy to create and publish your own web pages while learning HTML, CSS & JavaScript.

The tool seems to be designed for younger kids, but it looks helpful to anyone that is just starting in web development and needs to learn HTML, CSS. You can view a quick introduction video, create an account and get started by visiting the Thimble web site.

Here are a list of features that Thimble offers:

  • You can start a new web page by copying an existing web page. This is called remixing in Thimble. This is a great option for beginners. You get to see the HTML, CSS and JavaScript, make tweaks and see how those tweaks change the site. If you choose to, you can also start a web page from scratch.
  • The Thimble editor consists of three areas: a file manager, a code editor and a preview pane. This allows for ultimate flexibility as you try out different things. You can add additional pages via the file manager. You can then build or edit pages using the code editor. When you make changes in the code editor, those changes automatically show up in the preview pane.
  • Assistance features are provided to help you learn. For example, you can highlight a CSS attribute or an HTML tag, press Alt+k and the code editor will display a description of the tag or CSS attribute. I tried to do this with JavaScript reserved words, but it didn’t seem to work.
  • Some projects have a tutorial file that walk you through a short tutorial different techniques for that site.
  • Once you have created a site, you can publish it to the web. You are provided with a URL that you can share with others. This is a great option for younger learners.

Go ahead and give Thimble a try and see if it is the type of tool that could aid in your web development learning.