Web Application Security Best Practices

Is Web development only writing codes that work and run successfully? Not true.
It is also about writing code that is secure and safe from vulnerabilities.
A number of common vulnerabilities are coming in web applications. Some of those are because of bad coding practices, irregularities in patching updates, misconfiguration of servers, and authentication failure.

✋ Best Practices for Making Angular Applications More Secure

💡 Preventing Cross-Site Scripting (XSS)

When attackers try to insert or inject malicious code into web pages through input fields or using DOM references is called Cross-Site Scripting.
Angular uses DomSanitizer to prevent XSS. We can trust values by using the DomSanitizer API and call one of the following methods.

If somewhere on the web page, we have to show an outside URL, then we can also do sanitize this URL to make it safe for application.
Call these safe methods if going to use Iframe in the application.

• bypassSecurityTrustHtml
• bypassSecurityTrustScript
• bypassSecurityTrustStyle
• bypassSecurityTrustUrl
• bypassSecurityTrustResourceUrl

import { DomSanitizer } from "@angular/platform-browser";

 constructor(private sanitizer: DomSanitizer) {
   this.untrustedUrl = 'javascript:alert("Untrusted URL")';   
   this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.untrustedUrl);

  }

💡 Cross-Site Script Inclusion (XSSI)

In this vulnerability, attackers try to override native JavaScript objects using old browsers and include an API URL using a script tag.
This attack becomes successful only if the JSON has executable JavaScript code.
Angular provides HttpClient API that automatically converts brackets, parentheses, special chars of JSON into String to prevent this attack.

💡 Regular Angular Updates

The Angular team publishes releases at frequent intervals with new feature developments, bug and vulnerability fixes, security patches, etc. It is strongly suggested to keep Angular libraries updated to stay in sync with the latest available developments.

💡 Import only Safe Dependencies

Recommended – downloading libraries from a repository like npm or GitHub. Use updated versions of libraries and avoid obsolete packages.

💡 Authentication in Angular using JSON Web Tokens

If you’re going to implement authentication in Angular, the best way is to use a JWT-based authentication system.
Read here more:
https://medium.com/grapecity/a-guide-to-angular-security-and-authentication-with-json-web-tokens-42789f1de1e0

💡 Content Security Policy

Configure your web server with correct settings to return the correct Content-Security-Policy HTTP header to enable CSP.

💡 Avoid Direct Use of the DOM APIs

We all used ElementRef somewhere in our application sure but this API is marked as a security risk by Angular documentation. This API grants attackers direct access to the DOM on your pages and makes your apps vulnerable to XSS.
We should avoid fetching any DOM element by direct access and should use Angular templates or data binding capabilities.

💡 Cross-Site Request Forgery (XSRF)

In this attack, unauthorized commands are sent from an outside web application that is trusted by a user to your web page.
XSRF, also known as ‘one-click attack’ or ‘session riding’.

We have seen many advertisements link on websites and when click, it takes us to their page, so it could be unsafe if that is a fake link and try to access your authorization or session in any way. So that is called Cross-Site Request Forgery.
Angular Framework is already build up with techniques and Set of rules to prevent such types of threats.

💡 AOT Compiler – More Safe and Trusted Compiler – Offline Template Compiler

AOT is a safe compiler because it compiles all codes during its build time on the server itself. In JIT attackers try to hack code during run time.

Template injection is another form of inserting vulnerable scripts into our webpages. An attacker may be able to perform something malicious if they’re able to parse an unintended value into the template.
An offline template compiler helps us prevent an entire class and boosts the performance of the application.

💡 Don’t Customize Angular Files

Angular frequent releases always contain bug fixes and security patches. You will find it difficult to upgrade to later versions of Angular and may miss out on critical security fixes and features If you customize angular files.

************************

Let’s Cover more Web Application Security Best Practices that should use for all applications with Angular as well.

💡 Follow Secure Coding Practices

It is very important, for every web developer to think about Secure Coding guidelines. With the development and quick delivery of the project, we should also simultaneously include security features and checks like authentication, password management, access control, communication security and data security, guards, etc.

💡 Grant Minimum Permissions

We should limit the permissions and access granted to critical data to everyone. We can grant permissions on role-based. It is also an important part of securing applications.

💡 Input Validation

Validation is an essential part of the application to secure forms and only properly-formatted data can pass through the web app workflow.
But Developers should ensure that validation rules of inputs apply on both the client and server sides.
Some suspicious fields like the email fields or URL field may contain a SQL injection attack. That’s why we need to use methods such as encoding and escaping.

💡 Automate Security Functions

With automation testing and performance testing, we can include automated security process checks for vulnerability against cyber-attacks at every development stage completed.

💡 Stability Test with mock data

A very good step that any organization can take towards ensuring web application security, is to practice the art of creating mock data.
They can create bug full mock data, incorrect mock data and can test application in each aspect and also debug if any vulnerabilities come.

💡 Properly configured webserver

With the application development process, think about securing each and every network component itself.
Misconfigurations of the server are one of the topmost Vulnerabilities as per OWASP.

💡 Use Encrption In data

Encrption is also a useful technique to secure data. Organizations should implement data transfer by the usage of the most secured protocol system like HTTPS or Hypertext Transfer Protocol Secure. There are many more ways available to encrypt data at a higher level.

💡 Securing Cookies

Cookies are used to store different types of user-session information. Cookies provide two flags HttpOnly and secure.
By default these are false so they must be explicitly set to true. The cookie will only be sent via HTTPS when a secure flag is used.
Therefore, the Attacker or any JavaScript suspicious code will not be able to read the cookie when using the HttpOnly flag. So it’s going to prevent XSS attacks.

💡 Traffic analysis

Traffic inspection can be done by setting up firewalls and with some design methods and with the help of a network team. Traffic analysis is important that comes to the application server every day. If identify any suspicious traffic and block it immediately.

💡 Use SSL (HTTPS) Encryption

Secure Sockets Layer (SSL) is a technology used to establish a secure connection between a web server and a Browser. This ensures that the information transmitted between the browser and the webserver remains private.

💡 Multi-factor Authentication:

Broken Authentication is ranked 2nd in the OWASP Top Ten. So as developers, we need to take strong steps to prevent this.
single-factor authentication is not enough for more secure data for applications like finance or banking domains. So always use multi-factor authentication when developing a web app.

✔ Two-step verification or two-step authentication is a method of confirming a user’s claimed identity by utilizing something they know (password) and a second factor other than something they have or something they are.

Many multi-factor authentication vendors offer mobile phone-based authentication. Some methods include push-based authentication, QR code-based authentication, one-time password authentication (event-based and time-based), and SMS-based verification.

✋ Most used Authentication method in Web Apps

When managing user authentication and authorization between client and server, or server to server, a preferred option is a token-based authentication.
✔ In Token-based authentication the server does not keep records about the user logged in, that’s why it is called stateless.
The main advantage of token-based authentication is client-side and server-side are decoupled for the authentication mechanism which can provide an uninterrupted workflow. No session information stored in a database.

✔ The second is Cookie-based authentication and this is considered as stateful authentication. A session is stored on the client-side and server-side both. The server keeps and maintains active session details and Client manager cookie to hold session identifier.

For more details read here –
https://medium.com/@pavithraranathunga/the-most-common authentication-methods-in-web-application-development-35845ecb1da0

✋ One more Secure Technique – Main Authorization Types

There are three main Authorization approach are used –

💡 ‘Role-Based’ Authorization

In this authorization, access within the application is defined by using roles. This access could be to pages, components, functionality, or data within the application.
Roles are like Superadmin, admin, User, Manager, Subscriber. Anonymous User etc.

💡 ‘Action-Based’ Authorization

In this approach, we’re claiming that a user can take actions like ‘canEdit’, ‘canUpdate’, ‘canDelete’ etc.
These are also called claim-based authorization.
User is allowed to do the specific operation or action on the page or not is determined with this.

💡 ‘Attribute-Based’ Authorization

With the big application, we can use attribute-based authorization approach.
A policy is created to determine what authorization a user has within an application based on some conditions or rules.
These Set of Rules like Transaction is not allowed after 7 PM. Booking Ticket is not allowed after 9 PM. Can not perform such operation on weekends.
This authorization is required only for some big businesses where such restrictions are necessary.

*************************

✋ The OWASP Security

Developers are not security experts, which is why compilations such as the Open Web Application Security Project (OWASP) Top Ten list is here to help them.
https://owasp.org/www-project-top-ten/

✔ As per OWASP – Most Common Vulnerabilities —

1. Security Misconfigurations – Security misconfiguration is the most commonly seen issue. This happens because of insecure default configurations, incomplete or ad hoc configurations, open cloud storage, misconfigured HTTP headers, and verbose error messages containing sensitive information.
   
2. Cross-Site Scripting XSS – XSS allows attackers to execute scripts in the user’s browser which can hijack user sessions, deface websites, or redirect the user to malicious sites. Attackers pass untrusted data by using browser APIs, unvalidated javascript code, or by an HTML element.
   
3. Broken Authentication – Breaking passwords, keys, or session tokens, accessing users’ identities temporarily or permanently.
   
4. Broken Access Control – Try to access unauthorized functionality and/or data, such as access to other users’ accounts, view sensitive files, modify other users’ data, change access rights, etc.
   
5. Injection – Injection flaws, such as SQL, NoSQL, OS, and LDAP injection, occur when untrusted data is sent to an interpreter as part of a command or query.

Web Application Security Best Practices

What’s new in Angular 9 | Top updates in Angular 9 By JS mount

Tips to Boost Angular App Performance | Web page Speed Optimization

VS Code Useful Extensions for Web Development

Web Application Security Best Practices