Importance of Client-Side JavaScript Security

Javascript is extensively used for several years ever since it was first developed. There are so many reasons in the bucket that why we need to use Javascript. Firstly, Javascript is so natural to learn and utilize. And another reason is, it has the wide accessibility to simple-to-join, open source libraries like jQuery, React.js, Backbone.js, Angular.js, and Ember.js.

To better understand of Javascript security, let’s explore in deep to outline and know why it has become the future wave in developer’s perspective

Javascript is everywhere

As we all know Javascript is incredibly powerful language. It is a high-level and interpreted programming language that has been widely used since its release. Javascript is world’s 11th most prominent programming language. It is commonly used in dynamic web pages to provide extended functionalities such as interactivity, animations, user activity, tracking and more. In order to do this, the Javascript is embedded in an HTML page, where it can interact with pages Document Object Model (DOM) to perform specific functions. In addition to its usage in web browser applications, Javascript is progressively used in mobile applications via cross-platform development tools like Titanium and PhoneGap, and in server-side code via frameworks like Node.js.

Javascript Security

Since its release, there have been several Javascript security issues that have gained outspread attention. The way javascript interacts with the DOM poses a risk for end users by enabling deleterious actors to deliver scripts over the web and run them on client computers. There are two measures that can be taken to contain this Javascript security risk. The first one is sandboxing, or running scripts separately so that they can only access certain resources and perform only specific tasks. Secondly, implementing the same origin policy, this prevents scripts from one site, accessing the data that is

Javascript is one of the most versatile and effective languages used to extend functionality in websites. However, it also possesses some negative effects that might make you think twice before implementing Javascript on your websites. Every programming language has its own advantages and disadvantages. Let us review some of its pros and cons.

Advantages :

Javascript is executed on the client side: The code is executed in the user’s processor rather in the web server, thus saving the bandwidth on the web server.

Extended functionalities to web pages: Third party ad-ons like Greasemonkey enable Javascript developers to write snippets, which can execute on desired web pages to enhance its functionality. If you are using a website and you wanted to add some certain features, you can write it by yourself and can use add-ons like Greasemonkey to implement it on the webpage.

Disadvantage:

Security Issues: Javascript snippets, once it is adjoined onto the web pages, it executes on the client server immediately and, therefore, can also be used to exploit the user’s system. While a cer tain restriction is set by modern web standards on browsers, the malicious code can be still execut ed by compiling with the restrictions set.

Javascript rendering varies: Different layout engines may render the Javascript differently, thus resulting in inconsistency in terms of functionality and interface. Though the latest versions of Java script and rendering have been regulated towards a universal standard, certain variations still exist.

Thus, the rise in the use of Javascript brings you with a great promise, but the combination of its interpreted nature and its increase use also opens the entryway to more risk. You need not to be scared off, as there is much you can do to reduce the risks for your business.

In Javascript, What is call() & apply() vs bind()?

Call attaches this into function and executes the function immediately. We need to list the arguments one-by-one (comma separated): person.hello.call(person, “world”);

Apply is similar to call except that it takes an array-like object instead of listing the arguments out one at a time:person.hello.apply(person, [ar1,ar2…]);

Bind attaches this into function and it needs to be invoked separately like this:var helloFunc = person.hello.bind(person);helloFunc(“world”);

How do JavaScript closures work?

Closure is related to Scope. Let’s assume that we have a function named ‘Outer’. Inside this function, let’s create a ‘inner’ function. Looks something like below:

function outer(){
function inner(){
}}

Let’s create a variable in outer function. Now, the inner function will have access to this outer function variable. The inner function is now a closure.

function outer(){
var info = “Hello”;
function inner(){
console.log(info); //Prints Hello – inner() fn has access to info var
}}

So, to put it in as a text book definition, A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain.The inner function shall have access to three different scope vars:

• It’s own variables
• Outer function variables
• Global variables
var greet = “Welcome”;
function outer(){
var info = “Hello”;
function inner(){
var name = “James”;
console.log(info); //Prints Hello – inner() fn has access to info var
console.log(name); //Prints James
console.log(greet); //Prints Welcome
}
}
P.S: The inner function shall have access to the outer function parameters as well
Dispelling the Myths of closure:
Myth 1. Closures are created only after an inner function has been returned
Myth 2. Closures only apply to inner functions

Explain the bind() method in JavaScript?

We use the Bind () method primarily to call a function with the this value set explicitly. It other words, bind () allows us to easily set which specific object will be bound to this when a function or method is invoked.

The this value in methods and functions must be set explicitly when you need a specific object bound to the function’s this value.

The need for bind usually occurs when we use the this keyword in a method and we call that method from a receiver object; in such cases, sometimes this is not bound to the object that we expect it to be bound to, resulting in errors in our applications.

How do JavaScript closures work?

A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.

The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly. You create a closure by adding a function inside another function.

Closures have access to the outer function’s variable even after the outer function returns.

Closures store references to the outer function’s variables.

Closures have access to the updated values of the outer function’s variables, they can also lead to bugs when the outer function’s variable changes with a for loop. To fix this side effect (bug) in closures, you can use an Immediately Invoked Function Expression (IIFE).

Explain the same-origin policy with regards to JavaScript?

The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin. Same-origin Policy is used as a means to prevent some of the Cross-site Request Forgery attacks.

The “origin” is the same if three things are the same: the protocol (http vs. https), the domain (subdomain.yoursite.com vs. yoursite.com vs. google.com), and the port (: 80 vs.: 4567). Using JS, we would be able to fetch resources (typically data like text,html,json,etc) using JSONP where we create a script tag dynamically with src attr pointing to the end source. Insert the script tag into the head section of the page. This will force the browser to fetch the end source similar to how it fetches any other JS or image via http.