What is MEAN stack?

What is MEAN stack

 MEAN stands for Mongo,Express,Angular,and Node. In software developing there are two main category parts Front End and Back End that is  depend on Client side and Server side. MEAN stack has all the technologies for develop both server side and client side.

• MongoDB - Mongo is not like traditional database. The nosql term comes from Mongodb. It has dynamic schema and much more better and faster for some applications. Most of the real world applications like Dolby,e-bay,Linkedin are using Mongodb. Developers who familier with Javascript and Json are using Mongodb.                                                                                  
• Issues found when installing the Mongodb software.                                                                      After download and install the Mongodb to pc and try to run our mongo server using the command "mongod" in command prompt. It shows an error "The program can't start because api-ms-win-crt-runtime-l1-1-0.dll is missing from your computer.Try reinstalling the program to fix this problem." 
• How to fix?                                                                                                                                       First of all check under Program files and features if there is C++ 2015 Redistributable software exist or not. If it is their uninstall it. Then check the windows update. If it is out of date update it and resart the computer. Then reinstall the C++ 2015 Redistributable again. Then try to run the command mongod for run our mongo server. It worked.

Express JS

Express.Js is a Node.js platform. Most of the time JavaScript can be used inside the web browsers. But the Node.js is a platform that allows JavaScript to be used outside the web browsers. We can create the server and server side code for an application using JavaScript. Express.js helps to organize our application routing and use any templating solution with minimal effort.

How to install expressjs to your project.

1. Install the node.js to your pc first.

2.Create a directory for create your application.

3.Open the command prompt their inside the directory and type “npm init”

4.Then it will create packege.json file for your application.

5. Now type “npm install express –save” and hit enter.

6. Then it will save in the  dependencies list

Angular JS

Angular is a front end JavaScript framework. We can create dynamic web application to run on the web browser. It is more suitable for single page applications.The other main thing is the AngularJS is extend from HTML. There for we can get all the behaviors of HTML when we using Angular as well. This extend is happen by through ng-directives. There are three main directives.
1. ng-app
               When we use ng-app inside the HTML page, it tells it defines an AngularJS application.
2. ng-model
                HTML controllers such as selections,text areas, inputs are binds to application data using ng-model.
3. ng-route
                ng-bind will binds the application data to HTML view.

There are more AngularJS directives.
ex:-ng-init, ng-repeat

Accessing Google Drive API Using OAuth 2.0

Accessing Google Drive API Using OAuth 2.0 + JavaScript + NodeJS

Previously, I explained two ways of protecting a web application from CSRF attacks. In this blog post, I will explain about another authorization mechanism called OAuth. OAuth stands for Open Authorization Protocol. The latest version of this protocol is 2.0. OAuth 2.0 provides users with the ability to grant third-party access to web resources without sharing a password.

OAuth 2.0 - What is it?

OAuth acts as an intermediary on behalf of the end user, providing the service with an access token that authorizes specific account information to be shared. Let’s take a simple real-world scenario. When we apply for a bank loan, the bank requires one or more guarantors to guarantee us.

The reason for that is, even though we want the loan the bank doesn’t know us. So the bank wants someone to recommend me to the bank as a trusted person. The person or the people who recommend us to the bank is/are called the guarantor/guarantors.

Before diving deeper into OAuth 2.0, it is important to understand what the following keywords mean.

Authentication — validating if the person is who he says he is.

Authorization — what actions a person is allowed to perform when he/she has been authenticated.

OAuth 2.0 provides,

• Federated Identity — Allowing users to log in to an application with another account.
• Delegated Authority — Allowing another service to access resources on another service on behalf of the user.

The same scenario happens in OAuth as well.

The Flow

Before OAuth 2.0, if an application wants to access your data from another application, you have to provide your account credentials, from which the data is to be accessed, to the application who wants to access the data. For example, if an application wants to suggest you your friends from Facebook you will have to provide your credentials of Facebook and then the said application will impersonate you and handle your Facebook account. Not to forget, this gives them full control of the account. That application may even store your credentials. In a time where data security is crucial, we cannot simply trust the applications. Therefore they needed a protocol to do this without compromising user’s data safety.

OAuth 2.0 overcomes this. If an application, let's say its called ‘Sample App’, wants to access your friend list, Sample App will ask if you can permit them to access your Facebook friend list. If you grant permission, you will be redirected to a page prompt by Facebook informing you that Sample App wants to access your friend list and asking you if you would want to give your consent to do so. If you allow, Facebook will provide the relevant details to ‘Sample App’. This is how OAuth 2.0 works very briefly.

Following are the main roles in an OAuth flow.

1. Resource Owner: User who authorizes the third-party application to access their account.
2. Resource Server: Hosts the user accounts 
3. Authorization Server: Verifies the identity of the user and issues the access token to the application.
4. Client Application: The application that needs to access the user's resources on resource server.

There are four grant types that OAuth 2.0 supports. They are, 

1. Authorization Code: Used with server-side applications
2. Implicit: Used with mobile or web applications 
3. Resource Owner Password Credentials: Used with trusted applications, such as those owned by the service itself
4. Client Credentials: Used with application API access. 

I’m going to access some data from an API, but it’s another party which authorizes me to the API to access the needed data.

                                         The flow of OAuth 2.0 process

Working Application

The source code for the application is available at GitHub.

How Does This Work?

Sign in by clicking on the ‘Sign In’ button

Sign in by clicking on the ‘Sign In’ button

Proceed further by entering your username and password

After the access is revoked the app will fetch all the necessary information from Google Drive API

Note: If you are already signed in and have a valid Google session on your browser, you will not be redirected to Google Sign In page.

Double Submit Cookies Pattern

Securing Your PHP Web Application Using Double Submit Cookies Pattern

 

In the last article, I discussed CSRF attacks and protecting a web application from CSRF attacks using Synchronizer Token Pattern.

 

I use this post to describe Double Submit Cookies Pattern. It is another way of protecting a web application from CSRF Attacks. The Double Submit Cookie Pattern also known as the Stateless CSRF Defense and you can go through this blog and get a clear idea about what is this Double Submit Cookie Pattern and how it works. 

 

Double Submit Cookies against Synchronizer Tokens

Both of these methods use a CSRF token and Session ID to validate a session. As discussed previously Synchronizer Token pattern, the server will store the CSRF tokens against the session IDs. 

In Synchronizer token pattern, both are saved in server-side storage, but in Double Submit Cookies pattern, they are stored in the browser as browser cookies. This is the main difference between these two approaches.In Double Submit Cookie Pattern, the server will not store the tokens, hence called Stateless CSRF Defense.

Double Submit Cookies Pattern - how does it work?

                      

                                                             Image – google.com

Upon login, a session identifier will be generated and set as a cookie in the browser. At the same time, the CSRF token for the session will be generated and set as a cookie in the browser.

                                                    Code to generate the Session ID and the CSRF token

After a successful login, it will redirect you to another page which consists of a user update form.

When the form is submitted to the action the CSRF token cookie will be submitted and also in the form body the CSRF token value will be submitted.

In the web page that accepts the form submission (the URL of the action), the CSRF token received in the cookie and the message body will be obtained. Then the two values received will be compared and if they match, a success message will be shown. If not an error message will be shown.

                                                 

                                               

        Matching the two values

Working Example

To demonstrate how the above theory works in real life, I have implemented a sample web application using PHP with bootstrap front end development.This sample contains a monolithic web application which has a front end with few HTML pages and PHP back end to process the incoming requests. 
The source code is available at GitHub. The same flow is there as the previous application in synchronizer token pattern.

                            

                                                                       Step - 01

                           

                                                                    Step - 02

The CSRF token is set as a cookie and sent unlike in the Synchronizer pattern because this value is not persisted in the server. But cookies cannot be manipulated by any third party. A client-side script will retrieve this value and inject it to a hidden field on the form loading to be submitted along with the form.

                                 

                                                                       Step - 03

                           

                                                                       Step - 04

 

Synchronizer Token Pattern

Securing Your PHP Web Application Using Synchronizer Token Pattern

There are a lot of security vulnerabilities in web applications. SQL injections, Cross Site Scripting (XSS), Broken Authentication and Session Management are a few to be mentioned. In this blog post, I’m going to explain about the Cross-Site Request Forgy (CSRF) attacking and about securing a PHP web app from CSRF attacks.

CSRF Attack - What is it?

Almost all of the web applications use client-server architecture to communicate between the client (front-end) and the server (back-end). This process happens in the form of network / API calls or requests. For example, imagine a banking application where you can transfer money from your account to another. When the request is made by clicking the transfer button after entering the necessary details, the client application will send this request to the server to perform the transaction.

Here is where a CSRF attack can take place. Simply what happens in a CSRF attack is, a similar unauthorized request is sent from the client application to the server without the knowledge of the user. There are a lot of ways to do CSRF attacks. You can get a good idea about them here from Wikipedia.

CSRF Attack

                                

                                              Image – google.com

Synchronizer token pattern is one of the many ways to protect a web app from CSRF attacks. Here I will explain about Synchronizer Token Pattern and how to implement this using PHP.

For a better understanding, you should have some preliminary knowledge of cookies and how they work. If not please get some knowledge by referring MDN site.

Synchronizer Tokens - How Do They Work?

                        

                                                                                    Image – google.com

I have built a simple web application to demonstrate how synchronizer tokens work. Upon successful login, a user can post something including first name and last name.

If the server validates the user credentials on login, the server generates a session ID and a CSRF token for the session. The generated session ID is set as a browser cookie.

                                                           Code to generate the Session ID and the CSRF token.

When the user enters the data and submits the form, the Cookie with Session ID and CSRF token is sent to the server. This is done using a hidden input field. The server validates the Session ID and CSRF token and updates the data.

                                                       The hidden field which sends the token to the server.

Working Application

The source code is available at GitHub.

                                  

                                                                                                    Login Screen

                                 

                                                                                            Update User Form

                              

                 User update success