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

Security is the biggest concern while building web applications. Most of the web applications handle a lot of sensitive data and it is necessary to provide adequate security to protect this data from perpetrators. This series of articles discuss various security issues, types of attacks and guidelines to be followed for building a  secure application.



The basic security features that should be implemented in every web application front-end are as follows.

Request Method – All sensitive data should be sent to the server via a POST request only.

All form submissions should be via POST method. GET method sends the data to the server in the URL whereas the POST method sends the data in the body of the request. Thus sending the form submission data via the POST method makes the data less exposed.GET method should be used to fetch data only. While doing data pagination, the page number or limit can be sent to the server via GET request. Sensitive data should only be sent via a POST request. Examples for sensitive data are passwords, usernames, customer details, OTP, Bank account numbers, etc.

Validations must be performed on every input

Validations – Validations should be ensured on all inputs from the front-end

All input fields in a form should be validated for the following conditions. Validations should be also performed on any  independent input fields that are present in the front-end that sends some kind of data to back-end

1 Type of data that can be entered into the input field (Text/Number/Date…)

2 The length of the data that can be entered into the input field.In the case of a string the length of the string and in the case of number min and max value of the number. If any specific pattern is expected, use regular expressions to match the input.

All the validations performed in the Front-end should be repeated in the Back-end. Front-end validations just provide an additional layer of protection, better user experience, and prevent unnecessary hits to the Server from the front-end with invalid/insecure data. To make the server safe from insecure/invalid data, validations should be repeated in the Back-end too.


SQL injection, Command Injection attacks, and prevention

Validating and sanitizing the input will help in providing a Front-end layer security in preventing attacks like SQL injection, Command Injection. An SQL injection is a type of attack in which the user gives SQL inputs in input fields which in turn results in a database operation. Validating the input to check the presence of SQL Injection characters in the Back-end also necessary to completely prevent this kind of attack. Command injection is the type of injection in which a perpetrator sends OS commands to the host operating system like Linux or Windows.

Angular provides support for form validation(FormControl), using which the input field can be validated to prevent these vulnerabilities. Regular expressions are used to match input to be in a particular pattern.


Distributed denial of service(DDOS) attack and prevention using a CAPTCHA

CAPTCHA- If a perpetrator tries to attack a system with automated bots by accessing the application continuously, then the application becomes unavailable for genuine users. This kind of attack is called a Distributed denial of service(DDOS) attack. This kind of attack increases the load on the server and should be prevented. The best way to prevent a DOS attack is by using captcha. If more and more hits come from the same source or some suspicious activity is encountered from a source a CAPTCHA can be used to identify whether a genuine user, not a bot is behind this.


Cross-site scripting(XSS) and prevention

Cross-site scripting or XSS is a type of attack in which the attacker inputs a malicious script into the web application which in turn gets to run in the browser of other legitimate users when they access the web application. The other users’ browser has no idea the script cannot be trusted because it is something served to the Front-end from the Back-End. The script which is injected might contain code to get sensitive data contained in the browser like the session token or access token…
Example: Consider an advertisement posting website which lets a user post ads and view ads If the advertisement posting field support script tags and the server does not filter it, a perpetrator can put malicious code which can get the users’ session token in to the advertisement input field When another legitimate user from different location views this advertisement, the script will get the session token of that user
This kind of attack is called a cross-site scripting attack.




Cross-site scripting security model (Angular)

Angular sanitizes and escapes untrusted values. According to angular documentation, Angular defines the following security contexts:
HTML is used when interpreting a value as HTML, for example, when binding using inner HTML.

Style is used when binding CSS into the style property.

URL is used for URL properties, such as <a href>.

Resource URL is a URL that will be loaded and executed as code.


HTTP level vulnerabilities and avoiding them

CSRF and XSSI are HTTP level vulnerability attacks which should be prevented by configuring the server. CSRF is a type of vulnerability in which a server will accept requests from a Front-end with a different origin. Ideally, it should allow requests only from allowed origins. See the below diagram for better understanding.

The above scenario must not occur.
To verify whether the request is from the same origin/allowed origin, a token is set in the cookie and send to the client by the server. Subsequently, the client will send this cookie with every request and is verified at the server level. Please note that cookies follow the same-origin policy(same port, domain, and protocol). Front-end and backend both should co-ordinate to avoid the CORS level vulnerability attack and provide security.
The Angular module HtppClient supports this implementation for the client-side . For more information regarding this read, the  Angular official documentation https://angular.io/guide/.Cross-Site Script Inclusion (XSSI) is, if a Web Application application includes a script from another source/application then that script runs in the loaded application context, not in the parent context. So any data in that script will be insecure. Angular handles this by default. Read more about it here  https://angular.io/guide/security

We will see more on the security aspects in the next part of this tutorial. Contribute to the article by sharing your knowledge about the topic, in the comment section below.

One Comment

  • arun kr November 1, 2019 at 9:43 am

    simple understand tutorial, thankz .

Leave a Reply

Your email address will not be published. Required fields are marked *