Guidelines for building a secure Web application/Mobile application – Part 1 Front-end

Security is the biggest concern while building web applications. Most of the web applications handle a lot of sensitive data and it is necessary to provide adequate security to protect this data from perpetrators. This series of articles discuss various security issues, types of attacks and guidelines to be followed for building a  secure application. Front-end    The basic security features that should be implemented in every web application front-end are as follows. Request Method – All sensitive data should be sent to the server via a POST request only. All form submissions should be via POST method. GET method sends the data to the server in the URL whereas the POST method sends the data in the body of the request. Thus sending the form submission data via the POST method makes the data less exposed.GET method should be used to fetch data only. While doing data pagination, the page number or limit can be sent to the server via GET request. Sensitive data should only be sent via a POST request. Examples for sensitive data are passwords, usernames, customer details, OTP, Bank account numbers, etc. Validations must be performed on every input Validations – Validations should be ensured on all inputs…

Set and Get Custom Response Header values using Angular 5 and Express.js – Node.JS

While working with Node.js and Angular, sometimes you might need to set some custom values in Response Header from the server-side and get these values in your Angular application. These values can be some tokens, keys or anything. This article is about completing this requirement. Server-side using Express.js and Node.js To set a custom value in the response header, you have to write the following code in your Express.JS server

Even if you set this token in the response header, to get this in your Angular application you need to allow these header values. The allowed default header values are Cache-Control Content-Language Content-Type Expires Last-Modified Pragma To allow your custom header value, you need to use the Cors module of Node.JS. To install the Cors module, use the following command.

Now the code to allow the customer header values with Cors module use the following code

Accessing the header values in your Angular 5 application   To get the header value in the application, you need to access the whole response object. For this, you need to add on observe: “response”  to the request options in the following way

When subscribing to the observable, you can get the…

Angular interview questions – part 1

1 What is typescript? It is a strict syntactical superset of JavaScript, and adds optionaltype-checking along with the latest ECMAScript features. 2 What is two way data binding in angular? Two-way Binding. Data binding in AngularJS is the synchronization between the model and the view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. Binding   3 Types of bindings in angular ? 1 Interpolation -eg- <h1>{{user.name}}</h1> //interpolation is in braces 2 Two way binding – <input [(ngModel)]=”user.name”/> 3 One way binding – <h1 [innerText]=”user.name”></h1> //Bindings like inner text 4 Event Binding – <button ng-click=”userData()”>Send</h1> //Binding events like click   4 What are authGuards? With AuthGuards/RouterGuards we can prevent users from accessing areas that they’re not allowed to access.Or prevent navigating away. There are four kinds of guards.You have to import it from the @angular/router module CanActivate Checks to see if a user can visit a route. CanActivateChild Checks to see if a user can visit a routes children. CanDeactivate Checks to see if a user can exit a route. Resolve Performs route data retrieval before route activation. CanLoad Checks to see if a user can…

Http interceptor in AngularJS : adding tokens and loading image to every http request

While creating AngularJS applications,we might need to send multiple  http requests to backend apis to fetch the data that need to be populated within our HTML.In most cases, these backend apis might be protected using token .Also we might need to add a loading image to indicate the user that the data is being fetched. HttpInterceptor helps us to a display the loader image before and hide the loader image after completing the request  and also add token to every request header.This tutorial helps us to create an HttpInterceptor in AngulaJS. We create an  app using the following code

Now we create a factory which will intercept http requests.Inside the interceptor we use a variable httpRequestNumber,which tracks the number of requests.When a new request comes up we increment it httpRequestNumber++ and on response or error we decrement it httpRequestNumber– .We also inject $q and $rootScope.$q is service that helps you run functions asynchronously, and use their return values (or exceptions) when they are done processing.$rootScope is the root scope .every app has single root scope. All other scopes are descendant scopes of the root scope.We also add a token to the request header using the following code.

The interceptor factory will look like this….

Angular JS 1.6 – server side pagination with sorting using Angular UI Bootstrap

Angular 1.6 SPA server side pagination of data with sort. To create a SPA which lists user data with pagination  and sorting we need the following CDN links – Angular JS 1.6.9 js CDN. – Angular JS UI bootstrap -Bootstrap components written in pure AngularJS . – Bootstrap CSS file. STEP 1 – Create file index.html and add the relevant CDN links using the following codes.

STEP 2 – CREATING ANGULAR MODULE and DEFINE THE APP create, register and retrieve Angular JS module using the following code.The name of the module is ‘userLog’.

and in the HTML.

STEP 3 – DEFINE THE CONTROLLER AngularJS applications are controlled by controllers. The ng-controller directive defines the application controller.The name of the controller here is ‘listController’.In HTML , add the following code

STEP -4 CREATING SERVICES AND INJECTING THEM In this example we will create two services one for getting the total number of users and other for getting the data each page.The name of the first service is ‘count’ and name of the second service is ‘getloglist’

Services in both cases send HTTP requests to the APIs.For this we inject $http service.The $http service get takes a single argument which…

HttpInterceptor in angular with example-Adding token to every request

HttpInterceptor –  feature in Angular 4.3. We may need to intercept Http request while building apps with Angular. Sometimes we may you need to intercept Http request to add something to request header or to do something with the response. We can use Http Interceptor to do some action when sending  a request.This can be achieved using  the following interceptor class which implemenets Httpinterceptor.The interceptor adds an ‘access_token’ and a  ‘token’ to the header.The tokens are stored in the local storage.To use HttpInterceptor we need to  implement HttpInterceptor in the following way

Import the interceptor the following way in module.ts files

  Modify and use the above class to implement Intercepror. For official documentation visit this page https://angular.io/api/common/http/HttpInterceptor

Starting off Node.js web developement in ubuntu/Linux Mint 18 – (ExpressJS,Mysql)

Node.js is an open source server environment which lets us write server side code in javascript. Node.js is asynchronous,single threaded and non-blocking .Node.js has very high memory efficiency which makes it very popular in server side  developement for web/mobile app.In this article we take a look at how to start of web developement in Node.js with Mysql as database. To install Node.js in your linux run the following command in the terminal

After installation run the following command to verify the installation and check the version of Node.js you are having.

  npm(node package manager) is a Node.js package manager that is bundled along with Node.js. npm help us manage Node.js packages efficiently. To initialize our project run the following command in the folder  you want to create the project.

You need to provide a few details like name of your project,version etc which can be skipped.The command will create a package.json file in which you can add the packages you want to  your project. The package.json file will look like this.

Express is a web developement framework for node js.To install Express run the following command in terminal

–save option add the dependency to…

Filter functions in JavaScript with examples

Filter function in javascript filters an array based on a given criteria and returns new array.For example if we want to get all elements in an array divisible by 2 as a new array,we can use filter function

Just for a reference check what the map function gives in return

  Now lets’s go back to filter function.Lets see how filter function works on array of objects.

Now let’s see what map function returns.

 

Understanding concepts of immutables and mutables in javascript

  Javascript strings are immutable.But javascript objects and arrays are mutable.A mutable object is an object whose content can be modified after it is created. An immutable object is an object whose content cannot be modified after it is created. Consider an the following example

Now,from the above we realize that arrays and objects in javascript are mutable,ie they can be mutated. Functions like slice returns a new reference and does not modify the original array. Example

filter(),map(),reduce()  are the other functions that does not modify original array. Javascript es2016 brings a new operator called spread operator.Spread operator helps copy a array to a new array with new reference.

Usig spread operator(…a) along operations like slice,filter ….. helps operate with javascript arrays in an immutable way. Spread operator on object

Why Immutability? We look at  immutability from an angular point of view to get a better understanding of the needs if immutability and the reason why it increases performance.Consider we have a parent component and child component.From the parent component an object is shared to the child component.Lets say the following is the object is the one that is shared

Consider a click event function…

Change detection strategy in angular – simplified
Angular/AngularJS , Javascript / June 4, 2018

Angular is based on  component.It is having component within component architecture.Change detection look for changes in bindings from root to leaves from top to bottom. The library Zone.js lets Angular find out when to update the DOM. Angular performs change detection on component and child components when some changes occur in your App.But as the number of components increases change detection becomes heavy.In order to tackle this we can do change detection strategies to onPush to certain components.So that change detection only runs for the specific component  in the component sub tree when there is a change by reference not merely by value. See the below parent component which has a child component , to which a food object is passed from the parent.There are two buttons,one changes the name property in the object , other changes the object as a whole.When the change detection strategy onPush  is enabled the first function which change name property will not reflect in the child.The second function which changes the reference of thevariable changes the value in the child component.Now if the  Change detection strategy was default ,both the functions would have changed the value in the child component.

 

 

Share this page in social media platforms