Devhelperworld

The Comprehensive Guide to Angular 8 Reactive Forms

noreply@blogger.com (Nilesh Sanyal) — Fri, 08 Nov 2019 09:52:00 +0000

Form validations are vital when building any kind of web application. Depending on the complexity, we can use two approaches; template-driven approach and reactive approach. This article covers angular reactive forms in-depth so that you don't need to look for other tutorials on the web.

What is Reactive Forms in Angular?

If you are familiar with angular's template-driven approach to validate forms, you know that angular creates FormControl and FormGroup objects itself after we write our code in the template part (i.e, HTML part) of the code.

But, if we want to have more control over our validation logic, then we should use reactive forms. This approach helps to deal with various complex scenarios. For example, suppose you want to build a form where input fields are displayed depending on the data that you get from the server, then you have only one option, you have to use reactive forms.

When we are using reactive forms, we need to explicitly write code to programmatically handle form validations.

Why Use Angular Reactive Forms?

There are a number of advantages of using reactive forms in angular, which are as follows.

Read/ write the value of the input at any point. (Even before the form is built)
Define advanced validation rules, supports asynchronous validators that are especially useful when the user is filling out a form and at the same time an HTTP request is sent to the server.
Be notified and react immediately when the value changes.
Access the native HTML form element.
Reset the form.
Reactive forms are significantly easier to test.

Reactive Forms: How They Actually Work?

In order to understand how reactive forms work, at first you need to know the basics of how template-driven form works. In a reactive-form based approach, we define the form model by FormGroup and FormControl instances in the component's class.

Then we bind the template to the form model, which means our form is not directly modifying the data model. Now, you may ask the question, how to create a form model?

To create a form model, we need to define a FormGroup directive in our form's template part. That FormGroup represents the entire form. A FormGroup contains properties that refer to the state of the form itself. To represent the state, we need to provide an instance of the FormControl object as a key-value pair in FormGroup object.

Following is the example of defining a form model in the component's HTML file.

A FormControl object refers to each input element in the form. To bind the input field with the FormControl object we need to specify the FormControlName value in the component's HTML file. Then we need to refer to that value in the component's typescript file.

Following is the example of defining a form model in the component's typescript file.

What is The Use of FormBuilder in Angular?

Sometimes, you need to work with large and complex forms, then you need to repeatedly type "new FormControl('')", "new FormGroup({})". So it becomes a tedious way to represent such large forms. Also, you can hardly read the codes and code debugging may take a long time.

Fortunately, angular helps us out in this regard. You can use FormBuilder class to represent larger, complex forms in such a way so that it is easier to read, understand, debug and maintain.

The following screen-shot is the example of using FormBuilder class.

What is FormArray?

As per angular's official documentation: it tracks the value and validity state of an array of FormControl, FormGroup or FormArray instances.

Let me explain what that means. In simple words, FormArray is a class that makes sure that FormControl instances are put together in an array. You can think of the FormArray class similar to FormGroup class that holds objects of FormControl instances.

So, What Are the Differences Between FormArray and FormGroup in Angular?

Simply saying, FormArray is an alternative to FormGroup for managing an unknown number of form elements. FormArray and FormGroup both allow manipulating form elements.

But, if we compare them then FormArray methods are better because it's methods ensure that the controls are tracked properly in the form's hierarchy.

Another point to be noted is that FormArray's data gets serialized as an array, whereas FormGroup's data is serialized as an object.

Angular Reactive Forms Example

Let's build a form that will collect user's various details such as name, email address, age, address, card number, etc.

Following is the screenshot of the app that we will create.

It would be better if you download the complete project by clicking the button below.

Explanation of app.component.ts File

In the screen-shot above, we discussed that we need a form group directive inside which we can put individual child elements inside an object. On line 25, we want to send contact information under "contactInfo" object. That's why we used a form builder object's group function.

Inside that function, we wrote the fields that come under "contactInfo" object, for example, name, age, email, address, etc. Similarly, on line 33, we put the card number field under "paymentInfo" object.

In the above screen-shot, we have used some built-in validators that angular already provides for us to implement. If these built-in validators are not enough for us, then we should go for implementing our own custom validators.

For example, we have implemented a custom age validator that takes care of validating ages that must be between 18 to 60. The code snippet for implementing that validator is shown below.

In order to create a custom validator, we need to implement "ValidatorFn" interface. To do so, we created "validateAge" static function inside "AgeValidators" class. We did this so that we can easily call the function without creating an instance of the class.

This function takes AbstractControl as a parameter and returns ValidationErrors if any errors exist, or null if none exists. To represent "ValidationErrors", we need to return a key-value pair (e.g, "validateAge: true").

We have written our logic to implement the custom validator, now we have to display the error message whenever a user enters age that is not between 18 to 60. To display that error message we need to write code as shown in the highlighted portion below.

Finally, we have added functionality so that the user can add multiple addresses. To achieve this, we used FormArray. At first, we defined the FormArray under FormBuilder class.

We need to refer to the FormArray instance, in our template file also, we can do that with the help of FormArrayName directive. Then we iterated through all the dynamically added address fields and attached an event called "removeAddress()" to remove address fields at a specific index.

Outside the loop, we added a button that executes "addFields()" event. The code snippet for addFields() and removeAddress() is shown below.

Final Words

I hope that after completely reading this article on angular reactive forms, you have a solid understanding of it. If you have any doubts, you can ask me questions. If this article proves helpful to you, please share it among others. Thank you!

Know Everything About Angular 8 Template Driven Forms

noreply@blogger.com (Nilesh Sanyal) — Sat, 26 Oct 2019 16:40:00 +0000

Angular provides a lot of options to perform validations for the HTML form. To fulfill this need, we can use template-driven forms in angular. This article will walk you through each and every detail regarding the template-driven form validation approach in angular.

Let's start talking about what actually is angular forms first, then we will dive deeper into template-driven form.

Learn how you can integrate facebook login to your app here.

Why Angular Forms?

Generally, in every frontend applications, forms play an important and inevitable part. This statement is especially true for huge, enterprise-grade applications. Sometimes, users need to fill out a form that consists of multiple tabs.

To solve this need to handle forms properly, angular provides powerful tools; angular forms. That comes as a built-in feature when we build any angular application from scratch. We don't need to rely on third-party packages to work with angular forms.

So if anything goes wrong while the user fills out the form, they must be notified what is the reason that causes that problem. To tackle that situation angular itself provides two approaches.

1. Template Driven Forms

2. Reactive Forms

What is Template Driven Form in Angular?

You can think of a template-driven form similar to an HTML form. The only difference is that in this type of form, we need to use angular specific directives, events, etc. In this approach, we define the actual template that we want to use in forms. That's why this approach is called a template-driven approach.

In other words, you can say that in the template-driven form we write our logic, validations, etc. in the template part ( i.e, HTML code). Template-driven forms are named primarily because the form controls are defined in the template of the component.

As the form is primarily defined in the template layer, it also means that the validation errors are managed through the template.

Before we jump into how you can actually work with template-driven forms, it would be better if you know how template-driven forms actually work behind the scene.

Template Driven Forms: How They Actually Work?

To clearly understand the actual inner-working principle behind template-driven forms first, you need to be familiar with two terms which are as follows.

FormControl
FormGroup

What is FormControl in Angular?

As per angular's official docs: FormControl tracks the value and validation status of an individual form control.

After reading the description about form control from the official site, you may feel confused and thinking of what actually is form control. Let me explain what is form control.

Basically, FormControl is a class that inherits the AbstractControl class in angular. This class can perform various tasks, such as accessing the value, act according to how the user interacts with the form, respond as per the events occurred while the user fills in the form, etc.

So, for each input field in our form, we need to create an instance of the FormControl class. With the help of this class, we can check different things.

For example, we can get the value of the input field, we can check if the content of input field has been changed or not, we are also able to check if the field contains a valid value or not.

If we found that the field doesn't have valid values, we can display validation errors for that particular field.

There exist different properties in FormControl. These are as follows.

valid
invalid
dirty
pristine
touched
untouched
value
errors

What is dirty in the Angular Form?

Simply saying, by the term "dirty", angular is able to detect that the field's content has been changed by the user.

What is Pristine in Angular?

In simple words, "pristine" tells angular that the field's content has not been modified by the user.

Ok, then tell me about touched and untouched

At a glance, you may think that the term "touched" means that the user has not touched the form-field. Yeah, you are right!

In terms of programming, "touched" means that the user has placed the focus on that particular field. By the term "focus" I mean the user puts the cursor blinking in that field so that he or she can start typing content there.

I guess I don't have to discuss what "untouched" means.

Let's talk about the angular form's error object

In one sentence, all the errors that result after the user fill out the form are stored in the error object. These errors are stored in form of key-value pairs. In which the field name itself is the key and the error message is the value for that corresponding key.

What is Form Group in Angular?

According to angular's official website: FormGroup tracks the value and validity state of a group of FormControl instances.

Let's discuss what is form group and its purpose. FormGroup is a class that represents a group of controls in a form. Each of the forms refers to a form group.

Technically we can say that each form group can consist of multiple form control elements in angular. As we know earlier, we can easily access each form control elements various properties (e.g, valid, invalid, dirty, pristine, etc.).

Template Driven Forms: A Simple Example

Let's assume we want to build a checkout form for an e-commerce store that takes the user's first name, last name, address, etc. under the Billing Info section. Then in Payment Info section user enters details such as the name on the debit card, card number, expiry date, CVV number, etc.

Please note that angular material is used to build the user interface of this application. If you don't know about it, you can check out this article here.

Following is the screenshot of the app.

To follow along with this tutorial, download the complete project by clicking the button shown below.

Explanation of app.component.html File

In the above code snippet of the app.component.html file, we have created two expansion panels. The main purpose of it is to represent similar form elements together as a single entity. First of the panel will hold all billing information, while the second one will hold all details regarding the payment information that the user will provide to make the payment.

We also applied a directive called "ngForm" that is provided by angular automatically. Its main purpose is to keep track of the form's overall validation status. But, under the hood, it creates a FormGroup instance at the top level.

We want to properly handle the validation for each individual form elements. To achieve this, we have created a template variable "userForm" and assigned ngForm to that variable. After doing that, we are able to get values for properties like dirty, touched, pristine, etc.

Here, we have applied a "ngModel" directive to the input field that asks user to enter his or her first name. In template driven approach, angular will create a FormControl object and associate the input field with that object.

Also, we must set name property for that input field, it is mandatory to do so. Otherwise, angular will not be able to distinguish that input field.

Later, we want to make sure that if user did not fill up the first name, the user will be notified that he or she forgot to do so. For this purpose, we have created a local reference variable called "fName" and stored "ngModel" in that variable.

We are using HTML5's built-in "required" validator. Then with the help of ngIf directive, we check to see if first name field has focus and it is invalid. If these conditions are true we set the show user a message "You must enter first name".

With the help of <mat-error> angular material element, we checked to see if "firstName" input field contains any required type of error or not. Here the question mark ("?") symbol denotes optional property. We used it to indicate if errors property exists then we want to make use of that property.

Now, you may wonder why "ngModelGroup" directive is used. Let's explain the main role of it. Sometimes, we may need to send a complex object to the back-end after submitting the form. For this purpose, angular make use of this directive.

For example, in this example, we want to send billing information as well as payment information to the back-end. Under billing, we have fields such as first name, last name, gender, etc. Inside payment, we have card number, CVV number, etc.

So, it logically makes sense to send billing data inside the "billing_information" object and payment data inside the "payment_information" object. That's why, we created two div elements and assigned first ngModelGroup's value "billing_information" and second value as "payment_information".

Explanation of app.component.ts File

Here, we are handling the "ngSubmit" event emitted by the "ngForm" directive. We simply wrote the code to display the submitted data in the browser's console window.

The screen-shot of the submitted data is shown below.

Final Words

I hope that after reading this article on angular template-driven forms, you have a clear concept in it. If you have any doubts, you can ask me questions. If anyhow this article proves beneficial to you, please share it among others. Thank you!

Implementing Oauth2 Social Login With Facebook Part 2

noreply@blogger.com (Nilesh Sanyal) — Tue, 08 Oct 2019 17:18:00 +0000

In the previous part of this article, we discussed what is OAuth2 and how OAuth2 helps to integrate social login to our application in an easy approach. Also, we discussed how you can use OAuth2 to create a facebook application on their official website that will later come handy to continue building our node js application.

This article is the second part of implementing social login with facebook. If you missed that article, you can read it here.

OAuth2 Workflow For Facebook Login Application

Let's discuss the workflow of the application as per the above screenshot. To create the application we require 3 main parties involved. The first one is the angular application, second is the Facebook server itself and last but not least the server which will act as a REST API written in Express JS Framework.

At first, users will try to login to our application. To do that they will click on the "Login With Facebook" button. Then a dialog will open that will ask the user to enter their Facebook credentials. Finally, the user gives permission to access some of their Facebook data.

After allowing access, our angular client gets the access token from the Facebook server. For now, we can easily access facebook data from the angular client application.

But, the backend server needs to know that. In order to do so, the angular application sends a request to the backend server with the access token. To verify that token the backend sends a verification request directly to the Facebook server.

If the Facebook server finds the token to be a valid one, it sends back the user's profile information. After receiving that data, the backend express js server verifies that the user profile data is correct and finally creates a new user in the application.

If the user already exists in the backend, the user profile will be updated instead.

Then the backend server will create a JSON web token that will identify the user. Backend returns that token as a response to the client application. The client app will store that token so that when sending requests to the server it can send the token along with the request.

What We Will Be Building

We will create an application that will have a login with facebook functionality. In order to understand the overall functioning of this app, you need to have fundamental knowledge in Angular and Node JS.

To follow along with this tutorial, download the project file by clicking the button shown below.

Then make sure you install node js and MongoDB. After downloading is finished extract the rar file, then open two command prompts or terminal windows. In one terminal navigate to the "frontend" folder. In another one, navigate to the "backend" folder. You need to start your MongoDB database too.

Open ".env" file in "backend" folder, put actual values in "FACEBOOK_APP_ID" and in "FACEBOOK_APP_SECRET" environmental variables. To get those values you need to put your app id and app secret keys that were generated when you created a Facebook application on facebook developer's website.

You may have to change other values as per your needs. For example, if you want to change the database name, you can do so by changing the value for "DB_DATABASE" variable.

The terminal where you opened the "frontend" folder run this command "npm start". In another terminal where the "backend" folder is opened, run "npm run dev-server".

Building The Frontend With Angular

Let's start building the application's frontend part with Angular. To connect our angular app with Facebook, we need to use Facebook's Javascript SDK.

For this we need to add the link to that SDK, we can do so with the help of script tag in index.html file as shown below.

Adding Bootstrap To The Project

Open another terminal, navigate to the location of the "frontend" folder. Run "npm install bootstrap" command, this will install bootstrap locally. Also, you need to add font-awesome for adding facebook icon to the login button.

Keep that terminal open, we will need this terminal when we will build our angular application. For doing this, run "npm install font-awesome". Then add that dependency in the angular.json file as shown below in the code snippet.

Creating Login Component For Our OAuth2 Facebook Application

When we will run our application, the user will see the login page. For that purpose, we need to create a login component. Run "ng g c login" in the terminal window. Open login.component.html file and add the following codes for designing the login component.

In the above code snippet, fbLogin() method is called when the "Login with Facebook" button is clicked. Let's write what will happen when that button will be clicked.

In the above code snippet, the fbLogin() method calls user service that performs an API call to our backend server and returns the promise object. After getting that promise object, the user is redirected to the dashboard page.

Creating User Service For Our OAuth2 Facebook Application

This user service will communicate with the Facebook server and our backend server. This service is responsible for performing the following tasks.

Making sure so that users can log in with their Facebook profile.
Logging users out.
Checking if users are logged in or not.
Getting details of currently logged in users.

To create the service issue this command in terminal. "ng g s user".

Explanation of the Code Snippet

In the UserService typescript class, a library is initialized from the facebook javascript SDK. Here, we need to replace " YOUR_FACEBOOK_APP_ID " with the application id that we got when we created the Facebook application on the facebook's developers website.

In fbLogin method, we are calling FB.login method that will display a dialog window, so that users can log in. If users are not logged in this dialog will be displayed. This dialog also asks users to allow the application to access user's data.

The response coming from FB.login method contains information whether the user is logged in or not and if they have allowed our application to access their data.

After getting response we call our backend to log in to the application. If user is able to log in to the backend, we will get a token as a response from the backend server.

We stored that token in local storage. So that, later when we will send a request to the backend, we are able to send the token alongwith the request. The main role of the token is to identify the current user.

The getCurrentUser method gets the data of currently logged in user from the server.

The logout method removes the token from the browser's local storage.

Creating Dashboard Component For Our OAuth2 Facebook Application

Run "ng g c dashboard" in the terminal to create dashboard component. Code snippet for dashboard.component.html is shown below.

In the above code snippet, we are displaying currently logged in user's email address.

Let's write the code for getting currently logged in user's details. Code snippet for dashboard.component.ts file is displayed below.

In the code snippet, at the initialization phase of the dashboard component, we are loading user's data. We do so by calling the user service's getCurrentUser method inside ngOnInit method. After that we store user's data in currentUser object.

I guess, you remembered this currentUser object, it is used in dashboard component's html page to access currently logged in user's email address.

In the logout method, we are calling user service's logout method. After user is successfully logged out, they are redirected to the "login" route.

Creating Guards For Our OAuth2 Facebook Application

Let's assume we want to implement some sort of functionality such that we will allow only those users to visit the dashboard page who are already logged in.

We won't allow users who are not logged in and will redirect them to the login page when they will try to visit the dashboard page.

To add this functionality to an angular application, a guard is used.

There exist four types of guards in angular, these are as follows.

CanActivate: This guard decides whether a route can be activated or not. If this guard returns true navigation will continue to otherwise navigation will not continue to the next route.
CanActivateChild: It decides if a child route can be activated.
CanDeactivate: It is helpful to decide if a route can be deactivated.
CanLoad: It helps to decide whether a module can be lazy-loaded or not.

We need to add two guards in this application.

To create the auth guard type "ng g g auth" in the terminal window. The code snippet for AuthGuard is below.

In the above snippet, AuthGuard checks if the user is logged in or not. This is possible with the help of UserService's isLoggedIn method. If the user is logged in, we will resolve the promise, and allow the user to visit the dashboard page.

Otherwise, the user will be redirected to the login page.

Similarly to create another guard named anonymous, type "ng g g anonymous" in the terminal. The code snippet for it is displayed below.

In the code above, AnonymousGuard is used for checking if the user is not logged in. Its functionality is defined in UserService's isLoggedIn method. If the user is logged in the user will be redirected to the dashboard page.

Defining Routes For Our OAuth2 Facebook Application

In the route file, we define what component angular will load when a specific route is being accessed by the user. For example, for visiting the login route the LoginComponent will load. When a user visits the application without any path, in that scenario, the LoginComponent will be loaded by default.

Explaining The AppModule

In the above code snippet, we have used a new module named "auth0/angular-jwt", so that we can automatically attach a JSON web token as an authorization header. The browser attaches this header when the application sent the HTTP request.

The main role of tokenGetter function is to get the JSON web token from the of the current user from the browser's local storage. Angular fetches this token with the key "id_token".

Building The Backend With Express JS

Let's create the backend part of our application. We will be using the Express Js framework for creating the REST API. For storing user information we will use a MongoDB database.

Project Dependencies At a Glance

We are using the lightweight non-opinionated framework of Node i.e, Express Js. The body-parser module will take care of handling incoming request bodies with a middleware. The "jsonwebtoken" module will handle the JSON web token.

"passport" module will take care of authentication and "passport-facebook-token" will specifically handle the Facebook authentication. "mongoose" will communicate with MongoDB database. The "dotenv" module facilitates the use of environmental variables and the "cors" module will help to enable CORS on our server.

Creating The Node Server

In the above code snippet, at first all the dependencies are declared, then while configuring the CORS middleware in line number 23, we make sure that the "x-auth-token" header is visible to the angular client.

This step is necessary otherwise our angular client would ignore this custom header. It is done with the "exposedHeaders" property.

To connect with the MongoDB database, in line number 12, we have used the IIFE (Immediately Invoked Function Expression). If you don't know what it is, you can know more about it here.

In line number 36, we want to validate JWT(JSON Web Token) in every frontend request. If we find that the JSON Web Token is valid, then "req.auth" will be set with the decoded JSON object. Later the middleware that will perform authorization will use this object.

In line number 47, the user data is fetched by user id, and then that user data is stored in the request object within the "user" property. Finally in line 57, to extract only selected data from the user object, we removed two properties namely "facebook" and "__v".

Creating The user Routes File

In line number 8, we invoked the passportConfig function, which has the actual implementation of how passport js module will handle facebook login functionality.

In this file, we have defined the route where we have configured to use passport js's token-based strategy for authenticating with Facebook login. That's why, in line number 13, you will notice that we have set to authenticate with "facebookToken", we set "session" as false.

Then we invoked the userController's facebookOAuth function.

Creating The passport.js File

In this file, we are checking if any user exists in the database, if one user is found, we simply return the user object. Otherwise, we create a new user and then return that user object instead.

Creating users Controller File

In the above code snippet, we are storing the user's id in a token. That token is known as JSON Web Token (JWT). After generating JWT, we send it to the frontend (i.e, angular application). We send the token with the help of a custom header i.e, "x-auth-token".

Creating user Model File

Conclusion

Finally, you have a complete application that enables users to login with their existing Facebook account. You have created that app that follows the OAuth2 protocol in order to build this application.

For developing the frontend part we used Angular. Then the frontend will communicate with a backend that is built using Express Js. If you find this article helpful, consider sharing this with others. Thank you!

Implementing Oauth2 Social Login With Facebook Part 1

noreply@blogger.com (Nilesh Sanyal) — Sat, 05 Oct 2019 10:40:00 +0000

In this article, you will have a clear understanding of how to use oauth2 authentication to implement facebook login with node js. Adding social login to your application has a lot of advantages. First of all, users of your application don't need to fill up a long registration form containing 10 or even more input fields.

Also while attempting to login to any application, they often forget their password. They, don't want to go through the password recovery process, as they find it tedious to do so.

The solution to this problem is if are able to register and login users to our application with their social network accounts in which they already have accounts. We can implement this functionality with the help of an authentication scheme known as Oauth2.

You can check out my article on the callback function here.

What is Oauth2

As per the official site of Oauth: OAuth 2.0 is the industry-standard protocol for authorization. OAuth 2.0 supersedes the work done on the original OAuth protocol created in 2006. OAuth 2.0 focuses on client developer simplicity while providing specific authorization flows for web applications, desktop applications, mobile phones, and living room devices.

In simple words, it is an authentication and authorization scheme in which users on the internet are able to access their information on other websites, without providing their account credentials ( username and/or password).

Only one requirement exists; that is, the user must authorize the application to access their data for a selected OAuth provider.

Why OAuth2 is Used

Users don't need to remember their credentials

Users can sign up or log in to any application that are using OAuth2 without using any credentials such as email id and/or password. They simply need to authorize the application to access their information for a selected OAuth provider. This step is done for one-time only.

Prevents security holes

In the Oauth2 mechanism, the user doesn't provide passwords to sign in or sign up for the application. So, from the development point of view, developers don't need to store a user's password. This, in fact, prevents inappropriate use of storing passwords.

Developer friendly

Developers can easily implement oauth2 in an application. They just need to go through the technical documentation for the specific OAuth provider. For example, if sign in and/or sign up with facebook functionality needs to be implemented, the developer needs to visit the official docs page for facebook OAuth provider.

Ability to handle non-web clients

In the OAuth2 authorization process, the program that sends requests to the authorization server is known as the client. The client can be a browser, a mobile app or any other device. That's how OAuth2 is able to handle non-web clients also.

How OAuth2 Works

Before discussing how OAuth2's working principle, it would be better if we discuss the key roles played by each component in this protocol.

Resource Owner: It refers to the user who gives permission to authorize an application in order to access their account. The authorization's scope determines the application's access to the user's account.
Resource or Authorization Server: The authorization server is responsible for verifying the identity of the user. Resource server refers to a server that hosts the protected user's accounts.
Client: It refers to the application that accesses the user's account. But, in order to do so, it must be authorized by the user, and that authorization process must go through a validation process carried by an API.

Now, you know the roles played by each component; let's discuss the overall workflow of OAuth2 in simple words.

Guenter.kolb, Protocol-Flow, CC BY-SA 4.0

The client or the application sends requests for authorization to access resources from the resource server.
If the user accepts the request, the application receives permission to access the user's data as per the scope of the permission.
The client requests an access token from the authorization server or API representing the authenticity of its own identity. These access tokens life span is very short, think of their life span in terms of hours and minutes.
If the authorization server authenticates the application's identity, then the server generates an access token to the application.
The application requests the resource from the resource server or API. Then it sends the access token to the server for authentication.
If the resource server finds that the access token is valid then it serves the resource to the application.

You need to register your application before using OAuth2 with it. It can be done by visiting the service's website's developer portion. The following details are required in order to do this.

Application Name
Application Website
Callback or redirect URL

What is Redirect URL in OAuth2

Redirect URL means where the service will redirect users after they authorize or deny your application. It also points to the route where you will write codes to handle access tokens.

What is Client Id in OAuth2

After registering the application, the service issues client credentials in the form of client id that is nothing but a unique string to identify the application and it is used by the service itself. Also, it helps to create an authorization URL that is displayed to the users.

What is Client Secret in OAuth2

The client secret's role is to authenticate the identity of the application to the service API when the application requests to access a user's account. The value of the client secret must be kept as a secret and should not be disclosed to anyone.

What is Refresh Token in OAuth2

We already discussed that the access token has a very short life-span. When the access token expires then refresh token enables the client to reauthorize without asking the resource owner to reauthenticate.

Alright, we discussed basics about what OAuth actually is, why we need it and what is the internal working principle behind OAuth2. Let's get down to building a node js application having facebook login built inside it that uses OAuth protocol.

Creating OAuth2 Facebook Application

At first, we need to create a facebook application, to do so visit the facebook developers page. Then log in with your Facebook account, this step is necessary because after doing this you will be able to get an application id and application secret that is mandatory for connecting our node js application with Facebook.

1) After login click on the "Get Started" button, then you will something similar as shown in the screenshot below.

2) Click on the "Next" button, then you need to choose your job role. Choose "Developer" (recommended).

3) You need to create an app first, the screen-shot for this step is shown below.

4) Click on "I am not a robot" option checkbox.

5) After this step, you will be redirected to the "Add Product" page. On that page, click on the "Setup" button.

6) Then you need to choose the platform for which you want to add facebook login functionality. Select "www" option.

7) Then you need to enter the URL of your website. If you do not have a site in production, you can definitely use "localhost". I used "http://localhost:8000" for my this application. Click the "Save" button.

8) Then skip the rest of the steps, click the "Settings" option in the left-hand menu.

9) In the Settings page, you need to add redirect URL in order to tell facebook where a user will be redirected back after authorization. Here, again I am using localhost for doing this. I have added "http://localhost:8000/auth/facebook/callback" as the redirect URL. Click on the "Save" Changes button.

10) Then go to the main settings link in the top-left position. That is highlighted in the screen-shot shown below.

11) You will see app id and app secret keys, copy these and paste them somewhere. We will need them later.

That's it, you have successfully created a facebook application which is the first step for integrating facebook login to the node js application that we will create.

Conclusion

I hope now you have a clear understanding of how oauth2 can be used to provide facebook login to a node js application. If you find this article helpful, consider sharing it with others. Thank you.

Facts You Need To Know About Javascript This Object Today

noreply@blogger.com (Nilesh Sanyal) — Sat, 28 Sep 2019 16:21:00 +0000

All of us know that javascript supports object-oriented programming features. So we can say that an object is a basic building block of OOP ( object-oriented programming). There is one special object available in javascript, "this" object.

In this article, we will learn how "this" keyword actually works, how the value of "this" object is helpful in different situations.

But, before diving more deeply about "this" object, we need to know the fundamentals of how the browser executes js code.

Understanding Execution Context

As we all know, javascript is a scripting language. So, naturally, the interpreter interprets javascript code. Then that the code gets executed line by line. The scope in which the code is executed is known as the execution context.

Let's understand this concept with an example in real-life scenarios. Suppose you were asked about your role in the project in which you are currently working. Then in response to this question, you will briefly explain your role. So, you gave your answer in the context for which the question was asked. A similar concept is applicable in javascript's execution context.

When any code is executed in javascript, it is evaluated as one of the following.

Global context: In this environment, your code is run for the first time.
Function context: It is applicable whenever the flow of execution enters a function body.
Internal context: Text that will be executed inside the internal eval function falls under this scope.

In the above screenshot, the red border indicates global context, green one refers to a function or local context. Global context can be accessed from any other context in the javascript code.

When a function is called it creates a private scope, in which anything declared inside of the function can not be directly accessed from outside the current function scope.

But, a function can easily access a variable that is declared outside of its current context. This is the fundamental concept of the execution context.

Role of Javascript this Object in Execution Context

Now, you have a clear concept on execution context, let's discuss how "this" object plays its role in it.

We already know that javascript is executed as a single thread, that means only one statement will run in the browser. Other actions will be stored in a stack which is known as the execution context.

The execution context is changed depending on the item that is present at the top of this stack. The object that "this" refers to changes every time when the execution context is changed.

"this" object refers to the global object. Whenever a code is run as part of a function call, then "this" refers to the global object.

For example, when we run javascript in the browser, the window object is considered a global object. In Node Js environment, a unique object "global" will be the value of "this".

What Does this in Javascript Mean

The keyword has different meanings and these depend on exactly where "this" keyword is used.

It refers to the global object that is global if is called in a Node Js environment and it belongs to the window object if it is executed in the browser environment.
At the time when a function is executed as a property of an object, then "this" refers to the parent object.
When a function is called with the "new" operator, then "this" refers to the newly created instance.
When a function is executed with apply and call method then at that time "this" refers to the value passed as the first parameter of apply or call method.

Let's discuss these use cases one by one.

Javascript this Object Use Cases

In IIFE(Immediately Invoked Function Expression) :

If you don't know what is IIFE, you can know more about it here. If "use strict" option is turned on, then the value of "this" will be undefined. Also, the global object refers to undefined in case of the window object.

Refers To a Current Instance

When we define a class in javascript, and if we define a constructor there, then that constructor will return a new instance of that class. For that scenario, "this" keyword will refer to the current instance of the newly created class.

Refers To Parent Object

In javascript, the property of an object can be a value or a simple method. At the time when the method that belongs to an object is called then "this" refers to the object that contains the method which will be executed.

In the above code snippet, when user.showMessge() method of user instance is called, "this" keyword refers to the user object instead of the global object. That's why it displayed "false" as output.

But, when only showMessage() method is called, "this" keyword refers to the global object. So, that time "true" is displayed. At the time when fun1() is called, it displayed "true" as it was treated as a normal function.

Uses With call() and apply() Methods

Javascript function is known to have 3 unique functions, those are call(), apply() and bind() functions. With the help of these functions, we can explicitly specify what should be referenced by "this" keyword within the calling function.

The main difference between call and apply method is that call() function expects parameters to be passed individually, where apply() function expects them to be passed as an array of parameters.

Final Words

I hope that I am able to clear all your doubts regarding javascript "this" object. If this article proves beneficial to you, share it among others.

Javascript Callback Functions In Depth Guide for 2019

noreply@blogger.com (Nilesh Sanyal) — Wed, 18 Sep 2019 18:09:00 +0000

Javascript callback functions; another important concept you must need to understand. Otherwise, you might face a lot of struggles for becoming a successful javascript developer. But I am sure that after reading this article thoroughly you will be able to overcome any obstacles you previously had with callbacks.

Before, I will talk more about callback function, but at first, you need to have some minimal level of knowledge about functions. I mean you should know what a function is, how it actually works, what are different types of functions etc.

A Quick Recap: Javascript Function

What is a Function?

A function is a logical building block inside of which a set of codes are written in order to perform a specific task. Practically, functions allow writing codes in a more organized way that is also easy to debug and maintain. Functions also allow code reuse.

You define function once, and call it when you need to without writing the same codes again and again.

The syntax for Declaring a Function

We talked a little about what a function is. Now, let's see how to declare a function in javascript.

1. Using Function Constructor: In this approach, the function is created with the help of a "Function" constructor. Technically, this approach is less efficient than declaring function with the function expression syntax and function declaration statement syntax.

2. Using Function Expression: Typically, this approach is the same as a variable assignment. In simple words, the function body is considered as an expression and that expression is assigned to a variable. Functions defined with this syntax can be either named or anonymous.

A function that has no name is known as an anonymous function. An anonymous function is self invoked, which means it calls itself automatically. This behavior is also known as immediately invoked function expression(IIFE).

3. Using Function Declaration Statement: Actually, this method is the old school method that is used commonly in javascript. Here, after the keyword "function" you have to specify the name of the function. After that, if the function accepts multiple parameters or arguments; you need to mention them too. Although this part is completely optional.

In the body of the function, the function must return a value to the caller. After a return statement is found, the function will stop executing. Inside the function, the parameters will act as a local variable.

Also, the variables that are declared inside the function will be local to that function. Local variables can be accessed within that function only, so variables with the same name can easily be used in different functions.

Invoking a Function

The function declared before will be invoked when any one of the following occurs:

When an event occurs, for example, the user clicks on a button or the user selects some option from the dropdown list, etc.
When the function is called from the javascript code.
The function can also be invoked automatically, we already discussed that in anonymous function expression.

The () operator invokes the function.

What is Javascript Callback Function?

As per MDN: A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

I know after reading this technical definition, you are confused and hardly able to understand what is actually a callback function.

Let me clarify this with simple words, a callback function is a function that will be executed just after another function has finished executing. The callback function is a function that is passed as an argument to another javascript function. That callback function is executed inside of the function it was passed into.

In javascript, functions are treated as first-class objects. By saying the first-class object, we mean that a number or a function or a variable can be treated as same as any other entity in the language. Being a first-class object, we can pass functions to other functions as variables and functions can be returned from other functions too.

Functions that can do this are known as higher-order functions. A callback function is actually a pattern. The word "pattern" means some sort of proven methodology to solve a common problem in software development. There it is better to call the use of callback function as a callback pattern.

Why We Need Javascript Callback?

The client-side javascript runs in the browser and the main browser process is a single-threaded event loop. If we try to execute long-running operations within a single-threaded event loop, the process is blocked. This is technically bad because the process stops processing other events while waiting for your operation to complete.

For example, the "alert" statement is considered as one of the blocking codes in javascript in the browser. If you run alert; you can no longer do any interaction within the browser, until you close the alert dialog window. In order to prevent blocking on long-running operations, a callback is used.

Let's dive deep so that you will understand exactly which scenario callback is used.

In the above code snippet, getMessage() function is executed at first and then displayMessage() is executed. Both displayed a message in the browser's console window and both of them executed immediately.

But in certain situations, some codes are not executed immediately. For example, if we assume that getMessage() function performs an API call where we have to send the request to a server and wait for the response, then how we will be able to deal with it ?

Simple, to handle that kind of scenario, we need to use callback functions in javascript.

How To Use Javascript Callback Function?

Rather than telling you about the syntax of javascript callback functions, I think it would be better if we try to implement a callback function on our previous example. The code snippet is shown below in the following screenshot.

In order to use a callback function, we need to perform some sort of task that will not be able to display results immediately. To emulate this behavior, we are using javascript's setTimeout() function. That function will take 2 seconds to display the message "Hi, there" to the console window.

After this message is displayed, then "Displayed message" will be shown in the console window of the browser. So in this scenario, at first we are waiting for the getMessage() function and after this function is executed successfully, we are executing displayMessage() function.

How Javascript Callback Works?

Let me explain what actually happened behind the scene in the previous example.

As you can see from the previous example, in the getMessage() function, we are passing two arguments; the first argument is the "msg" variable which gets displayed in the browser's console window and second argument is the "callback" function.

Now, you may wonder why the "callback" function is passed as the argument. It's because to implement callback function, we must pass a function as an argument to another function.

After getMessage() function finishes it's task, we are calling that "callback()" function. After that when we are calling getMessage() function, we passed reference to "displayMessage()" function, which is treated as a callback function.

Note carefully that, when getMessage() function is called, we are only passing the reference to the "displayMessage" function. That's why, you will not see the function invoke operator i.e, "()" beside it.

Is Javascript Callback Asynchronous?

Javascript is considered as a single-threaded scripting language. By the term "single threaded" it means that javascript execute one code block at a time. When javascript is busy executing one block, it is not possible for it to move to the next block.

In other words, we can say that the javascript code is always blocking in nature. But this blocking nature prevents us to write code in certain situations when we are not able to get the immediate results after running some specific tasks.

I am talking about tasks such as the following.

Sending API call to certain endpoints for getting data.
Sending network requests to get some resources (for example, text file, image file, binary file, etc. ) from a remote server.

To handle these situations, we must write asynchronous codes and the callback function is one approach to deal with these situations. So, callback functions are asynchronous in nature.

What is Javascript Callback Hell?

Callback hell occurs when multiple asynchronous functions are executed one after another. It is also known as the pyramid of doom.

Let's assume, you want to get list of all Github users, then among the users, you want to search for only top contributors for javascript repository. Then among the persons, you want to get details of the person whose name is Jhon.

To implement this functionality with the help of callbacks, the code snippet will be similar as shown below.

From the above code snippet, you can see that the code becomes harder to understand, harder to maintain and also harder to modify. This happens due to the nesting of all the callback functions.

How do you stop Callback Hell?

Multiple techniques can be used to avoid callback hell there are as follows.

By using promises.
With the help of async-await
By using async.js library

I have already discussed, how to work with promises and how async-await can be helpful to avoid callback hell.

By Using Async.js Library

Let's talk about working with the async.js library in order to avoid callback hell.

As per the official website of async.js : Async is a utility module which provides straight-forward, powerful functions for working with asynchronous JavaScript.

Async.js provides near about 70 functions in total. For now, we will discuss only two of them i.e, async.waterfall() and async.series().

async.waterfall()

It is useful when you want to run some tasks one after the other and then pass the result from the previous task to the next task. It takes an array of functions "tasks" and a final "callback" function that is called after all functions in "tasks" array have completed or a "callback" is called with an error object.

async.series()

This function is helpful when you want to run functions and then you need to get the results after all the functions have executed successfully. Main difference between async.waterfall() and async.series() is that async.series() dont pass the data from one function to another function.

Javascript Callback vs Closure

Closure

In technical terms, closure is the combination of a function that is bundled together having references to its surrounding state.

Simply saying, a closure allows access to the outer function's scope from an inner function.

To use a closure, we need to define a function inside another function. Then we need to return it or pass it to another function.

Callback

Conceptually callbacks are similar to closure. A callback is basically where a function accepts another function as an argument.

Final Words

I hope this article clears all your doubts on javascript callback functions. If you find this article helpful, share it among others.

Promises In Javascript A Complete Guide for 2019

noreply@blogger.com (Nilesh Sanyal) — Sat, 14 Sep 2019 14:26:00 +0000

Promises in javascript is an important concept that is essential for a javascript developer to understand. If this concept is clear, the developer can utilize this in a variety of ways in their day-to-day lives.

There are a lot of articles, tutorials available on the web about promises. But, very few of them act as a comprehensive guide to make use of promises. In this article, I will try to elaborate on promises in-depth. So you won't need to go through other resources.

What is a promise?

As per MDN documentation: A promise is an object that represents the eventual completion or failure of an asynchronous operation, and it's resulting value.

Why Do We Use Promises In JavaScript?

Generally speaking, javascript is a scripting language that is synchronous in nature. In order to perform asynchronous operations, promises are of great help. Before promises were invented, when dealing with multiple asynchronous tasks, callbacks were used a lot.

But multiple callback functions lead to unmanageable code that produced something known as callback hell. To solve this issue, promises are used.

That's a lot of technical jargon, right! But, I think you would understand promises better if the discussion goes in a non-technical approach.

How Do Promises in Javascript Actually Work?

You can think of javascript promises similar to promises you make in real life.

Imagine, you made a promise to your girlfriend that you will buy her an expensive gift. You don't know whether you will be able to keep your promise. Maybe you will be able to keep your promise or maybe not.

So, if you promised but still didn't manage to purchase the gift, the promise is in a pending state. If you are able to keep your promise, then your promise is fulfilled. But, if for some reason, you are unable to do so, your promise is in the rejected state.

When Was Promise Introduced in Javascript?

Promises aren't a brand-new concept. In fact, they have been around since 1976, when the term was first introduced. At the starting of 2011, the concept of it was made popular by jQuery deferred objects. The concept of deferred objects are similar to promises, but they do not follow the exact technical specification as stated in the ECMA script 2015 for promises.

Finally, promises were officially added in the ECMA script 2015 specification and have also implemented in all of the latest browsers and in Node Js.

Different States In A Promise

The same concepts apply to promises as well. A promise has any one of the following states. These are as follows:

Pending: The task relating to the promise hasn't fulfilled or rejected yet.
Fulfilled: The task relating to the promise succeeded.
Rejected: The task relating to the promise failed.

One important point to note here is that the function that creates the promise is able to keep track of the promise states.

Getting To Know More About The Promise Object

In the code above, we created a promise, if the value of variable "isPossibleToPurchaseGift" is set to true then the promise is resolved. Finally, we are displaying that promise's resolved state in the browser's console window.

If we look closer in the console window, we are able to expand the Promise object, then if we expand the highlighted portion as shown in the screenshot below, we are able to get the same as shown in the screenshot below.

If we expand further, we will see something similar as shown below. Note, the highlighted portions in the image.

Static Methods in Promise Object

Promise.all(promises): It waits for all promises to resolve and returns the array of all the results of the promises. An important point to note here is that, if any of the promises are not fulfilled, then that becomes the error of the Promise.all and all other results are ignored.
Promise.allSettled(promises) : It is recently added method. Its purpose is to wait for all promises to settle and return their results as an array of objects with the state ( that could be either 'fulfilled' or 'rejected' ) and value ( if fulfilled ) or reason (if rejected).
Promise.race(promises): It waits for the first promise to resolve and its outcome or error becomes the result.
Promise.resolve(value): It produces a resolved promise with the given value.
Promise.reject(error): It generates a rejected promise with the given error.

Creating A Promise In Javascript

In the code above, we have created a promise called "willGetNewGift". The promise constructor takes two parameters, first is resolve function and the second one is reject function.

What is Promise Resolve in Javascript?

In simple words, resolve function indicates if the promise is succeeded then the promise object is resolved with a given value. So, in the above code snippet, if " willGetNewGift" variable is set to true then the promise will return a gift object.

What is Promise Reject in Javascript?

The reject function returns a promise object that is rejected with an error message. In, the above code snippet if " willGetNewGift" variable is set to false, then this promise will return an error object.

Invoking The Promise In Javascript

In the code above, we are calling the promise named "willGetNewGift" and then in order to get the value of the fulfilled promise we are using then() function. We set the variable "isPossibleToPurchaseGift " to true. If the value is true we are considering that the promise is resolved. So, we are able to display the gift object inside then() function. The complete code is shown below.

Chaining Promises in Javascript

Non-Technical Point of View

Let's assume after making a promise to your girlfriend to buy her an expensive gift, then you would also like to attend dinner with her and finally, you would love to go on a long drive with her. Imagine, the situation here, after keeping your first promise, you will have to keep your second and third promise too.

To handle these kinds of situations you would need to chain multiple promises together. So promise chaining comes handy in these situations.

Technical Point of View

The promise object is capable of performing asynchronous tasks in javascript. Each asynchronous task will return a promise object and each promise object will have a then function that can take two parameters, a success handler and an error handler.
The then function will also return a promise, so that it is possible to chain multiple promises.
Each of the handlers (success or error) can also return a value, which will be passed to the next function as a parameter, in the chain of promises.
If a handler returns a promise, then the next handler will be called only after that request is finished.

Let's justify what we said earlier with an example.

Implementing Promise Chaining in Javascript

In the above code snippet, we defined 3 separate functions, first function "willGetNewGift" returns a promise object, the other functions also return promises.

Let me explain exactly what happened. At first, " willGetNewGift " function is called that returns a promise then that promise object is passed to the next function "willAttendDinner", similarly it also returns a promise object. Again, that object is passed to "willGoOnALongDrive" function. Finally, the result of the function is displayed on the console. That's why you will be able to see "You kept your last promise by going on a long drive!" this message.

What is Promise.all()?

In simple words, promise.all() is a method that is beneficial when we have multiple promises and we have to wait for each individual promises to complete before the next promise can be executed.

As per MDN documentation: The Promise.all() method returns a single Promise that resolves when all of the promises passed as an iterable have resolved or when the iterable contains no promises. It rejects with the reason of the first promise that rejects.

So, one fact is clear from the documentation that, if anyone of the promise objects in the array gets rejected, the entire Promise.all() method gets rejected.

How Does Promise.all() Work?

From the MDN docs, we know that Promise.all() method takes an iterable object. By iterable object, it means that the object can be iterated easily. String and arrays are examples of such kind of iterable objects.

Generally, this method returns a pending promise object that gets resolved or rejected in an asynchronous way as soon as the promise in the given iterable object has resolved or rejected.

After promise is resolved successfully, the values of the respective promises will be there in the same order at the time they are passed in the promise all method. If any of the promises in the iterable gets rejected, all the promises get rejected. This incident will take place even if the rest of the promises are resolved successfully.

Implementing Promise.all() in Javascript

In the above code snippet, we created 3 functions each of them returns a promise object. Then we called each of them in Promise.all() function, which returned the result of the promises inside an array. The output of this is shown below.

If anyone of the promise fails to resolve, the result will generate an error. The code snippet is shown below.

The output of the code is shown below.

What is Promise.race()?

If we need to return the result of the first resolved promise or rejected promise as soon as it is available, then we should use this function.

As per MDN documentation, The Promise.race() method returns a promise that fulfills or rejects as soon as one of the promises in an iterable fulfills or rejects, with the value or reason from that promise.

Implementing Promise.race() in Javascript

In the above code snippet, we can see that from the 3 functions that return promise objects upon successful execution, only willGetNewGift() function took 500 milliseconds to execute. So the result of this promise is returned after running this code block.

Are Javascript Promises Synchronous or Asynchronous?

At first, you should know that javascript is a single-threaded scripting language. Single-threaded means that it must execute one block of code before moving to execute the next code block. In simple words, the javascript code is always blocking in nature.

Sometimes we need to perform some tasks, and we are not sure exactly when that task will be complete and its result will be returned. But, at the same time, we need to guarantee that some blocks of code must be executed when we get a successful result or if a failure occurs we need to handle that scenario too.

To tackle these situations, we need to write asynchronous codes in javascript. Promises allow writing codes in an asynchronous way. So, obviously, we can say that promises are asynchronous.

Let's justify with an example that promises are asynchronous.

Probably, you expected the following output.

Before giving gift
You kept your last promise by going on a long drive!
After giving gift

But, the actual output is shown in the screenshot below.

Implementing Javascript Promises in Cleaner Way

All the examples in this article use the syntax of promise wrapper. We used this syntax so that you can understand promises easily, but practically we can write promises in a lot of better ways. If we write promises in that approach, maintaining promises for complex tasks will be a lot easier.

Let me explain what I mean by promise wrapper. In promise wrapper, you write codes that resolve or reject a promise depending on whether a promise successfully executed or not.

Above code snippet is the example of a promise wrapper.

Following code snippet explains how you can write promises in a better way.

Try uncommenting each of the commented statements one at a time, then run the codes again. I am sure you will understand the differences pretty easily.

Writing Javascript Promises With ES6/ES2015, ES7

ES6 or ES2015 introduced "let", "const" and "fat arrow" syntax. Using that you can write promises in a better way. We can rewrite the previous example in a better way with ES6. The code snippet is shown below.

You can play around the code snippet better if you uncomment the commented lines.

ES7 introduced async and await syntax. After applying this to our ES6 code it would be easier for us to understand. Also, we don't need to use then and catch functions. For error handling you need to use try...catch syntax of javascript.

Again, to understand the code better I would advise you to uncomment commented codes one at a time. This way you will understand better.

Conclusion

I hope after reading this article you will understand javascript promises in-depth. If you find this article helpful, don't forget to share it among others. Thank you!

A Complete Guide To Passport JS Part 1

noreply@blogger.com (Nilesh Sanyal) — Sat, 24 Aug 2019 12:56:00 +0000

In simple words, passport js is a middleware for the express js framework. It allows developers to integrate different types of authentication strategies with very little amount of code. For example: developers can add various types of sign in functionality with different services like google, facebook, twitter, github etc, also developers can add their own custom strategy by authenticating users with email and password.

We can also combine all of the strategies so that users can login with any one of the selected strategies. It is much quicker to use passport js rather than building a custom authentication strategy from scratch.

When I first started working with passport js, it took me several days to fully understand the inner-workings of it. I went through the official documentation, searched for tutorials, looked in stack overflow for help, after doing all these extra work I was able to understand it.

Topics Covered In This Article

Setting up callback function for configuring passport strategy.
Importance of passport.authenticate() function in callback url.
Setting up middleware to check if a user is already logged in or not.
How serializeUser() and deserializeUser() actually works.
A sample application that will connect all these points practically that are discussed in this article.

Ok, so let's get started.

Setting up callback function for configuring passport strategy

Take a look at the code below. Here, we have required the module for passport local strategy, we added two routes; one for displaying login page and another for handling the callback url. After "/login" route is called, we request users to enter their email id and password.

If email id and password submitted by the user matches with these values, we return the email id of the user. If no match is found then we return false to indicate that authentication failed.

This is possible with the help of done() function. It is an internal passport js function that takes care of supplying user credentials after user is authenticated successfully. This function attaches the email id to the request object so that it is available on the callback url as "req.user".

It will be available for the dashboard route, where you would set the session for the user and then to another part of your web application.

Importance of passport.authenticate() function

This function is internally used by passport js to make sure that users are logged in before they are going to that url directly. It should be used in such a situation when they must be logged in order to access a protected url of the application. For example, to access dashboard page user must be logged in first.

Setting up middleware to check if a user is already logged in or not

To check if someone is logged in we need to check if req.session.user value is set. Then we need to use this function as middleware on GET route(s) that we want to grant access to only logged in users. The code for middleware is given below.

In the above code, we checked to see if the user is authenticated or not using passport js's built in isAuthenticated() function. If user is authenticated, the request continues as next() function is called. Otherwise, user is redirected to login page.

We want to allow only logged in users to visit the dashboard page, the code for doing so is given below.

In the code above, we have added the isLoggedIn() function that we created earlier to the dashboard route. It will act as a middleware to allow only logged in users to visit the dashboard page.

How serializeUser() and deserializeUser() actually works

After successful authentication, passport attaches user's email id to the req.user object. It is possible due to the existence of serializeUser() and deserializeUser() functions.

Previously, when we configured passport js by setting up the callback function, we passed the email value in done() callback function. This step was necessary, as passport needs to take the email id and store it internally in req.session.passport object which is passport's way of keeping track of things.

For accomplishing this task, serializeUser() function must be defined. The code for this function is provided below.

In the deserializeUser() function, the email id is given as the first parameter which is same email id that was passed in the serializeUser() function. Then this function makes a request to the database to find email id of the user by invoking done() function. After this step, the email id of the user is attached to the req.user object.

Finally, The Application That We Will Build

We will be building a simple web application that will explain how to work with passport local module which is a package provided by passport js itself. We won't be storing user credentials in any database. We are doing this intentionally so that you can focus on the essential concepts related to passport js. But, in real world application, a database must be used.

Note: To follow along with this tutorial, you need to download the project file.

Then make sure you have installed node js in your computer. After download is finished extract the downloaded rar file. Open terminal or command prompt in the location where you downloaded the project. Run this command "npm install", then run "npm start", open a web browser and type "http://localhost:8000/login" to run the application.

Overall Project Structure

Discussion on project structure

app.js file: The main gateway to our express js application. Here, we will set all the dependencies, all middlewares required for the application and error handling codes etc.

routes/index.js file: In this file, we are storing all the routes for our application.

views folder: It stores all the dynamic pages for our application. For generating dynamic content for our pages, we are using handlebars as the template engine. For now, it contains two pages i.e, dashboard.hbs and login.hbs.

public folder: This folder stores all the static resource files(i.e, css,js, image files etc) required by the dashboard.hbs and login.hbs pages.

package.json file: It stores various modules that are required for building the application.

Creating The Node Server

Explanation of the app.js file

In app.js, we need to store all the references to third party modules that are used for the application. Then we need to configure them accordingly. One important note I would like to mention here, if we are using express-session module in our application, then we must configure passport middleware just after express-session middleware setup.

Configuring Passport

I already explained how this configuration actually works. If you want to revisit that section, go to the heading entitled "Topics Covered In This Article".

Creating The Login Page

Creating The Dashboard Page

Conclusion

Thank you for going through this article. If you learn something new and exciting, please share this article among others.

Top Risks Of Components With Known Vulnerabilities in 2019

noreply@blogger.com (Nilesh Sanyal) — Sat, 17 Aug 2019 09:26:00 +0000

Components with known vulnerabilities is of the vulnerability in the OWASP top 10 vulnerabilities list. It holds 9th position in the OWASP list of ten most critical web application security risks.

Lots of open source plugins or components or libraries are already available on the web. Web applications make use of them a lot. By using these components, developers save some amount of development time.

Reasons Behind Components With Known Vulnerabilities

Due to the pressure of quickly delivering at speed, developers often forget to properly check these libraries. This is a common problem for some small and sometimes medium sized companies. They use PHP, Javascript, Python libraries to make their applications interactive or easy to use.

Developers generally tend to focus on securing their own code, they often don't know about all the code that is running. They forget to check issues tab of any open source project listed on GitHub. Also, they did not check if any issue status is closed or not as seen in the following screen shot.

Closed issue means that issue is fixed by one of contributors of the project.

Github issues tab

Github closed issues

No one could give any gurantee that any library of an application will be fully secure. After a library is published, security experts often found security vulnerabilities. Then they add security patches to get rid of that vulnerability. If developer fails to apply that patch the vulnerability exists.

Impacts Of Components With Known Vulnerabilities

The impact of this attack is dependent on the vulnerable library itself. This could be cross site scripting vulnerability or any other one. But, the attacker may be able to gain control of the whole system.

Recent Attacks Made Using Components With Known Vulnerability

The BlackDuck 2018 Open Source Security and Risk Analysis report states that 8% of the codebases it had audited contained Apache Struts, and that 33% of those still contained the Struts vulnerability more than a year after it was fixed.

Prevening Against This Attack

Any web application must try to use few third party libraries as possible. If more and more third party libraries are used, there are greater chance of existence of vulnerabilities in those libraries or components. The developers must remove unnecessary features along with the dependencies that are linked in that feature. If these are not removed, they may still become the reason behind security flaw.

Components or libraries from authorized sources must be used. Signed packages will allow to ensure that there exist very less chance of modified and malicious component.

Security policies must be established governing component use, such as requiring certain software development practices, passing security tests, and acceptable licenses.

Keep the components or libraries up to date.

Monitor the security of these components in public databases, project mailing lists, and security mailing lists.

Conclusion

I hope after reading this article you properly understood the problems occurred by components with known vulnerabilities. If you like this article share it with others. Thanks!

3 Challenges You Could Be Faced By Xml External Entity Injection

noreply@blogger.com (Nilesh Sanyal) — Sat, 10 Aug 2019 10:05:00 +0000

What is XML External Entity Injection?

There are many ways to store and transport data for both human readable format and machine-readable format. Web services, web or mobile applications, content management systems (CMS) uses extensible markup language(XML). It is the responsibility of the developer to properly validate the XML data that is used for input.

In simple words, XML external entity injection is an attack that is generally done to compromise the logic of an XML application. This injection attack is one vulnerability listed in OWASP top 10 vulnerabilities. If you want to know more about the other vulnerabilities, you can read about it here.

What Can Be Done With XML External Entity Injection?

Attacker can use this injection attack to cause various types of attacks, which are as follows.

Viewing files stored on the application server:

Attacker will be able to view files stored in the server if the xml parser is able to process external entities. Then the web server may return contents of a file on the system containing sensitive data.

The shocking fact is, attacker is not limited to system files. They can also steal source codes if they know the location and structure of the web application. Some xml parser may also allow attackers to send HTTP requests to files on the local network.

Performing Denial Of Service (DOS) attack:

Another name of this attack is known as Billion Laugh Attack. The attacker writes the XML document in such a way so that the XML parser continues to expand each entity within itself. This process keeps on going until it overloads the server and finally brings down it.

Performing Server-side Request Forgery attack:

In some situations, web applications need to fetch data from external resources or some resources that can be internal services. For example, if developer wants to get weather data he or she may use a third party web api such as "open weather map api".

For example, to get current weather of London with this web api, the developer can use following URL: https://samples.openweathermap.org/data/2.5/weather?q=London,uk&appid=b6907d289e10d714a6e88b30761fae22

If somehow the attacker is able to change the url parameter to localhost, then he or she will be able to view the resources that are hosted locally on the server. This would cause the web application vulnerable to server-side request forgery (SSRF).

What are different Types Of XML Injection Attacks?

There are two different types of XXE attacks, namely: in-band XXE and out-of-band XXE.

1. In-band XXE: After performing this type of XXE attack, attacker is able to get an immediate response to the XXE payload.

2. Out-of-band XXE: This type of XXE attack does not return any immediate response from the web application on which this attack is performed.

Where XML Injections are Possible In a XML Document?

In the CDATA section.
In the attributes of the nodes.
In the node values.

How To Prevent Against XML Injection Attacks

You should disable your application's xml parsing capabilities that your application don't intend to use. You should consult the documentation of your xml parsing library for details on how to disable those features. For a quick reference, you can consult this cheat sheet maintained by OWASP.

Final Words

If you find this article about XML external entity injection as helpful, please share it among others. Thank you!

Four Ways To Stop Security Misconfiguration in 2019

noreply@blogger.com (Nilesh Sanyal) — Sat, 03 Aug 2019 09:10:00 +0000

What is Security Misconfiguration Vulnerability

Security misconfiguration vulnerability is one of top 10 vulnerability of OWASP. If you missed the whole list of OWASP, you can read it here.It happens when the security settings are implemented, configured as default settings. Generally, the web application requires many different components in order to function correctly. It requires various resources that are as follows.

A web server to host the application.
An application framework to simplify management, the complexity and maintainability of the codebase.
A database for storing application specific data in either relational or non-relational way.

Also, it may require additional resources that may vary depending on the type and complexity of the web application.

Any level of an organization's application stack can become main reason to cause a configuration flaw. If more levels are involved in the stack, the greater chances are there for a mistake leading to a vulnerability.

So, security misconfiguration can happen at any level of the web application stack whether be it the framework, application server, database etc.

Security Misconfiguration With Example

As the application grows, it becomes hard to clear the issues regarding the security misconfiguration. It can occur in developer's own code, or in the preexisting features. Sometimes, developers create credentials to test the functionality of a web application. But, after test is done successfully, they often forget to remove the test accounts. The consequences of this mistake can lead to misconfiguration vulnerability. Attacker can exploit this and can cause severe damage the web application, thus affecting the financial growth of a business.

Sometimes, unused and unnecessary features can cause a lot of trouble to the application. For example, developers had enabled debugging mode during development phase. After the application goes live, they forgot to turn off this mode, this could prove fatal. The debugging mode displays a lot of internal information regarding the application. So an attacker can easily discover more vulnerabilities with the help of this information.

Other example of unused features could be the use of unused ports that are enabled during development phase. If these features are not turned off or they are poorly maintained, it enables attackers to further exploit the application by gaining more information and causing massive attacks on the application.

Another example could be such that directory traversal is not disabled on the server where the application is hosted. Attacker could exploit this feature by traversing through the files on server, then they could be able to access configuration files on the server. This allows them to gather more information and exploit the application.

What is Impact Of Security Misconfiguration

The root cause of this vulnerability can leave an application completely open to attackers. In some situations, it may leave data without any need for an attack.

One notable incident of this attack happened on October 2014. Security journalist Brian Krebs reported vulnerability in the website of MBIA Inc. Main reason of that attack was misconfigured database server. That allowed search engines to index hundreds of user account statements. Which allowed the data to be easily accessible by a simple web search.

Also, this vulnerability could result in full takeover by the attacker. That could mean sensitive data would be stolen and it would cost a lot of money to recover from such loss.

How To Prevent Security Misconfiguration

The root cause of security misconfiguration is due to human error, rather than other attack factors. If a properly maintained and well-structured development cycle is used, it will definitely help to encounter with this vulnerability. A proper process cycle should be used in order to secure and test during the development phase.
To deal with inconsistent configuration issues, you need to use the same configuration options for different phases of development (e.g, development, staging and production).
It is a good practice to perform scans and audits on a regular basis.
Plan the architecture and then setup the system in such a way so that it will be easy enough to deploy software updates and patches. Also follow good guidelines for security configurations.

If you are interested to learn more about ethical hacking, visit here.

Final Words

I hope you find this article on security misconfiguration as helpful. It would be great to share this content among the others if you think this post provides some value to you. Thank you!

7 Ways To Put An End To Sensitive Data Exposure in 2019

noreply@blogger.com (Nilesh Sanyal) — Tue, 30 Jul 2019 15:39:00 +0000

What Is Sensitive Data Exposure Vulnerability

Sensitive data exposure vulnerabilities can occur when an application does not adequately protect sensitive information. This is also known as data breach. Depending on the type of web application the data can vary and anything from credit card details, session tokens, passwords etc can be exposed.

In most data breach cases, files, documents, sensitive information are involved. At the time of building the web application, many of the web developers down prioritize protection of sensitive information. They mostly give preference to making an application that is functionally working and correct. After completely building the application, they simply forget to add protection, or they skip that step.

What are The Causes Of This Attack

Lack of implementation of input sanitization.
Missing of required browser headers while sensitive information is sent to the browser.
Implementation of faulty key management.
Implementation of outdated or obsolete cryptographic algorithms.
Sensitive data is either sent or stored in the plain text format.
This attack can be caused by external or internal manner, a dissatisfied employee could cause more threat than an outsider. As the employee is already aware of the company's internal matters and has access to company's information.

Impact Of Sensitive Data Exposure

This attack compromises user accounts and data. After the successful execution of this attack, the data is exposed to the attacker, so he or she can do whatever he or she wants to do with it.

An attacker can also apply his or her social engineering skills to lure the victim to click malicious links that may install some malware in the victim's computer.

This attack can be financially devastating to a website or business. It may cause reputation damage too. In 2019, 885 million records containing bank transaction data were compromised as a result of data breaches.

How To Prevent Sensitive Data Exposure

i) Avoid storing or transmitting data in plain text format

You should never use plain text format when storing some sensitive data like credit card numbers, password etc. You need to encrypt the data using strong algorithms, and ensure your website algorithm utilizes hashing for storing passwords.

ii) Make use of SSL Certificates

Install SSL certificate on your website, to protect the data as it transfers from your site to the server. Popular browsers like google chrome and firefox identifies sites without SSL as "insecure", so it's a good practice to put your visitors' minds at ease.

iii) Use Strong Passwords

Make sure you use passwords that are hard to guess and very strong. Also, change your passwords in a regular basis.

iv) Keep a Backup Of The Stored Data Separately From Your Website's Server

If somehow your server is breached, any data stored on your site, will be at risk. If you keep a backup of the data then if one copy of the data is compromised, the other isn't. So you can easily restore your site from a clean and secure copy.

v) Use a Web Application Firewall (WAF)

Attackers often use automated bots to launch attacks against the web site. To prevent them from doing so use WAF.

vi) Use a Vulnerability And Malware Scanner

Attackers often uses backdoor files that enables them to find and exploit sensitive data. Use malware scanner to check and remove the backdoor successfully.

vii) Never Allow Browsers To Store Sensitive Data

Make sure that browser headers do not use caching and save login or other credentials.

Final Words

I hope this article helps you to understand sensitive data exposure in depth. If you find this article as helpful, don't forget to share with others. Thank you!

The Best way To Protect Your Application Against Broken Authentication

noreply@blogger.com (Nilesh Sanyal) — Mon, 29 Jul 2019 15:33:00 +0000

Broken authentication vulnerability is one of the vulnerability listed in OWASP top 10 vulnerabilities. If you don't know about OWASP top 10 vulnerabilities, you can read it here. It exists in web application due to improper implementation of session management and authentication functions. The consequences due to this ignorance may prove to be severe.

Impact Of Broken Authentication Vulnerability

An attacker can compromise the passwords, keys, or session tokens and then eventually they can gain access any user account.
This vulnerability allows attacker to attack some or all accounts. After successful execution of this attack, attacker is able to do anything the victim is able to do.

Before we deep dive into the details on this type of vulnerability, we need to have solid understanding of 3 things in particular. These are: Session, Cookie and Authentication.

Session

So, in simple words, session is a way for the server to identify users and persist users activity across a web application. To achieve this, server maintains a storage for storing all users sessions.

When users login to their account, that time server generates a session with the help of something that is known as Session ID. This step is a must for the server, as the communication between client and server is established with the help of HTTP protocol. If you don't know what HTTP is, read more about it here.

Since, server generates a session id for the user, client (the browser) does not need to provide its information on every subsequent requests. The browser stores the session id inside a cookie. When a new request is sent to the server, the cookie acts as an authenticity on behalf of the client. When user clicks the logout link, the server terminates the user's activity and the cookie residing in the browser is deleted.

Cookie

Cookie is basically a text file that a web browser stores in the user's computer. The main purpose of a cookie is to maintain application state. Common use cases of cookies are as follows...

Keeping user's preferences within the website, so that next time the user visits in the site, he or she can see the content that he or she prefers the most.
Storing the information about the browser that is used to browse the site.
To remember user's registered login credentials.

Authentication

Authentication is process of verifying a user's identity. Generally, authentication involves checking email id and password of a user with the correct credentials. Bio metrics is a better approach to implement authentication. As it requires users to verify their identity with their biological characteristics (e.g, fingerprint or retina ).

Protect Against Broken Authentication

Avoid using URL query strings for session id or any user or session information.
Entire session should be transmitted via HTTPS to prevent disclosure of the session id.
Protect any session information transmitted to or from the client.
Implement time-out on the server or expire the session when the user is idle.
Generate random and complex session id that cannot be guessed easily.
It would be a better choice if a new session is regenerated after authentication is successful.

Conclusion

I hope after reading this article you have clear concept on broken authentication. If you find this article helpful, please share it among with the others. Thank you!

The Web Programming Basics You Must Know For Sure

noreply@blogger.com (Nilesh Sanyal) — Sat, 27 Jul 2019 10:09:00 +0000

Web programming refers to the programming that involves writing, markup and coding in order to create web pages. Typically, two different paths exist in this regard. One path is called as front-end and another as back-end.

Front-end and Back-end Programming

Front-end technology mainly deals with what is actual look and feel of the web page, it is used to create user interface of a web page, whereas back-end technology deals with functionalities of the web page.

Front-end and Back-end Programming Use cases

Let's understand front-end and back-end technology use-cases in a real world scenario. Suppose, you open facebook.com in the browser. Then what you actually see in the browser is created using front-end technology. When you try to log in to facebook by entering email address and password, then the credentials provided by you is checked against the email, password that is stored in facebook's remote server and if it is correct you are redirected to the dashboard page of facebook. This functionality is implemented with the help of back-end technology.

Most common languages used for front-end programming are as follows.

HTML
CSS
Javascript

Languages used for back-end programming are as follows.

Java
PHP
Python
Ruby

In this article, you will know each concepts that is related to web programming, after you finished reading this article, you will have a solid grasp of knowledge on web programming.

Web Application

A web application is a type of application that is capable of displaying dynamic content. The contents are dynamic as server-end generates all of the contents depending on the request made by the client end (the browser).

Ok, I got it, web application is dynamic one,right? But tell me what is a Web site?

In simple words, a web site is a collection of web pages that has static content. If a user is browsing a web site, he or she will see pages whose contents will not change based on different request made from the browser.

Introduction To Inner-workings of a Web site

Web consists of billions of clients and server connected through wires and wireless networks. Here, the client refers to any device that sends requests to the server . The server is a computer or workstation that can be located anywhere in the world . Clients send requests to web server, the server receives the request, finds the resources and sent the response back to the client. The client uses some type of application program(i.e, browser) to send request to the server. The server typically sends response to the browser with HTML(Hyper Text Markup Language). Then the browser interprets the HTML and then renders the web page. After this process is finished we are able to see the web page in browser.

Client Server Communication

Mode Of Communication Between Server and Client

Communication between server and client is established via something that is known as HTTP (Hypertext Transfer Protocol). HTTP is a protocol, protocol refers to a set of predefined rules that must be mutually accepted by both server and client in order to smoothly transmit data between them.

HTTP allows simple request and response communications between client and server.

Different Types Of HTTP Methods

There are 7 different types of HTTP methods available, but most often 2 of them are used frequently. These methods are GET and POST methods.

GET Method

This method is primarily used to fetch data from the server. If some data needs to be sent through this method, then that data needs to be encoded first in order to send them to the server.

GET is the default method when the browser tries to send data to the server and it produces a long text that is visible to the browser's address bar.

For example, when you open Google.com and type a query and hit search, you will see something similar as shown in the screenshot below.

GET Method Example

Explanation of Above Example

If you carefully observe the highlighted red rectangle, you will see &q=how+to+google. Here, &q refers to the search query. The & symbol is required as it is required to separate different query parameters used in the GET method. After you mention the search keyword in an encoded format google can understand that quiet easily. During encoding process, the blank space character is converted to '+' symbol.

POST Method

The main purpose of using this method is to request for some resource to the server. At the same time it is also capable of sending form data to the server. This method is more reliable compared to GET method as the data that you send through POST method is not visible in the browser's address bar.

Conclusion

I hope you have found this article about web programming as helpful to you. If you do so, please share it among others. As you know sharing is caring. Thank you!

Object Oriented Programming Principles You Must Know

noreply@blogger.com (Nilesh Sanyal) — Sun, 21 Jul 2019 16:15:00 +0000

The core concept behind object oriented programming is to tie together data with operations that do things with it. Main intention of doing so is to make sure that no other part of the code can access this data except the function.

Why Object Oriented Programming?

Achieving Modularity: It enables us to write programs in a modular approach. A large program is divided into several smaller programs, each of them is known as a module. By using modular programming paradigm, it enables us to write large complex programs in more maintainable smaller chunks of programs.

Reducing Code Duplication With Inheritance: It reduces code duplication by using a concept known as inheritance. Suppose, we want to represent a Car and a Racing Car with object oriented programming. Both Car and Racing Car have some similarity between them, but Racing Car may have some extra features and functionalities that the normal Car don't have. By applying inheritance, we can easily represent these type of features without code duplication.

Achieving Flexibility With Polymorphism: Let's assume, we want to add drive functionality to both Car and Racing Car. Instead of creating driveCar() and driveRacingCar() functions, we just create a drive() function and we pass a parameter representing the type of car object (it can be car or racing car) to that function. So, depending on the type of car object, the drive() function will be called accordingly at runtime.

Building Blocks Of Object Oriented Programming

Class: It is the most primary block of object oriented programming. You can think of class as a way to represent user defined data type. Class acts as a glue that keeps data members and member functions together. Class represents the blueprint of something.

Let's imagine, in the Car class, there may be different cars with different name and brands. But all of them share some common features, like all of them have four wheels, speed limit, mileage range etc. So these are the car's properties or data members. Also, car can be driven by a driver, so drive is considered to be a functionality that a car must have.Class do not occupy any memory space, but object occupies space. So, drive will be considered as a member function of Car class.

Object: After bundling the data members and member functions together, we need to create an instance of that bundle. That instance is known as object. Creating object is necessary otherwise, we won't be able to carry out different operations on the car.

Let's understand this concept practically. Imagine a car factory. We create blue print of a specific car model, then we created multiple copies of it. So, blue print is the car class itself and we create multiple copies of car class based on the blue print provided.

Core Principles Of Object Oriented Programming

Encapsulation: Encapsulation refers to hiding the internal workings of an object from outside world. Generally, data members and member functions are wrapped up together as a single unit in encapsulation.

Let's assume, a car has parking sensors installed in it. To the outside world, it will alert the driver if the car is getting too close to an obstacle, but we are not aware about the detail inner workings of it. To the external world, there is only one switch that turns this feature on or off and rest of the complexity is hidden.

Inheritance: In simple words, inheritance refers to the capability of a class to acquire some or all of the properties of another class.

For example, if we consider two classes Car and Racing car, then both of them are cars. So, Racing car will have some features and functionalities same as the Car. To reflect this type of relationship of two classes, we can use inheritance.

Polymorphism: Poly means many, phism means forms. So, polymorphism means many forms. After applying polymorphism, the function that will be invoked is determined at runtime based on the type of the object.

Let's consider a real world example, a car have gear transmission system. It has four front gears and one backward gear. When the engine is accelerated then depending upon which gear is engaged different amount of power and movement is delivered to the car.

Implementing Object Oriented Programming in PHP

Creating Class

To represent all principles that we discussed above, we need to define which data members and member functions go together by placing them inside a class.

In the above code snippet, a Car class is defined, where 3 data members and 1 member function is defined. Note, the use of $this in drive() function, it refers to the particular instance of the object that's currently being manipulated. The protected keyword acts as an access modifier that allows the data member to be accessible from within the Car class, and all the classes that inherit the Car class.

Creating Object

After the data members and member functions are defined within the class. We need to create an object of the class to execute various operations on that object.

In above code snippet, an object called brand_new_car is created and drive function is invoked on that object.

Creating Constructor

Suppose, we want to set a value to the object at the time of creation of it. Then we can do so using one of PHP's magic methods i.e, __construct.

So, we created a constructor that takes a single parameter called new_speed. Then we assigned the value to the car class's own data member (i.e, speed). Later we invoked the constructor by passing a value at the time of creating object of the car class.

Creating Static Data Members

If we want to store some data that pertains to the class rather than to any one instance of the class. Then we can use static keyword to do so.

Here, the car_bought keeps track of total number of cars bought across all car instances. This data member is a feature of the Car class itself, not any single Car object.

To access static data members, outside the class, the scope resolution operator is used with the name of the class.

To access it from within the class the scope resolution operator is prefixed with the keyword $self.

Creating Inheritance

In the above code snippet, a RacingCar class is created that inherits from the Car class. Then the constructor of the parent class (i.e, Car) is called to get the value from the parent class's constructor and pass that value to the child class as well. After that, an instance of racing car is created and a member function is called to show the extra feature that racing car already possesses. Here, Car is the parent class and RacingCar is a child or derived class.

Note: A class may be extended directly from only one class at a time in PHP.

Creating Interface

It allows a way to such that the member functions that child or derived classes must implement without providing an implementation. In other words, if we wanted the implementation will be done by the derived classes that will be responsible for implementing that interface, then we have to define an interface.

Implementing Interface

If you have decalred a Car interface, then in order to use the interface, a class must implement that interface. A class can implement the interface using the keyword implements.

Note: A class can implement more than one interface at a time in PHP.

In the above code snippet, the RacingCar class implements 2 interfaces (i.e, Car and SpeedyCar).

Creating Abstract Classes

Let's assume, you have a requirement where you want to provide part of an implementation for a class, but you do not want to allow instances of a class to be created until a more specific class extends it. To fulfill this type of requirement, you can use abstract class.

In the above code snippet, Car class is defined as an abstract class that contains an abstract function called drive. To make use of this class, you have to create a class that extends this abstract class, and then you need to create instance of the child class and invoke the method using that child class object.

Creating Final Method and Final Class

If you do not want to allow a method to be overwritten in a child or derived class, you can declare that method as a final method. If you try to call the final method in child class, PHP interpreter will display an error message.

Final Words

If you find this post about object oriented princles helpful, don't forget to share this article among others. Thank you!

Surprising Facts About Cross Site Request Forgery

noreply@blogger.com (Nilesh Sanyal) — Sun, 14 Jul 2019 14:29:00 +0000

Cross Site Request Forgery (also known as CSRF) is a web application vulnerability in which attacker's website forces victim's browser to send malicious requests to the vulnerable website in which the victim is currently authenticated.

To perform Cross Site Request Forgery attack, attacker tricks a logged-in user by using social-engineering techniques to perform some tasks on behalf of the user without their knowledge.

The vulnerable web application is unable to differentiate between a legitimate user request and requests initiated a malicious website.

Why Do We Care About Cross Site Request Forgery ?

The damage caused by a csrf attack can vary depending on the web application's functionality that is vulnerable to csrf attacks. Following are the problems that can be caused by cross site request forgery.

Impersonation and identity riding: After a csrf attack is successful, an attacker can make requests as he or she wishes to execute on behalf of the user.

Modification of account information: If any csrf vulnerability is found on account modification page, then attacker can modify account details of the user after successfully executing this attack.

Compromised admin account: If a csrf vulnerability exists in an admin account, attackers can compromise admin account.

Understanding Cross Site Request Forgery Attack

To understand csrf attack, at first we need to know the basics of how cookies and sessions work in a web application.

How cookies and sessions Work ?

Suppose, a user Jhon visits a webpage www.example.com and then he tries to login to his account in that website. After entering his credentials and pressing the login button, the server receives a login request with username / email and password from Jhon.

Then server performs verification of whether that credentials are valid or not. If it is found to be valid, then a cookie is created on the server-end along with a unique session id that is generated by the server itself. That cookie is then sent by the server to the browser that sent the request.

Next time, if the user tries to send another request to the server, then that request is sent to server with the session id, then server is able to process that request successfully.

Why a cookie needs to be created ?

Server needs to send the cookie to the browser in order to identify whether the request is coming from the same user or not. This happens, as HTTP requests are stateless in nature, that means each individual request is executed independently. Server has no idea about previous requests status, so it needs a way to keep track of the commands that were executed before; that's why to identify if the request is coming from the same user, it stores a unique session id in cookie.

So, every time the browser sends a request to a website it automatically attaches a cookie that is stored in the browser for that website. Even if the request to the website is made by another website that is loaded in the user's browser.

How Cross Site Request Forgery Actually Works?

Now, you've understood the basics behind sessions and cookies, let's discuss how csrf actually works.

The attacker creates a malicious website and then he or she uses social engineering tricks to lure the victim to visit that website. The trick could involve sending the victim an email stating that he or she won a lottery and claim the prize by clicking on a link.

When victim clicks that link, the script of that malicious gets executed and it can perform unwanted actions to the website in which he or she is currently authenticated. All of these incidents could happen without the knowledge of the user.

Example on cross site request forgery

To see CSRF in action, at first we need to create a new folder "hacker" under the root folder of our project directory. Also, we need to create some users manually in our users table. For example, I have created a user "dummyuser4". Then we need to create 3 files (e.g, config.php, index.php, delete_user.php) in hacker folder.

CSRF Config Page Codes

CSRF Index Page Codes

CSRF Delete Page Codes

We also made some changes in the dashboard page, the added codes for the dashboard page is shown below.

Dashboard Page CSRF Attack URL

Explanation of What We Did

In index.php page that is created inside hacker folder, the attacker uses jQuery library to initiate an Ajax call that will run the delete_user php script. After successfully executing the Ajax request, it displays 'success' message in the browser's console window.

The delete_user.php page get the name of the user from the current active session. Then it executes the delete query to delete that particular user from the users table.

We added an image in the dashboard page, that has a link attached to the index.php script file. So, when the victim will click on the image to claim his or her lottery prize, the CSRF would take place, in which the attack will delete a user named "dummyuser4".

Users Table Before CSRF Attack

Users Table After CSRF Attack

Preventing Cross Site Request Forgery Attack

Implementing Unique CSRF Token

The best way to prevent this attack is to use a unique token that will be auto generated by the server. The token must be generated in a random way and it should contain cryptographic value for each new request made to the server. The token should be stored in the user's session so that the server could be able to verify it.

Following youtube video explains this approach in depth.

Protecting Against XSS

If the web application is vulnerable to cross site scripting(link to my own article) (also known as xss), attack then the attacker can easily get the csrf token from the html page. So, in order to prevent csrf attack, we also need to make sure that no xss vulnerability exists in the web application.

Download the entire project by clicking below.

Final Words

If you find this post about Cross Site Request Forgery helpful, please share it among the others. Thank you!

Step By Step Guide On Cross Site Scripting

noreply@blogger.com (Nilesh Sanyal) — Wed, 03 Jul 2019 15:53:00 +0000

This post is the final part of the cross site scripting series. If you have missed the first part for some reason, you can read it here.

Important Note

Please note that, all the information provided in this article is solely meant for educational purposes only.

What We Will Be Creating

We will create two pages; a post creation and post listing page.

Screen shot of post listing page is shown below.

Screen shot of post creation page is shown below.

Post Creation Page

In order to follow along with this article, you need to create a post table in your database using php myadmin.

The table structure for the post table is as follows.

Post Table Structure

Following screen shot is the code for the db.php file that contains database connectivity codes.

Database Connectivity Codes

Download the entire project by clicking the download button below.

Explanation of posts.php:

In the posts.php file, the post title and description is saved into post table. Before saving post, we make sure that our application is safe from sql injection. In order to do so, we used mysqli_real_escape_string() function. If you don't know anything about sql injection, you can read it here.

Exploiting The Application By Stored Cross Site Scripting

We finished adding post creation functionality for this application. Let's see how to exploit this application so that when anyone visits this page, his or her session cookie will be stolen and send to the attacker.

In the screen shot below, attacker injects the javascript code in the comment box, that executes a php code via AJAX call.

Injected Cross Site Scripting Codes

We can see from the above screen shot that, after adding jquery cdn link, reference to a file known as evil.js is added. For getting this example to work successfully, you need to create a file evil.js in the js folder of the root directory of the current project.

Explanation of evil.js:

The evil.js file collects cookies that is stored in the browser, and then it sends that in getCookiedata.php file.

Explanation of getCookiedata.php:

Stolen cookie information is stored in "cookie_data.txt" file. If the code executes for the first time, then that file will be created in root directory of the application. If already this file exists, then new content will be appended to the file.

To make sure that you understand the stored xss attack, we stored the cookie_data.txt file in the root of the application. But, generally, attacker stores the information to his or her own server.

Getting Session Cookie Value

After attacker injects the javascript codes, nothing is displayed as post description in the post listing page as we can see from the screen shot below.

After XSS Injection

But, if we open the "cookie_data.txt" file, we can see the session cookie content is present there!

Session Cookie Revealed

Preventing Cross-Site Scripting Attack

We saw, how an attacker can make use of xss to steal session cookie in previous screen shot. Now, we will stop the attacker from doing that.

Make the changes in "save_post.php" file that are highlighted in red as shown below.

Preventing XSS

Explanation:

We used, htmlspecialchars() function, that will convert some special characters to HTML entities so that xss will no longer work. For example, ">" will be converted to ">".

Now, if we clear the contents of cookie_data.txt file, previous post record that stores the injected javascript code in post table and then again try to repeat what we did earlier, then see what will happen!

After pressing Save Post button, if we open the post table, we will see something similar to the screen shot below.

Post Table Data After XSS Protection

Now, if we open the "cookie_data.txt" file, we will no longer see any content inside of it. It is completely empty.

Final Words

If you find this article helpful, please share it among others.

Never Mess With Cross Site Scripting And Here'is The Reason Why

noreply@blogger.com (Nilesh Sanyal) — Mon, 01 Jul 2019 15:18:00 +0000

In a Cross-site Scripting attack, also known as xss, client-side code is injected into the output of a web page, in form of a html attribute, and executed within the user’s browser. The impact of successful exploitation varies.

Why do I care about Cross-site Scripting?

Cross-Site Scripting vulnerabilities may be utilized by an offender to accomplish an extended list of potential wicked goals, including:

Steal your session identifier so that they will impersonate you and access the online application.

Redirect you to a phishing page that gathers sensitive data.

Install malware on your pc (usually needs a zero day vulnerability for your browser and OS).

Perform tasks on your behalf (i.e. produce a brand new administrator account with the attacker's credentials).

Different Types Of Cross-site Scripting Explained

There are 3 types of xss these are as follows...

Reflected Cross-Site Scripting:

Image source: pexels

In this type of attack, a vulnerable page will be used to execute impulsive code. This type of xss doesn't persist the attack code across multiple requests.

Since an attacker has to send a user to a specially crafted link for the code to run, reflective XSS sometimes needs some social engineering to execute the attack successfully.

Real world scenario of reflected cross-site scripting:

Let's assume, Sam is an attacker, he found a refected xss vulnerability in www.site.com. Jhon is a user of this website, Sam sends a fake email to Jhon that he is the lucky winner of an Iphone and to claim it he needs to click on the link provided in the email.

Jhon clicks the link while logged into www.site.com. The script gets executed in Jhon's browser, it steals Jhon's session cookies associated to www.site.com and sends to Sam.

Using the session cookie, Sam can easily access Jhon's personal information and other data such as credit card or debit card data by compromising Jhon's account.

Stored xss:

Image source: pexels

In this type attack, malicious data supplied by the attacker will be stored in the server. It is more dangerous compared to reflected xss for following reasons.

First, a stored xss attack will be automatic. A script that visits thousands of websites, can exploit a vulnerability on every web site and drops a stored xss payload.

Second, victims don’t need to take any action apart from visiting the affected web site. Anyone that visits the affected page on the site will become a victim as a result of the stored malicious code. It happens beacuse the script will load in their browser The victims don't need to take an extra action.

Real world scenario of stored xss:

Suppose, www.techforum.com is a forum having thousands of users, users can post on different technical topics, and they can also comment on each post. Sam decides to get user credentials by exploiting the commenting functionality. He, writes few lines as comment and then crafts a malicious link that acts as a read more link.

When users of the forum reads few lines of his comments, and curious to read the rest of it, they will click on read more link. That link will activate a javascript file, that will steal users session cookies.

DOM Based xss:

Image source: pixabay

This type of attack generally involves around the DOM(Document Object Model). In other types of attacks, infected code comes from the server-end to the client-end. But, in this type of attack, javascript code is used to manipulate the DOM.

How DOM Based xss is possible ?

This is possible partially as a result of advanced javaScript-based applications take bits of information from different places and process them. Generally that process ends up in the creation of DOM objects or direct JavaScript execution within the browser.

DOM xss comprises of two facts: Source and Sink. Source is something that contains user input. Sink is known as the place where user input gets executed by the browser.

Conclusion:

In this article, I discussed in brief why you should not neglect cross site scripting. I hope, you will find this article helpful for you.

Command Injection In A Nutshell

noreply@blogger.com (Nilesh Sanyal) — Fri, 21 Jun 2019 16:36:00 +0000

Command injection is a technique used by the attacker to attack a server via it's operating system commands. This type of attack took place when the web application is utilizing system commands to provide some sort of functionality to a web application.

What Can Be Done By Using it ?

This type of attack can lead to massive damage as the attacker is able to take control of the server's operating system by executing it's system commands. Attacker can view internal configuration files of the server, can modify or even delete data, or even worse can setup a backdoor that can access server resources remotely.

Important Note

Please note that, all the information provided in this post is solely meant for educational purposes only.

Command Injection : In Action

To explain this attack, at first we will create an application, which will get the IP (Internet Protocol) address for a particular DNS (Domain Name System). As, we are using windows operating system to locally host our application, so we need to enter only windows shell commands to launch this attack. If the application is hosted on a linux server, then we are required to use linux shell commands.

Download the entire project by clicking below button

Getting List Of All Directories Of Application's Root Location

Creating A File In Application's Root Location

Verifying If File is Created Successfully Or Not

Protecting Application From Command Injection

To protect this application against this type of attacks, we will use php's built-in escapeshellcmd() function. It allows to escape special characters by a backslash.

Make the following changes in index.php file as shown in the below screen shot.

Protecting Against Command Injection

After that change, if we try to do command injection, we won't see it's effect anymore.

Proof Of Protecting Against Command Injection

Final Words

I hope you find helpful information after reading this post about command injection in detail, please share it among the others and tell us what you think in comments. Thank you!

Top Facts You Need To Know About PHP Code Injection

noreply@blogger.com (Nilesh Sanyal) — Thu, 20 Jun 2019 22:30:00 +0000

What is PHP Code Injection ?

Code injection is a technique used by attacker to inject server-side code from outside so that it can be evaluated by the corresponding server-side technology.

Code injection allows an attacker to compromise database, security, it is also possible to steal data, bypass access and authentication control. This vulnerability can be easy to find or sometimes it may be harder to find.

What Can Be Done By Code Injection ?

Code injection attacks are very serious as it leads to compromising application's data and functionality, also it can gather information about the server that is hosting the application. It is even possible to use the server as a platform to attack other systems.

Code injection capabilities are limited by the functionalities of the language used for the attack. For example, if PHP is used for this purpose, the attack has all the capabilities same as PHP.

Important Note

Please note that, all the information provided in this post is solely meant for educational purposes only.

How Does Code Injection Work ?

Generally, web applications are vulnerable to this attack when code is executed without proper input validation.

How To Use Code Injection ?

Let's see how we can use PHP code injection. For this purpose, we will create a forgot password page, that is vulnerable to code injection.

Also, we need to add Forgot password link in the login page we created previously, if you haven't gone through that post, you can read it here.

Following is the screen-shot for adding the forgot password link.

Forgot Password Added Codes

Screen shot of forgot password page.

Forgot Password Page

Getting The Complete PHP Configurations Of The Server

Getting Complete PHP Configurations Of The Server

Getting Document Root Of The Server

From the screen shot above, you can see a red rectangle area, that displays the root directory location of the server.

Next, we will look at how an attacker can use this information to create a new file in the application's root directory.

Creating a New File In The Server's Root Directory

Download the entire project by clicking below

Explanation

In the screen shot above, the attacker uses php's fwrite function to create a text file named "attacker.txt" in root location of application. The error suppression operator "@" is used to ignore error messages that might be generated while fwrite is executed.

After successful execution, you will see a text file attacker.txt is generated, similar to the screen shot shown below.

Created attacker.txt file in server's root directory

How To Prevent PHP Code Injection ?

Never use the eval() function to execute any arbitrary php code, as to keep your application safe, you should never trust the input data that is given by the user.

To protect against php code injection, we will use htmlspecialchars() function which allows to convert html characters to html entities. For example, "&" will be treated as "&". So, the code injection attack will not work anymore.

Make, following changes marked in red rectangle in forgot_password.php file as shown below in the screen shot.

Protecting Against PHP Code Injection

After making that change, if we try to do code injection, we won't see any effect of it. So we successfully, prevented that attack. You will see something like the following screen shot if you, do the same.

Protecting Against PHP Code Injection Output

Conclusion

If you like this post, please share among the others, as you know sharing is caring.

Vs Code Setup For PHP Development

noreply@blogger.com (Nilesh Sanyal) — Sat, 15 Jun 2019 09:06:00 +0000

Internet is a great resource for information, you will be able to find tons of articles online that will guide you to setup visual studio code. If you find any of them useful enough, you can skip reading this post. Otherwise, you can keep going on.

Visual Studio Code provides easier way to install plugins, so you don't have to waste your time configuring it for this purpose. You need to open extensions option after opening visual studio code which can be seen in the screen shot below.

In the search bar, type "PHP IntelliSense". Click on install button. After it finishes installation. You need to configure this plugin, so that it will be able to communicate directly with the PHP executable file. If this communication is done in a right way, then this plugin will function correctly.

Configuring PHP IntelliSense

In visual studio code, in the menu bar, go to File->Preferences->Settings. In the Settings search bar, type "PHP", you can see similar result as shown below.

Select PHP IntelliSense option, then click on Edit in Settings.json. You need to add following settings (that are marked inside red rectangle) in that file.

In the screen shot above, the third option (i.e, php.executablePath ) refers to the location where you have installed php. This may vary for different operating systems. The example shown here is meant for Windows operating system.

That's it, you have successfully configured PHP IntelliSense to speed up PHP development.

Final Words

If you find this post helpful, don't forget to share. Thank you!

SQL Injection Step By Step Part 2

noreply@blogger.com (Nilesh Sanyal) — Sat, 15 Jun 2019 05:34:00 +0000

This post is the final part of sql injection series. If you missed the first part, you can read it here.

What We Will Be Creating

We will create a post listing page, where user can search any post by entering post title or description.

Creating The Posts Table

You may wonder that how the posts are displayed in the post page. If you see the screenshot above, user is unable to create posts, as no form is provided for the them to do that.

Well, I did it intentionally, so that you can focus on learning the inner-workings of sql injection in depth.

To make the posts visible in that way, we need to create the posts table using php myadmin utility that we can use by entering this url "http://localhost/phpmyadmin/" in the browser, after we start apache server and mysql database service from the XAMPP control panel.

The table structure for the posts table is as follows.

Posts Table Structure

The data for the posts table is as follows.

Posts Table Data

Download the entire project by clicking below

Explanation of posts.php

In this page, at first we checked if the user is already logged in or not. If the user is logged in then he or she can view the posts page, otherwise he or she is redirected to the login page.

We took the search keyword from the textbox, when user submits the form, we collect the textbox content through GET request.

Then, we checked if any match is found by comparing post's title or description with the search keyword. If any match is found we display the results in a table. If no posts exist matching the exact keyword, we displayed a message "No posts found!".

If for some reason, the database is unable to process the search keyword, we displayed a sql error to the user.

Extracting The Complete Database Details

We completed the posts search functionality for this application. Let's see how to exploit this application, so that we can get the complete database details from it. For this purpose, we will be using UNION operator of MySQL database.

Basics Of UNION Operator

UNION operator is used so that we can chain together multiple results of two or more sql statements.

Each SELECT statement withing UNION, must have equal number of columns.

So, we now know, what are the basic requirements to run UNION statements successfully. Let's see how we can do that.

To do that, we need to use ORDER BY clause of MySQL. We will enter a specific ORDER BY statement in search textbox and see if any sql error is displayed. If this happens, then we will simply decrease the numeric value that we used in that ORDER BY clause.

If we saw, "No posts found!" message, then it's ok, we can check again by increasing the numeric value that we used in the ORDER BY clause. After completing this step, we can get total number of columns in the posts table.

The screen shot of first attempt is shown below.

First Attempt To Get Number Of Columns

The screen shot of final attempt is shown below.

Final Attempt To Get Number Of Columns

From the above screen shot, we saw the error message. So, we know that, the posts table contains exactly 4 columns.

Let's use this information to get a lot of information about the database that is being used in this application.

Getting MySQL Database Name

Getting Mysql Database Name

Getting MySQL Database Tables

Getting Mysql Database Tables

Getting Columns Of users Table

Getting id, username and password Columns Of users Table

Getting id, username and password columns of users Table

Preventing SQL Injection

If you want to prevent SQL Injection, then this section will help you to understand preventing SQL Injection completely. If you don't know what is sql injection, you can read it here.

In order to prevent SQL injection, you will able to get a set of practical examples, so that you won't find it difficult to understand the concept.

What We Will Do

Previously, we saw how an attacker used sql injection to bypass login, exploit the database and was able to get detail information about the database. Now, we will stop the attacker from doing that.

Protecting The Login Page

In the following screen shot, the highlighted text marked in white color, will protect all types of sql injection attacks.

Protecting Login Page From Sql Injection

After making those changes, refresh the login page, and try doing that login bypass attack again, you will see something like the screen shot shown below.

Protected Login Page From Sql Injection

Protecting The Posts Page

Simply, add marked code as shown in the screen shot below.

Protecting Posts Page From Sql Injection

After completing this step, try executing sql injection attacks that used union statement. You will see similar outcome as shown in screen shot below.

Protected Posts Page From Sql Injection

Final Words

If you find this post about learning sql injection step by step part 2 as helpful, please share it with others. Thank you!

Speed Up Web Development With Emmet For Sublime Text 3

noreply@blogger.com (Nilesh Sanyal) — Mon, 10 Jun 2019 18:01:00 +0000

You can find tons of information on the internet to set up sublime text for development. If you like to follow any of them you can skip reading this post. If you are ready, keep going on.

Install Package Control

Sublime text is able to download and use 3rd party plugins by using something known as Package Control. I found following video very useful for this purpose.

After installing package control, now you can begin searching for useful plugins and then install them one by one as per your choice.

Open search bar by pressing Ctrl + Shift + P keys combination on keyboard for windows and Cmd + Shift + P keys combination for Mac OS.

You will see something similar to this as shown below.

Type "Install Package" (without quotes) and press enter key on keyboard, you will see lot of plugins to install.

Now, install the plugins that I mentioned below.

Emmet

SublimeLinter

SublimeLinter-php

PHP Companion

PHP Completions Kit

PHPIntel

Above mentioned plugins are must to speed up PHP development. The setup process for SublimeLinter is a bit tricky, so I share this link, so that you can follow along easily.

PHP linter tool will help you by displaying PHP errors, while you are writing your code. You can install other plugins easily. It won't be that hard.

I would specially like to mention about the Emmet plugin. It will help you to write HTML and CSS code more easily and efficiently. It will also save your time a lot. Please see this cheat sheet for valid commands list for emmet. Personally I use emmet often.

Final Words

If you find this post helpful, don't forget to share. Thank you!

SQL Injection Step By Step Part 1

noreply@blogger.com (Nilesh Sanyal) — Thu, 06 Jun 2019 17:02:00 +0000

If you want to learn SQL Injection step by step, then after reading this article will help you to understand SQL Injection step by step with example completely.

In order to understand SQL injection step by step, this article provides a set of practical examples, so that you won't find it difficult to understand SQL injection step by step with example.

SQL injection is a common vulnerability of a web application. If this vulnerability is not taken care of by the web developer, then it can lead to complete disclosure of all data of the system and the list grows!

In my earlier post, I wrote about what is SQL injection, how it works and what can be done with SQL injection. If you haven't gone through that post, please read it here, and then come back.

Important Note

Please note that, all the information provided in this post is solely meant for educational purposes only.

Let's see how we can use sql injection to an application, but before that, we need to create that application from scratch.

What We Will Be Creating

We will be building a registration and login page for a web application with PHP.

Required Technical Skills

Basic knowledge on following technologies are necessary.

HTML
CSS
Jquery / Javascript
Bootstrap
PHP
SQL

Required Tools/Softwares

1) Local Web Server

It is required, as PHP is a server side scripting technology, so in order to run PHP scripts, we need a local web server, as it is very easy to use and it is completely free of cost. I will be using XAMPP as local web server.

2) Text Editor / IDE (Integrated Development Environment)

A text editor / IDE of your choice for writing your code, if you're using Sublime Text, then read here to configure sublime text for development.

If you're using Visual Studio Code, then read here to configure it for development.
I personally preferred Sublime text for a long time. But, right now, I started using Visual Studio Code, and I like pretty much everything about it.

Overall Project Structure

Discussion on project structure

.phpintel : This file is generated automatically if we use PHPIntel plugin for sublime text.
All other files having .php extensions are self explanatory. E.g, register.php contains HTML markup along-with PHP scripts required for registration etc.

css : This folder contains all the necessary css (cascading style sheet) files required for this project.

js : It contains all javascript files used in this project.

All other files having .php extensions are self explanatory. E.g, register.php contains HTML markup along-with PHP scripts required for registration etc.

Creating The Database And Users Table

Open the browser, type in "http://localhost/phpmyadmin" in url bar, then create a database as "hacking_db" and create a table as "users". If you find any difficulties doing so, you can watch the tutorial as shown below (watch till 3:50 min).

The screenshot for the structure of users table is as follows.

Users Table Structure

Download the entire project by clicking below.

Explanation Of The register.php

In register.php, user is asked to enter his or her username, password and confirm password. Then, we simply check username, password and confirm password fields can not be left empty, if any of the field is left empty then the user is informed to fill out that specific detail.

User also needs to make sure that password and confirm password fields have same values. If each field is filled out properly and the form is submitted, "User registered successfully!" message is displayed to the user.

Explanation of login.php

In login.php, user is asked to enter his or her username and password. Then that credentials are checked with the pre-existing credentials in the MySQL database. If a match is found then username is stored in the session and user is redirected to the dashboard page. If no match is found user is informed to register.

Explanation of dashboard.php

In dashboard.php, it is checked to see if the user is already logged in or not. It is done by checking if the session is not empty. But, if it is found that user is not logged in, then the user is redirected back to the login page.

Now, the remaining functionality left is the logout functionality. The code for logout is as following.

Explanation of logout.php

To implement the logout functionality, we need to start the session just like we already did that in registration and dashboard pages. Next, we need to destroy the session variable used to store the session data and finally we destroy the entire session by calling destroy function. Last but not the least, we redirect the user back to the login page.

Bypassing the Login Page

We, have completed creating the application. Now, let's see how to exploit this application by bypassing the login page and gaining access to the dashboard page.

Bypassing The Login Page

As shown in the above picture, if we type, "admin' or '1'='1';#" (without the double quotes) as username and any text in the password field, we can bypass the login screen easily.

Explanation Of How login bypass Works

In username field what we wrote goes straight to the database engine in the following format.

select * from users where username='admin' or '1'='1';# and password='1234' LIMIT 1;
Here, we wrote an expression that is always true (i.e, 1=1) and then 'or' operator is used to write that expression where either username is admin or 1=1. As, always 1=1 is true so it does not matter to the database engine if admin is not the username.
After the condition, the statement is terminated using the semicolon (;) and rest of the statement that checks for password matching is ignored as the hash symbol (#) is used.

Conclusion

If you like this post on learning sql injection step by step part 1, please comment about what you think and share it with others.

Know All About SQL Injection In Depth

noreply@blogger.com (Nilesh Sanyal) — Wed, 05 Jun 2019 06:18:00 +0000

SQL injection is a common attack technique used to attack a web application. In this post, you will know different types of SQL injection attack in depth.

After completely reading this post about SQL injection, you will have a clear concept about it in-depth.

It is an attack technique used to exploit applications by tricking a database engine in such a way so that it allows an attacker to view data that they are not normally able to retrieve. This might include data belonging to other users, or any other data that the application itself is able to access. In many cases, an attacker can modify or delete this data, causing persistent changes to the application's content or behavior.

What are different types of SQL Injection ?

Union Based

Union Based Injection

The UNION operator is used to join multiple SQL queries. An attacker can use this operator to create a query, so that the result of the new query will be joined to the result of the original query, allowing the attacker to execute multiple queries at once.

Error Based

Error Based Injection

In this injection technique, the attacker relies on error messages generated by the database server to obtain information about the structure of the database. In some cases, this attack alone is enough for an attacker to enumerate an entire database.

Blind SQL Injection

This technique is used when detailed error messages are not provided to the attacker. It is often the case, when the application displays user friendly error messages, with little or no technical error messages.

This type of injection is divided into 2 types.

Boolean Based

In this type of attack the attacker creates SQL query such that after executing the query the result returned will be either true or false. Thereafter, by examining the outcomes of the true or false values, attacker understands that the application is vulnerable to this type of attack. Then he or she uses that to further exploit the application.

For example, suppose following web page displays a post detail having id equal to 2.

http://www.example.com/post.php?id=2

If a SQL injection weakness is present, then executing following request on the web application:

http://www.example.com/post.php?id=2+and+1=1

should return the same web page as:

http://www.example.com/post.php?id=2

It happens as the SQL statement "and 1=1" is always true.

Executing the following request to a web application:

http://www.example.com/post.php?id=2+and+1=0

would return a friendly error or no page at all. This happens because the SQL statement "and 1=0" is always false.

Time Based

In this type of attack, the attacker constructs SQL query in such a way so that, if the query is successful then the database is forced to wait for some time (in seconds) before responding. If the query generates response after some time then attacker knows that the attack is successful.

For example, if following request is sent to a web application:

http://www.example.com/post.php?id=2-SLEEP(15)

And if the page is displayed after some delay, then the application is vulnerable to time based attack.

Final Words

If you like this post as helpful, please do share and comment your thoughts about it. Thank you!