Using HTML5 Web Workers with AngularJs

Web workers introduced in Html5 provide a background mechanism to perform multi-threaded tasks. They add the ability to perform computationally heavy tasks like downloading or mathematical computation without hanging the user interface. Although AngularJS and web workers are both intended for asynchronous execution, both serve different purposes and should be used in conjunction.

Angular JS Promises

Deferred and promises set a reference to a result yet not available. Once resolve is called the result becomes available and the appropriate action is taken based on the result in the .then section.

Web Workers

Web workers on the other hand are used to perform actual work asynchronously. They are relatively light weight as they use operating system threads and hence are better suitable for computationally heavy, long running or periodic tasks.

Getting Started

First we set up the index.html page where testworker is the state used in the state provider. Clicking on Start Web Worker will load the template associated with the testworker into the ui-view.

Set up the application routing.

Set up the data binding.

Next we write the controller which makes the call to the external web worker file. The callWebWorker function spawns the new web worker, posts the url to download from and returns a promise object. Now the .then call will wait until the promise is resolved which happens in the onmessage callback. Once the web worker posts back the result, onmessage function is called. Inside the onmessage function, the resolve sends the data back to the calling function. On receiving the data the .then executes and the controller sets the result to the data binded workerReplyUI.

The webworker recieves the postmessage from the controller in the onmessage function. It initializes an HttpClient object to send a GET request to the server. When the GET request completes, the web worker posts the result back to the calling controller.

How to show Loader for $http calls in AngularJs ?

Hello Readers !!  In this post we are going to see how we can add a loader for $http calls in our angular applications. This loader will be shown whenever our angular application will send some call to server. I am assuming that you are aware of basics of AngularJs, if not then please go through the AngularJs official Developer Documentation.

So, lets begin, first of all we will be making simple loader UI with HTML and CSS. So our HTML will look somewhat as shown below.

Here I have used font-awsome’s spinner icon. You can keep same or can build your own loader/spinner, somewhat like this. Now let’s move to CSS part. Our loader should cover whole area of page and should not allow any actions unless all calls to server are finish. All we need to have div which will be having height and width 100% and z-index to be highest than all other elements. Below is exactly what we need

Next thing we will be adjusting our font-awsome’s spinner icon to center of our loader div with the help of following class

top and left values are as per my screen resolution, you can try adjusting them as per yours. Now lets move to angular part, we will be constructing a directive of attribute type with name loader. Following is code for it

Here we have added a watch $http.pendingRequests , which actually return number of calls made by browser which are in pending state. So all we need to do is whenever this number of pending calls are more than 0 then show our loader otherwise hide it. Now if you want to apply this for some specific calls for example, this loader should work only for API calls in my application and my API base is ‘/api’ so you can do it simply by adding this lines to scope.isLoading

What is IP address "overlapping" within the context of NAT ?

IP address overlapping refers to a situation where two locations that want to interconnect are both using the same IP address scheme. This is not an unusual occurrence; it often happens when companies merge or are acquired. Without special support, the two locations will not be able to connect and establish sessions. The overlapped IP address can be a public address assigned to another company, a private address assigned to another company, or can come from the range of private addresses as defined in RFC 1918. Private IP addresses are unroutable and require NAT translations to allow connections to the outside world. The solution involves intercepting Domain Name System (DNS) name-query responses from the outside to the inside, setting up a translation for the outside address, and fixing up the DNS response before forwarding it to the inside host. A DNS server is required to be involved on both sides of the NAT device to resolve users
wanting to have connection between both networks. NAT is able to inspect and perform address translation on the contents of DNS “A” and “PTR” records, as shown in Using NAT in Overlapping Networks.

What is Service Provider PAT Port Allocation Enhancement for RTP and RTCP?

The Service Provider PAT Port Allocation Enhancement for RTP and RTCP feature ensures that for SIP, H.323, and Skinny voice calls. The port numbers used for RTP streams are even port numbers and the RTCP streams are the next subsequent odd port number. The port number is translated to a number within the range specified conforming to RFC-1889. A call with a port number within the range will result in a PAT translation to another port number within this range. Likewise, a PAT translation for a port number outside this range will not result in a translation to a number within the given range.

How to setup xdebug with Netbeans on Unbuntu

xdebug is a PHP extension for debugging of php code. It supports stack and function traces, profiling information and memory allocation and script execution analysis. It uses the DBGp debugging protocol.  In this post we are going to see easy steps to install and setup it with Netbeans IDE on Ubuntu

Step 1:

Install xdebug using following command


Step 2:

Browse to your php folder and locate file. In my case it is /usr/lib/php5/20121212/ Copy this files path.

Step 3:

Open your php.ini ( /etc/php5/apache2/php.ini ) and add following lines at the end of this file

Replace zend_extension path with the path you have copied in previous step

Step 4:

Restart your apache server using

Step 5:

Open Neatbeans and goto Tools > Options > PHP > Debugging and make sure that there is Debug Port set to 9000
and Session ID to “netbeans-xdebug

Step 6:

Thats it you are almost done. Now just create a new php project, add some breakpoints to any php file in it and click on Debug Project from tool bar or press ctrl+F5. This will start debugger.


Debugging Magento Project using xdebug with Netbeans on Ubuntu

Security Features in AngularJs

  One of the major concerns with any new technologies is security. They might introduce security holes into an organization’s IT infrastructure. But if you are using AngualarJs then this concern isn’t very severe. Securing an AngularJS application is as simple as enforcing the good security practices for any web-application.
In this post I am going to take you through built in security features in AngularJs that you should keep in mind as you build your application. I will be also updating this post time to time whenever I got something new about Security in AngularJs.

So lets begin with AngularJS security features one by one.

 1. Expression Sandboxing

AngularJS’s expressions are sandboxed, this means AngularJs restricts the expression from evaluating unsafe expressions. These can attempt to access the Function constructor, window object, DOM element, global variables, or the Object constructor. With these restrictions, all an attacker can do is execute a mathematical function, call an already existing function of the application, or display and modify data from a scope variable. This limits the impact of an Angular injection. Although, the AngularJS documentation explicitly states that the sandbox’s purpose is to maintain a separation of application responsibilities. The sandbox isn’t available for the purpose of security. As a result, the AngularJS sandbox shouldn’t be considered a security boundary.

2. Cross Site Request Forgery (XSRF) Protection

Cross-site request forgery (XSRF or CSRF) is a method of attacking a Web site in which an intruder masquerades as a legitimate and trusted user, i.e. attacker can trick an authenticated user into unknowingly executing actions on website. Angular provides a mechanism to protect from XSRF. When performing XHR requests, the $http service reads a token from a cookie (by default, XSRF-TOKEN) and sets it as an HTTP header (X-XSRF-TOKEN). Since only JavaScript that runs on your domain could read the cookie, your server can be assured that the XHR came from JavaScript running on your domain. The header will not be set for cross-domain requests.

You can also implement this explicitly by writing AngularJs Interceptor. Interceptors are bassically build for authentication,global error handling,or any kind of synchronous or asynchronous pre-processing of request or postprocessing of responses. With the help AngularJs Interceptors you can intercept requests before they are handed to the server and responses before they are handed over to the application code that initiated these requests.
To take advantage of this you need to implement few things on your server side. Your server needs to set a token in a JavaScript readable session cookie called XSRF-TOKEN on the first HTTP GET request. On subsequent XHR requests the server can verify that the cookie matches X-XSRF-TOKEN HTTP header, and therefore be sure that only JavaScript running on your domain could have sent the request. The token must be unique for each user and must be verifiable by the server (to prevent the JavaScript from making up its own tokens). It is recommend that the token is a digest of your site’s authentication cookie with a salt for added security.

3. JSON Hijacking Protection

If you don’t know what is JSON Hijacking then please go through this link. JSON Hijacking can be prevented by server side prefixing all JSON requests with following string “)]}’,\n”. Now AngularJs will automatically strip the prefix before processing it as JSON.

Reference / Source :

PHP Script to scan all ports of website or host

Following is PHP code which will scan all ports of particular host / website and will print list of all open ports in result. This code can be use to probe a server or host for open ports. This is often used by administrators to verify security policies of their networks and by attackers to identify services running on a host and exploit vulnerabilities. ports scanning  is a process that sends client requests to a range of server port addresses on a host, with the goal of finding an active port; this is not a nefarious process in and of itself. The majority of uses of a port scan are not attacks, but rather simple probes to determine services available on a remote machine. So I will recommend to use it for making your servers more secure.

AngularJS router to use different template for Mobile and Desktop

In your AngularJS application, if you want to use different templates/views for mobile and desktop users then following script may be useful for you. What we have done here is, just wrote a function named as “_isNotMobile”. This function will return true/false by checking user agent of device. And also we have used that function inside AngularJs app’s router, before actually specifying template/view paths and that’s it! Simple!