How to Develop Safely in HTML5 & JavaScript Environment

Your daily routine is already packed with dozens of things to worry about, the last thing on our minds is how to make sure that our applications are bulletproof, because lets face it – that part of the development process can take up a lot of our time. I hope to give you examples of why is security essential to your JavaScript and HTML5 development environments, and give you an idea of what is out there to help ease the process.

JavaScript has been on a continuous wave of progression, we’re really starting to see what this technology is capable of, and with the release of platforms like Node.js – we’re entering a new era of professional, secure and evolving development process. You should never avoid having a workflow that works for you, instead of having it the other way around.

HTML5 as it stands right now, is still waiting for an official standard release date. W3C wrote about the standard release back in 2011, telling the community that it should expect a standard to be released at some point in 2014, we’re still eagerly waiting for it to happen!

New Features in HTML5

• Cross origin resource sharing
• Content Security Policy
• Web Storage & Web SQL
• New Input and Event tags/attributes
• Web workers
• Sandboxing iframes
• Geolocation

It’s important to emphasize security precautions and implications when it comes to these two programming languages, they’re what most new programmers are suggested to learn (because of the immense documentations available), and we shouldn’t let them fall under the progression trap – by which I mean, everyone should acknowledge security – just because there is no one pointing out the basics.

I highly recommend this HTML5 Security Cheatsheet by OWASP security group. They’ve taken the time to discuss some of the most critical HTML5 features, and how to cope with them. If you’re a serious HTML5 developer, that page should be bookmarked until you know it from the back of your head!

You will find those who are happy about the delayed standard release, and you will find those who’re eager to get their hands on the full HTML5 release. In any case, our browsers are soon going to be able to do a lot more than just browse web pages, or display funny videos. Your browser capabilities in near future:

• Execute code (on or offline)
• Interact with devices (webcam, microphone, GPS,…)
• Play multimedia and accelerate 3D applications
• Open TCP connections (to arbitrary hosts)
• Read and write to local storage (databases and files)
• Spawn threads for parallel computing (workers)

it is within our own hands to pay attention to these things, realizing that we’ve taken the wrong approach late in the development process is going to be both a costly and frustrating thing to deal with. JavaScript in many ways is even worse, because quite often we leave the code exposed from observation by 3rd parties. I might have a solution.

Learning to Obfuscate Your Code

Source code obfuscation is a protection mechanism widely used to limit the possibility of malicious reverse engineering or attack activities on a software system. It is very popular among the JavaScript industry, because JavaScript doesn’t compile, and is available for monitoring with the least amount of effort. What can we do?

JScrambler is a JavaScript code Protection and Optimization service. It can be used to protect all sorts of JavaScript-based Web Applications, from regular HTML/JS ones to Mobile, HTML5, WebGL-Gaming, Browser addons, widgets and even Windows 8 Metro applications. All of these applications have a growing amount of JavaScript, which, because it is sent in clear-text, creates a problem for Software Developers.

You’ve spent a reasonable amount of time developing your applications, why give competition the initiative to simply steal your code? What are the dangers of leaving your code unprotected? Here are some of them:

• Reputation — Your reputation is often the only asset you have towards making people enjoy your applications, if you expose them to vulnerabilities like fraud, who is going to have to pay?
• Competition — If you’re in the market building something unique, there is very likely chance that a competitor is going to monitor your code – algorithms specifically – and use it to their advantage. Do you need this?
• Business — Think of all the hours spent developing, maintaining, rewriting and thinking. Unprotected code is easy to steal, and you could end up being chasing the tail of a competitor who’s based on your own code!
• Investing — Your investors are going to be very sad the day they learn that someone has built a copy version of your application. Obfuscate, and make them happy!

AuditMark is a company that specializes in insuring developers and their applications against malicious attacks, copying attempts, or exposure to unauthorized access. JScrambler is their byproduct, and it specializes in protecting developers and coders against 3rd party intruders.

I’m all about the open web, but once I properly introduced myself to this company and its owners – I realized not only the necessity for this tool, but also how far it has come and how flexible it is when it comes to optimizing code for both small-time application developers, and enterprises. Here are some reasons to use JScrambler:

• Helps to protect your intellectual property – such as algorithms – inside of your JavaScript source codes, by applying state of the art obfuscation techniques to mask and protect the algorithms.
• Protection against your code being reused or directly stolen. It might not be an algorithm that you’ve built, but its possible that the code you built was still a costly effort. Raw JavaScript is very easy to borrow (steal), by applying techniques such as domain lock, and obfuscation – you’re essentially putting two layers of hardened security.
• You can domain lock (code will execute as it should only on that specific domain) and also set an expiration date for your code.
• It adds invaluable layers of security that will be hard to match with other security tools out there. Hackers will have a tougher time finding vulnerabilities in your apps, plus JScrambler works for multiple platforms – making it essential to your workflow.

I think it’s more than clear that we should take our security measures seriously, and perhaps that this piece of software is exactly what we need. I think what really makes this product stand out is their support of multiple platforms.

New Features in JScrambler 3.6

The newest version of JScrambler is now compliant with Node.js – which is helping the AuditMark team to take their software to a completely new audience. We’ve seen what Node.js is capable of, and now that we’ve got tools to help us protect our ideas (code), what’s stopping us from building something new and exciting?

• JScrambler for Node.js applications.
• Easy integration with your build setup. (Gulp, Grunt, etc,.)
• Minification and Compression for Free.

You can explore the full change-log here. I didn’t mention this up until now – but, these guys have really taken their time to understand the developer community, and what their needs are. In reality, this software is built for both beginners, and experts alike. They’ve got plenty of clients to back their claims up.

Learning to Debug Effectively

Effectively debugging JavaScript applications can prove to me a major pain in the you know where. Luckily, we do have a decent set of tools that lessens the pain substantially. Firebug is definitely a must have since it incorporates so much DOM & XHR introspection as well as the Web Developer Toolbar. Chrome has built-in developer tools.

// you can rely on JavaScript's catch function to help with debugging.
 
try {
 
 // your code
 
} catch (e) {
 // Character No
 // Stack Traces
 // Works for cross origin
}

Your real-life debugger is going to be your friend, or coworker. You never realize how many times something can be done differently, until someone walks up to you and points it in your face. Learning to ask the right questions is key to success, and perhaps your friend is actually experienced in the field of application security.

You might also want to check out Web Inspector – it’s a great debugging tool that helps to analyze your code for mobile devices.

‘use strict’; // helps with errors and code problems

Strict mode is a way to opt in to a restricted variant of JavaScript. It helps to be safe when you’re programming in a language without a compiler. You’re exposed to a fatal error at any given time, without any help to assist you.

It’s quite easy to set it up, just add this to the top of your JavaScript files:

'use strict';

unfortunately, it is not going to fix all of your code problems just like that, but it often leads to more messages being thrown out by the browser that you’re using, helping you to better understand the problem that’s arising. Yes, it does work within a function:

function CodeCondo() {
      'use strict';
          ....
}

I linked to the official Mozilla page that has more detailed examples and explanations on strict mode, use it whenever you can.

Learning to Understand Web Security

You’ve got another option, it is to learn more about web security and how it works. HTML5 and JavaScript are both scripting languages, and because of that – they’re very exposed to common web attacks such as Cross-site Scripting, Cross-Site Request Forgery and SQL Injection Attacks.

Your practice in trying to understand web security will result in a better understanding of the code that you’re building, and it will amplify your understanding of things like code obfuscation, and how it really works. You don’t necessarily have to become a hacker overnight, but trying to understand both sides of the coin is gonna be to your own benefit.

Organizations have done a relatively good job with network security. Confronted with reasonably strong defenses at the network layer, hackers have resorted to attacking weaknesses at higher layers of the computing stack.

An even bigger factor has been a shift in attacker motivation. Rather than attempting to gain notoriety, attackers now focus squarely on obtaining valuable information including passwords, credit card details and Social Security numbers, and the resulting financial rewards.

The greater emphasis being placed on application-layer attacks corresponds to the fact that applications are a direct and convenient conduit to this type of data.

How to Develop Safely

You could just be a developer who’s looking to improve his craft, no doubt – this is a very good starting point for you. But, you could also turn out to be a business that is losing thousands of dollars in revenue every day, and why is that? Because of silly mistakes, overlooked problems, and lack of right attention?

I’m quite fond of this topic, more so after I’ve researched it and looked it right into the eyes. Learning to setup a safe development environment for the web (HTML5 & JavaScript) is probably going to be the most precious things that you’ll do for many years ahead.

You might think that something as simple as ‘use strict’ is not worth your attention, or time. Though in the real world, those are the little things that make or break a business module.