Category: Client-Side Security

JavaScript’s versatility and ability to write complex, responsive programs make it the perfect programming language for the Internet of Things (IoT).

Its reputation for providing users with beautiful, interactive websites is not where its usefulness ends. JavaScript is also used to create mobile applications and cross-platform desktop software. Thanks to Node.js, this programming language can develop and run servers and databases!

Given its ubiquitous nature, it is only natural that it would be considered a fitting language in this new Internet of Things, a term coined in 1999 by British entrepreneur Kevin Ashton.

Let’s dive into the meaning of IoT and explore the role JavaScript will play in it, if any.

What is the Internet of Things?

Up until recently, most of the information in the cloud was human-consumable. The information it contained has been accessed by and about people.

IoT aims to create a network of things, from electronic devices and sensors to even people themselves. They not only have access to this wealth of information but is also capable of communicating with it and each other.

Supporters of this movement often cite many benefits, a few of which include improved automation in nearly every industrial field, an improved economy, lower pollution, and so on.

The Perfect Programming Language for IoT: JavaScript

JavaScript, originally designed as a web scripting language, evolved into something else. Drawing from its versatility, it is now perfect for creating IoT networks and devices.

Also, it can be used to write complex, responsive programs. IoT is becoming more popular. Consequently, developers have to devote more time to technology.

The popularity of JavaScript has ensured its place as one of the foundation languages. Its usefulness in enterprise applications is well-known.

What is the JavaScript Role in the Internet of Things?

You do not have to be a die-hard JavaScript fanatic to appreciate the many benefits given to developers regarding IoT, as described below.

JavaScript benefits to the Internet of Things

1. JavaScript is easy to learn.
   JavaScript is an easy programming language to learn. You can pick up the basics over the weekend.
   
   If you have a web browser, you have what you need to begin learning JavaScript. The ease of startup means that entry-level developers can get instant feedback while programming. Helpful for those who learn by doing.
   
   

2. JavaScript is already a common language across the Internet.
   JavaScript is already a common language across the Internet, so it only makes sense to include it in devices that will become part of it.
   
   

3. There is a community of developers.
   JavaScript already has a community of developers who contribute to the language. You can find and use thousands of resources, including YouTube videos, newsletters, blogs, events, and tutorials, to improve your knowledge.
   
   

4. Its event-driven architecture fits perfectly with how the world operates.
   We live in an event-driven world. We act and react to different events, which is how JavaScript operates.
   
   This event-driven modality is also more efficient for sensors.,battery life, and CPU usage.
   

JavaScript Versus C for Embedded Systems

Regardless of the benefits, there is still some debate as to whether JavaScript is up to the task.

Let’s take a look at a comparison between JavaScript, the language of the Internet, and C, the standard go-to language for embedded systems programming.

JavaScript

JavaScript is a high-level language. While this usually means that it is more human-readable and more user-friendly, the downside is that this can also make it somewhat slower. Being slower means that it may not be suitable for situations where timing and speed are critical.

However, if speed is a requirement, Peter Hoddie says that using a JIT (Just-In-Time) compiler or using asm.js, which is an optimized subset of JavaScript, may help get that performance boost you need. While this does require additional memory on the microcontroller itself, new lines of microcontroller boards are coming out that are designed with this in mind, giving developers the best of both worlds.

JavaScript’s event-driven architecture is also perfect for listening and reacting to input and output events like button presses and information received from sensors. Another huge benefit is the drastically decreased power consumption and CPU usage, an important facet considering the small size of microcontrollers these days.

C

Typically, C is the go-to language for embedded systems programming. The main reason is that C is a low-level language, meaning that, although it’s still in a human-readable form, it’s much closer to machine language than JavaScript.

This proximity to machine language makes it extremely fast, efficient, and reliable.

There are some disadvantages, though:

• The learning curve is steeper;

• It is not as easy of a language to learn as JavaScript.
  
  

This may not be a block to avid developers, but for hobbyists, it can play a huge role in whether or not a project gets completed.

The Internet of Things is Already Here

If you’ve been wanting to start tinkering with some user-friendly electronics — and if you don’t feel like learning a complicated language to do so — you’re in luck!

Here are some popular JavaScript-enabled development boards to help get you started.

Espruino

The Espruino is a small microcontroller that runs JavaScript. It has little power draw, boasting a battery life of up to a year. It does not require a complicated IDE. You only need a terminal.

The best part is that, depending on the needs of your device, you can even compile your JavaScript code into C! Unfortunately, there is only limited support for that at the moment.

Tessel 2

The Tessel 2 is a development board with integrated Wi-Fi, an ethernet port, two USB ports, and two Tessel module ports.

Each Tessel module has a companion source library downloadable via the Node Package Manager, and there are plenty of tutorials and instructions available online to get you up and running quickly.

Kinoma Create

The Kinoma Create dubbed the JavaScript-powered Internet of Things construction kit, is a full-featured prototyping tool with tons of plug-and-play capabilities — all right out of the box!

Attractive features: touch screen, Wi-Fi, Bluetooth connectivity, and a micro-SD slot.

Time to Get Started

JavaScript for embedded systems is still in its infancy, but we suspect that major advancements are on the horizon.

If you’re a hobbyist or looking to build out that prototype you’ve been dreaming of, JavaScript is a great way to get your feet wet, learn a thing or two — and have fun doing it!

JavaScript is everywhere, and protecting it may not be enough. It is mandatory to use a trustworthy obfuscation service. Trust, but verify, as free JavaScript obfuscator services may be unexpected sources of attack vectors.

GitHub highlights that JavaScript has the highest number of contributors and repositories, handily outpacing other alternatives such as PHP, Python, and Ruby.

Why is a Free Obfuscator not Always Free?

According to the Sucuri blog, a free JavaScript obfuscator embeds malicious code into the source code and obfuscates it afterward to conceal both the source code and the malicious payload.

The unsuspecting victim has no idea that the obfuscated code includes malicious logic and deploys it into the Wild Wild Web. A few days later, spam started popping up on the website. Only after some time and pulling some hair out does the victim start to connect the dots.

We already knew that obfuscation was being used to make malicious code more stealthy to antivirus software, but this is different. In this case, you’re obfuscating, packaging, and delivering the malware yourself.

The malware creator sets his trap and goes for a drink. Luckily, the malware wasn’t doing something more dangerous like stealing user data or authentication credentials, which is common in Man-in-the-Browser attacks. After discovering something was wrong, it wasn’t hard to reverse engineer the obfuscated code and find the embedded malicious code.

Responsibly-Sourced Security

How can we verify if the obfuscated code hides malicious logic?

Well, you will have to analyze the obfuscated code and the environment where it is running.

Also, avoid free services from non-trustworthy sources, and the risk of an attack like this is reduced almost to zero.

Are you willing to take the risk? There is the possibility of reverse-engineering the code before each deployment. However, this is not a desirable procedure, and most people have no idea where to begin. Even if someone has the know-how, the time that such a task could take would be better invested in coding the next feature of the application.

For those who care about protecting their Intellectual property and overall security, taking this risk is not an option. Going with a professional, trustworthy product is the best choice if you aim to obfuscate your code without any hassle or harm to your reputation.

Choices to enhance client-side security

This might make you think of a similar trust issue that is also related to JavaScript source code and the use of third-party CDNs. How can someone trust that resources uploaded from a third-party server contain only the expected logic?

There is a solution quite simple and elegant in the making called subresource Integrity.

If you have client-side JavaScript code worth protecting, check out the Jscrambler free trial or request a demo from our team of experts. Go beyond obfuscating source code or JavaScript obfuscation.

Get ready for the Jscrambler 3.8 release! What does this mean to you? We will explain everything in this quick release note, where we provide information on changes and enhancements in each product release.

Shortly, in the Jscrambler 3.8 release, you will be able to have fine-grain control over the public identifiers that are renamed.

New modes to control renaming

Automatic and safe renaming of all identifiers is hard in JavaScript because the language is too dynamic.

Up until now, every time you used Rename All, you had to double-check for broken naming references and exclude them from being renamed.

This often led people to use Rename Local instead of Rename All.

In Jscrambler 3.8, we included two new modes to control how renaming works and easily select which identifiers should be targeted.

From now on, you will be able to have fine-grained control over the public identifiers that are renamed.

Unsafe Mode

It leaves out all identifiers that are part of HTML5/JS native APIs, but it renames all the rest, regardless of whether they are defined or not, which in some cases may lead to errors.

Source code:

var varDefined = 1;

function fnDefined(paramLocal) {
    window.alert(paramLocal);
}
fnDefined(varDefined);
fnNotDefined(varNotDefined);

UNSAFE mode:

var d = 1;

function e(a) {
    window.alert(a);
}
e(d);
c(b);

Safest Mode

You can’t go wrong with this one. This mode only renames identifiers whose definition can be found inside the source code, thus avoiding code errors. It’s a safer, less aggressive version.

source code:

var varDefined = 1;

function fnDefined(paramLocal) {
    window.alert(paramLocal);
}
fnDefined(varDefined);
fnNotDefined(varNotDefined);

SAFEST mode:

var b = 1;

function c(a) {
    window.alert(a);
}
c(b);
fnNotDefined(varNotDefined);

Include and Exclude Lists

Regardless of the mode you use, you can always add or remove names from being renamed using two lists. This way, the power is yours, and errors or unwanted renaming will be gone forever.

Include List: Is there an identifier you really want to rename? Put it on this list. Identifiers placed here will be renamed, whether their definition is found or not (Safest Mode);

Exclude List: If any identifier is present here, it won’t be renamed. If your code somehow stops working, you can pick the identifier that is causing the issue and make sure it is excluded from the targets. End of story!

More Potency

By targeting more names, the obfuscation becomes instantly more potent. After all, names are one of the main things in the code that help us understand its meaning.

Don’t forget that those extra names that we’ll be able to remove from the code will also be targeted by other transformations that will make the end result even more difficult to grasp. All of this is done in a safe, controllable way.

Jscrambler 3.8: What does this mean for you?

With Jscrambler, Rename All doesn’t have to be a pain anymore and you can save time for other things, like enjoying your summer, coding your million-dollar idea, or knitting…

It’s whatever you prefer.

Paul Krill explains how JavaScript and Node.js will lead a shift in enterprise development with a quick guide about JavaScript application development for businesses and its advantages.

The editor at Large, InfoWorld, argues that JavaScript libraries and frameworks will change enterprise development workflow as we know it today. 

In this blog article, we will delve into the process of developing JavaScript in enterprise ecosystem applications and their advantages for businesses.

The popularity of JavaScript

There is no doubt that server-side JavaScript is becoming widely popular as more and more companies adopt Node.js as the core of their stack.

Considering the growth of Node.js as a popular JavaScript runtime environment to create server-side applications, consider protecting your Node.js source code with the most advanced polymorphic obfuscation techniques.

JavaScript’s Advantages and Benefits

Its lightweight, robustness, and parallel nature are why companies are moving away from Java, .NET, and other major languages and frameworks.

It also grants the possibility of fast prototyping. It makes it easy to integrate hundreds of third-party packages that solve problems that most applications face, saving tons of time that could be spent focusing more on the actual product.

Another benefit of using JavaScript on the server side is that Full-stack Engineers don’t have to constantly change contexts between client and server-side code. The language is the same on both, which improves productivity and saves several headaches in the long run.

Less code to switch and convert data around means fewer bugs.

Types of JavaScript Applications

JavaScript is a web development language that operates within web browsers and has two different types of applications:

1. Hybrid-Based Applications

2. Native-Based Applications
   
   

Hybrid-Based Applications

One of the JavaScript application’s essential components is its integration with web browsers.

WebView mode is the foundation of these applications and refers to a navigational interface that keeps users within the existing program instead of opening a new browser tab.

Native-Based Applications

As the name indicates, native-based applications are developed especially for a particular operating system. Their advantages include (1) being faster than web apps or (2) working without an internet connection.

It is possible to use several JavaScript application development frameworks, libraries, and runtime environments, such as React.JS and Node.JS, to create great features.

Jscrambler for JavaScript in the Enterprise

At Jscrambler, we have been switching from a PHP backend to Node.js, and the productivity boost and overall code quality improvement are undeniable.

We doubt we can ever go back to using two different languages for the server and client sides.

Explore more about the opportunities, threats, and solutions of JavaScript application development in enterprises.

The JavaScript standards body, ECMA, brings several new features to the JS language with ES6, Harmony, which will improve its capabilities and clarity.

This new standard has been developed for six years and will finally be fully in place this summer. Your existing code will not suffer because the new standard was designed to be compatible with it, but you will probably find yourself more than ready to implement ES6 when you hear about the exciting new features that will change how code is written.

Brimming with Features

• Shorthand for declaration.

nums.forEach(v => {
    if (v % 5 === 0)
        fives.push(v)
})

• Block Bindings: Now you can declare a function or variable and bind it to a specific block of code, allowing you to write JavaScript with more precision than previously possible.

function foo() {
    return 1
}
foo() // === 1
    {
        function foo() {
            return 2
        }
        foo() // === 2
    }
foo() // === 1

• Collection Structures– Some of the new structures ES6 provides include:

• Maps

• Sets

let s = new Set()

s.add(“hello”).add(“goodbye”).add(“hello”)

s.size === 2

s.has(“hello”) === true

for (let val of s.values()) < i > // insertion order</i>
    console.log(val)

• Symbols

• WeakMaps

• WeakSets

• Destructured Assignment: Combine multiple variables, nested elements, or objects into a single statement to save time.

var list = [1, 2, 3]

var [a,  ,  b] = list

    [b, a] = [a, b]

• Generators: A function you can use to stop and start functions where necessary. This can give you more control over asynchronous processes.

function* range(start, end, step) {

    while (start < end) {

        yield start

        start += step

    }

}

for (let i of range(0, 10, 2)) {

    console.log(i) < i > // 0, 2, 4, 6, 8</i>

• Iterators: There are three default iterators in ES6 for your objects, to streamline code. These are called entries, keys, and values.

• New Parameter Conveniences: Parameters will be much easier to use now with features including:

• Default parameters, which allow you to assign default values to function parameters.

function f(x, y = 7, z = 42) {
    return x + y + z
}

f(1) === 50

• Rest Parameters to replace arguments for variable numbers of parameters.

• Spread operators are used to split an array into separate parameters.

• Destructured parameters operate along the same lines as a destructured assignment.

• Promises: Mechanisms that improve readability while managing asynchronous operation results.

function msgAfterTimeout(msg, who, timeout) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(‘$ {
                msg
            }
            Hello $ {
                who
            }!’), timeout)
    })
}

msgAfterTimeout(“”, “Foo”, 100).then((msg) =>
    msgAfterTimeout(msg, “Bar”, 200)
).then((msg) => {
    console.log(‘done after 300 ms: $ {
        msg
    }’)
})

• Template Strings: More syntax for handling String declaration.

var customer = {
    name: “Foo”
}

var card = {
    amount: 7,
    product: “Bar”,
    unitprice: 42
}

message = ‘Hello $ {
        customer.name
    },

    want to buy $ {
        card.amount
    }
$ {
    card.product
}
for

a total of $ {
    card.amount * card.unitprice
}
bucks ? ’

This next generation of standards makes JavaScript almost an entirely new language and will significantly raise the quality and possibilities of code.

It won’t be necessary to approximate classes because the new language support makes things much clearer.

ES6 modules will allow you to use import and export keywords to load and manage dependencies. It is full of syntactic sugar, which will help you gain a new appreciation for JavaScript.

The Learning Curve

There are plenty of new features to make JavaScript more user-friendly. But this comes along with a whole new dictionary of syntax that you will need to learn in order to use it properly.

This sounds daunting, but most of the new terms were created based on existing processes or techniques in JavaScript, and intended to improve them.

You will be building on skills you probably already use while finding shortcuts and cleaner ways to write and control things. You will find yourself having little trouble remembering your new vocabulary and methods with a little practice, especially when you learn how much easier it will make things for you.

Backward Compatibility

As the name Harmony suggests, ES6 can coexist with your current code and should not cause errors or issues. You can think of it as an extension of ES5, which is what it is meant to be. Although you can write exclusively in ES6, it will probably be more often used on top of the present standard at first.

This new language was developed based on the one currently in place and was intended to enhance it for your convenience and benefit. If you have learned ES5, then you are already well on your way to understanding Harmony and making use of it in your own JavaScript.

The designers of ES6 wanted maximum compatibility, and that is what they have provided. So don’t be afraid to start piling on the new language and enhancing your code.

But you don’t have to wait for widespread support for harmony. Not even if your web application has the requirement of working on older browsers. At Jscrambler, we are using babel.js to transpile Harmony code into ES5 at runtime. Once old browsers are buried away, you only have to drop the transpiling during your build, and that’s it.

In summary, the benefits are well worth the time it will take to learn ES6 and put it into practice. With Harmony, you can make JavaScript do things that weren’t previously possible and achieve code that meets this new standard of excellence.

Communication between components with contexts is an interesting React.js feature, and we explore this option.

Since React v0.12, there has been a new yet undocumented feature that opens up new possibilities for communicating between components. We are talking about contexts in the React.js library for web and native user interfaces. This novelty is still changing, but it’s already being used in projects.

What is a context in React.js?

In brief, a context is an object implicitly passed from a component to its children. So, by using contexts, you don’t have to explicitly pass around a whole bunch of props to pass some contextual data. This was one of the not-so-elegant parts of React that went away when contexts were introduced.

Apart from the missing official documentation, it is a challenge to find accurate literature that sheds some light on how React contexts work. We spent some time understanding its inner workings and using it here at JScrambler, so we thought to contribute with this blog post.

We will show how to code a toggle that changes the context of the parent and a panel that changes its content given a different context.

Parent Component

var React = require('react');

var DummyWrapper = require('./dummy-wrapper');
var ItemToggle = require('./item-toggle');

var Parent = React.createClass({
    getInitialState: function() {
        return {}
    },
    childContextTypes: {
        activeItem: React.PropTypes.any
    },
    getChildContext: function() {
        return {
            activeItem: this.state.activeItem
        };
    },
    setActiveItem: function(item) {
        this.setState({
            activeItem: item
        });
    },
    render: function() {
        return ( < div >
            < ItemToggle setActiveItem = {
                this.setActiveItem
            }
            /> < DummyWrapper / >
            < /div>
        );
    }
});

module.exports = Parent;

childContextTypes is useful during development because it validates the schema against the object returned from getChildContext. While in production, this step is bypassed.

Here, we render the ItemToggle, while passing down @setActiveItem as a prop to allow the child to change the parent state (and context).

We also render a DummyWrapper that will have a child that depends on the Parent component.

Item Toggle Component

var React = require('react');

var ItemToggle = React.createClass({
    onClick: function(type) {
        var item;

        switch (type) {
            case 'A':
                item = "Item A";
                break;
            case 'B':
                item = "Item B";
                break;
            default:
                throw new Error('Unimplemented type');
        }

        this.props.setActiveItem(item);
    },
    render: function() {
        return ( < div > Select an Item:
            < ul >
            < li onClick = {
                this.onClick.bind(this, 'A')
            } > Item A < li onClick = {
                this.onClick.bind(this, 'B')
            } > Item B < /ul> < /div>
        );
    }
});

module.exports = ItemToggle;

Here we receive a prop setActiveItem from the parent that allows us to set the React component that is going to be instanced and set in the parent context.

To keep the simple example, Item A and Item B are just strings. Of course, you could easily replace them with React components.

Dummy Wrapper Component

var React = require('react');

var ActiveItemPanel = require('./active-item-panel');

var DummyWrapper = React.createClass({
    render: function() {
        return <ActiveItemPanel / > ;
    }
});

This component shows how ActiveItemPanel can access the context of the Parent component, even though they are not directly related.

Active Item Panel Component

var React = require('react')

var ActiveItemPanel = React.createClass({
    contextTypes: {
        activeItem: React.PropTypes.any
    },
    render: function() {
        return ( < div >
            Active Item: {
                this.context.activeItem
            } < /div>
        );
    }
});

module.exports = ItemPanel;

Here, we’re defining the context types that we receive through contextTypes. Besides this, we render @context.activeItem inside the component.

As you can see, we didn’t even pass any props to this component. The context lies there without effort.

Conclusions about React’s new feature

The API allows owner-owned communication, but it has already been announced that React’s v0.14 release context will work on the parent-child relationship, which allows even more options than the former.

Though the API may change, this is extremely powerful and avoids a lot of explicit props being passed from parents to children. At the same time, your component will be a little more coupled to where it’s being used, which in some scenarios may not be what you’re looking for.

If you are developing React applications with sensitive logic, protect them against code theft and reverse engineering.

We are glad to announce the launch of our new version of Jscrambler, 3.7. We have developed it with a focus on being able to protect all the main JavaScript libraries and frameworks.

We paid attention to detail and made Jscrambler more compliant than ever so that you can protect your JavaScript and HTML5, whatever your technology stack is.

We made other changes that help you be more prepared, safe, and efficient while developing and selling your application.

Compliant like no other

We made Jscrambler the most compliant protection tool on the market. It can now handle special cases we identified where some transformations need to behave differently, for instance, cases like AngularJS custom HTML attributes that contain names of Angular custom modules and controllers, or the example of module loaders (RequireJS) that load scripts that oblige some transformations to behave differently.

We have also developed an automatic process to ensure compliance with all current libraries and frameworks. You can have access to our compliance tests, so you can check everything yourself.

You can even suggest your own or third-party libraries to be tested.

Preparing for JavaScript’s Future

At Jscrambler, we pay attention to how technologies keep changing, so our 3.7 version lays the foundations to support ECMAScript 6 (Harmony), which will soon be compliant with all browsers, by introducing JavaScript strict mode compatibility and Harmony’s generator protection.

These are the first steps to our next major release, which will aim to support Harmony’s features as soon as they become available on major browsers.

Faster and Easier

From now on, Atom, the new text editor by GitHub made in JavaScript, will be integrated with Jscrambler to make your obfuscation requests quicker and easier.

We’ve developed a plugin that allows you to request obfuscation directly from the editor.

Editor’s Note: This Atom package has been deprecated as of 2019.

Another Channel for Your Users

Domain Lock and Expiration Date features will now allow you to inform your application’s users about why it has stopped working, whether it’s running on an unauthorized domain, or because they need to renew their subscription, for example.

Do it right on the spot with no complications. Communication gets easier, the user experience improves, and your sales go up!

How Can You Get Jscrambler’s 3.7 Version?

It’s simple. Go to the “My Account” page, under “Obfuscation settings”, and change your version from 3.5.1/3.6 to 3.7.

Our client-side security experts are here to clarify any inquiries regarding your application’s protection. Try our free trial, request a demo, or join a live chat to learn more about our solutions and use cases.

We are pleased to announce that AuditMark will now be called Jscrambler!

We started AuditMark with the vision that software and data are migrating fast to the web and that securing these applications would be a complex challenge.

This was back in 2007, and since then we have protected more than 280 million code lines and reached more than 130 countries with Jscrambler, our HTML5 and JavaScript protection solution.

What to expect from NEW Jscrambler

As a company, we decided to use our strongest product name, which is known globally, and that allows us to communicate as a seamless organization with unmatched products and a wide geographic reach. Thus, we will provide even more value to our stakeholders, including you.

This is an exciting moment and an important milestone for us.

With this rebranding, we aim to reinforce our commitment to guaranteeing the security and protection of enterprises’ digital assets worldwide.

We look forward to continuing to strengthen our relationship with you and offering you an integrated array of services and tools to help protect your business.

Rui Ribeiro

CEO and co-founder, JScrambler

We identified frequently asked questions about Javascript and HTML5 protection from Jscrambler’s users and clients. In this article, we have collected the most common and interesting ones. What are some of the concerns with JavaScript, HTML5, and security?

Today, we are going to give answers to the following three questions:

1. How can I reach the maximum level of protection?
   
   

2. Do you also provide non-alphanumeric obfuscation?
   
   

3. Do you have something that cannot be reverse-engineered?
   
   

How can I reach the maximum level of protection?

Our maximum level of protection is available on some of Jscrambler’s client-side security Tier plans. If you are doing something with HTML5, you’d be interested to know that we support protecting it, including Canvas code.

These plans also include the Self-defending transformation, which is a combination of anti-tampering and anti-debugging. With the former, your code will be able to detect changes and break down intentionally, and the latter causes your code to break if debugging activities (e.g., popping up the Chrome Dev Console) are detected.

Regarding what protection to use, default templates such as “Obfuscation”, “Domain Lock”, or “Self-Defending” are solid, working out-of-the-box options to get your code protected.

Further protecting your code works best if you have good knowledge of the original code. Are you trying to hide an algorithm? Prevent tampering? Hiding secrets?

Depending on your answers, different transformations might be useful. With premium accounts, you can go to the Advanced Users tab and select the transformations individually that work best for your code.

Last but not least, you can use the Ignore Code Blocks feature to substantially increase the protection in specific parts of your code without growing it too much or making it slower.

Do you also provide non-alphanumeric obfuscation?

No, we do not provide non-alphanumeric obfuscation, but we understand why you’re asking.

Non-alphanumeric obfuscation is a visual nightmare. Also, at first sight, it looks like something really hard to revert. However, the problem with full non-alphanumeric obfuscation is that the resulting code size is insane.

Non-alphanumeric obfuscation example

As an example, something like ‘console.log(1)’ that has 15 bytes would end up as ~2500 bytes of non-alphanumeric code. If we applied this to ordinary JavaScript, the resulting size would be unbearable (see figure below). If that wasn’t enough, it is also rather easy to write a tool to automatically reverse this to its original form.

[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]](([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(+(+!+[]+[+!+[]]+(!![]+[])[!+[]+!+[]+!+[]]+[!+[]+!+[]]+[+[]])+[])[+!+[]]+(![]+[])[!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(+![]+[![]]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]+(![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]+[+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]])()

Do you have something that cannot be reverse-engineered?

Everything can be reverse-engineered. So far, the only thing that comes to mind that has not been reverse-engineered is the human brain. No solution can promise 100% protection.

That being said, our solution goes higher and deeper in providing you with protection. It sets the difficulty level so high that only a few percent of JS hackers will be able to reverse it, and of those, even fewer will be motivated to do it.

With the rise of artificial intelligence, would you say that Chat GPT would be able to reverse engineer Jscrambler obfuscation? We give all the answers in our blog post about our tests with ChatGPT-4.

The Jscrambler solution is hard to reverse engineer. Why?

Jscrambler has more and better obfuscation techniques, but contrary to other solutions, it goes beyond them. It leverages obfuscation to install code traps scattered throughout the code that will provide you with extra levels of protection:

• Licensing enforcement capabilities: Domain Lock, Browser/OS Lock, Expiration date

• Self-defense: Anti-tampering and Anti-debugging
  

Keep visiting us because we’ll be covering other questions we come across, and don’t forget to send us your questions, issues, and suggestions.

Download our free data sheet on JavaScript Security Threats, which provides an overview of the most relevant attacks and how to prevent them.

If you do not know what to expect from Rename Local, let us explain everything. Jscrambler transformations, or our renaming source code transformations, replace identifier names with meaningless ones.

There is a reason why many organizations set coding conventions around naming variables and function names: they are extremely helpful in understanding more quickly what a program does. So it seems intuitive that by destroying any meaning those identifiers hold, you will get much harder-to-read and more confusing code. This is perfect if you seek a trustworthy service to obfuscate your JavaScript source code.

Since the volatility of the identifier names is unnecessary for the JavaScript engine to run your program, renaming them will not impact the code’s functionality.

Even if you are not seeking to protect the code, renaming is a good step because it makes identifiers as small as possible, thus contributing to the minification of the code.

Rename Local source code transformations

“Rename All” and other source code transformations that create or change names are not covered here. Rename Local only targets identifiers belonging to variables, functions, or objects declared locally. This means that identifiers that are accessible publicly or that we cannot find the declaration to which they belong are not renamed.

By working this way, Rename Local transformations is the safest choice when you want to replace the names of your source code without worrying about other JavaScripts that yours might depend on.

Rename Local figures out what it should rename automatically

In Figure 1, you can see a simple example where only local declarations and their calls have been renamed, and public or native names have not been touched.

(function(global) {
    var logMessage = function(message) {
        global.console.log(message)
    }
    logMessage("Rename Local example");
})(window)

Figure 1a: Source code

(function(b) {
    var c = function(a) {
        b.console.log(a);
    };
    c("Rename Local example");
})(window);

Figure 1b: After Rename Local

Jscrambler does not maintain a (black) list of names like window, console, and log that it should not rename. And because it does not need to. For each local declaration, Jscrambler seeks their respective calls on the reachable local scope(s). If it does not find any, then it does not touch them.

Rename Locals reuse names as much as possible

Another interesting detail about Jscrambler renaming is that it tries, whenever possible, to reuse names.

That benefits both protection and minification purposes:

• For the former, it generates additional confusion because you see names repeated in different parts of the code.

• For the latter, it reduces the number of characters needed for names, reducing the overall size of the code.
  
  

As you can see in Figure 2, the parameter names a and b are reused on both functions.

function drawCanvas(width, height) {
    // ...
}

function move(toPosition, effect) {
    // ...
}

Figure 2a: Source code

function c(a, b) {
    // ...
}

function d(a, b) {
    // ...
}

Figure 2b: After Rename Local

Rename Local picks up identifiers inside evaluated code strings

Rename Local also targets names inside string arguments evaluated by functions like eval, setTimeout, and setInterval. Otherwise, the code could break due to unmatched references.

(function() {
    var three = 3;

    var doSomethingAmazing = function(condition) {
        var res;
        if (condition) {
            res = three;
        } else {
            res = three * 10;
        }
        console.log(res);
    }

    var doTheSameWithEval = function(condition) {
        var res;
        eval("if ( condition ) { res = three; } else { res = three*10; }");
        console.log(res);
    }

    doSomethingAmazing(true); // prints 3
    doTheSameWithEval(false); // prints 30

})()

Figure 3a: Source Code

(function() {
    var b = 3;
    var d = function(c) {
        var a;
        if (c) {
            a = b;
        } else {
            a = b * 10;
        }
        console.log(a);
    };
    var e = function(c) {
        var a;
        eval("if(c){a=b;}else{a=b*10;}");
        console.log(a);
    };
    d(true); // prints 3
    e(false); // prints 30
})();

Figure 3b: After Rename Local

Limits of what you can do statically

However, there are cases where it can fail, mostly when it can’t figure out statically the link between declarations and their respective calls.

In Figure 4, you can see a case where using Rename Local breaks the code by renaming the hello variable to b.

(function() {
    var hello = 'Hello world!';
    var foo = 'hello';
    return eval(foo);
})();

// returns "Hello world!"

Figure 4a: Source Code

(function() {
    var b = 'Hello world!';
    var a = 'hello';
    return eval(a);
})();

// throws ReferenceError: hello is not defined

Figure 4b: After Rename Local

With a little help from my friends
In the previous example (Figure 4b), you can fix it by adding the hello variable to the Exceptions List. The result would be:

(function() {
    var hello = 'Hello world!';
    var a = 'hello';
    return eval(a);
})();

// returns "Hello world!"

Figure 5: After Rename Local + Exception List (hello)

It’s important to understand that other transformations may impact whether Rename Local ultimately breaks the code or not. For instance, if we had used Constant Propagation transformation, it would have been applied before renaming. It would replace variable foo by the string ‘hello’, and ‘hello’ by ‘Hello world’.

Rename Local would then come into action, but it basically wouldn’t have anything to work with (to rename), as you can see in Figure 6.

(function() {
    var hello = 'Hello world!';
    return eval('hello');
})();

Figure 6a: After Constant Propagation (1)

(function() {
    return eval('Hello world!');
})();

Figure 6b: After Constant Propagation (2)

Rename Local utility

In conclusion, Rename Local was developed by Jscrambler to be safe and to work out of the box as much as it is technically possible with JavaScript.

On the few occasions where Jscrambler is not matching all the occurrences of a name, you may add that name to the Exceptions List, and that identifier name won’t be touched. Problem solved.