Angular Development – Best Practices And Security

By  Maham Qasim

November 01, 2021 12:12 am EST

What is Angular?

Angular is a software development framework for building mobile and desktop web applications. The core product is a framework for client-side development, but it also provides tools and services related to testing, performance monitoring, etc.

Angular’s main scope is client-side development, but there are also some interesting Angular projects related to server side applications. Angular was developed by the Angular Team at Google.

From AngularJS to Angular Currently, the most popular version from the Angular family is 1.x or just “Angular”.

Why Should You Use Angular + Scaffolding?

If you can program in HTML and CSS, then you already have enough skills to build an app! All you need is the scaffolding that will help you structure your app correctly and generate most of the code while following best practices.

Angular is a framework that helps us deal with complex tasks. It uses concepts such as Dependency Injection, which enables you to write less code by using dependencies in your classes instead of writing them all over again.

Why Should You Care About Security?

Security is consistently on every news site – be it Facebook, Github, or some other colossal network that breaks into millions of users’ private information. So why not learn how to protect yourself and others?

How To Protect Your Validations?

You can use HttpOnly Cookies and Secure Cookies for protection against XSS (Cross-Site Scripting) attacks. Cookies are sent back with every request, including any AJAX requests, which means no user input data is ever written in the response. This protects you against XSS because it limits what a malicious website can do to attack your app. 

How To Protect Your Forms?

You encode your data for every form you create, either using angular/material or vanilla HTML. Encoding is a process of encoding user input into unreadable format, for example converting GET parameter ‘name=john’ to ‘_0xF1D43Cx3BgQAA’. There are two types of encoding: URL-encoded and Multipart. It is used to send files through forms, but URL-encoded is a better choice as it’s the most common way of encoding data.

ANGULAR BEST PRACTICES

  1. Please keep it clean.

Minimize the use of global variables and functions exposed by your application, especially when using 3rd party libraries such as angular-resource.

  1. Keep it modular and componentized.

Keep components for each view separate in their own module, make sure to use unique namespaces so they don’t overlap accidentally, use http://plnkr.co/ for demo purposes keep your JS modules in a separate file. DO NOT FORGET to include the.component() directive in your component’s HTML template.

  1. Perform logic in the controller.

Try and keep all logic out of the view as much as possible and put it in the controller. Avoid having function calls from within an Angular template (.html) file because that is a security hole.

If you find yourself calling a function from your view, such as when passing data back to parent views, use $invoke or $sce or $root instead of $applyHttpRequestAsync 

  1. Use four-digit PIN codes for authentication.

When building an app where users can log in to their account, make sure to put an excellent UNIQUE password policy in place by enforcing a four-digit PIN code. This will keep your users’ accounts secure and less likely to be hacked. 

  1. Manage your ‘$rootScope’ scopes with care

Angular.$rootScope is very powerful and gives you full access to the entire application, which is excellent for many reasons. However, it’s effortless to lose track of what kind of scope you’re using and possibly override or tamper with a configuration meant for another user

  1. Use ngAnimate sparingly

Avoid animation controllers/directives going deep down the DOM tree. If using ngAnimate, make sure to turn it off on sensitive pages containing forms such as those with password fields, credit card fields, etc.

  1. Make use of Angular’s built-in security features.

Angular comes with a lot of built-in security features right out of the box, so make use of them where possible! For example: $sce filters for input, $sceDelegate for secrets and view data and the built-in $http interceptor.

  1. Use SSl/HTTPS

Always use SSL/HTTPS for all your servers and never have a text box or anything sensitive on an HTTP:// page (unless you are 100% sure it’s not going to be hacked!)

Conclusion:

AngularJS is a great platform to build on. It’s easy to learn, powerful and robust! The risk is real today when building public-facing web applications. You cannot just build an app and expect no one will try to hack it or get hacked by someone else! 

That’s why having security in place from the beginning is key and never stop hardening your code! A little extra effort now can keep months’ worth of headaches away down the road, even years if you’re lucky!!


Maham Qasim

Maham is a copywriter and content creator who's always been drawn to the idea that there's more than one way of getting things done. Her writing career can be thought of as just another side hustle for her; when she isn't crafting content or reading Oscar Wilde, Maham often strategizes about how best to reach out with an engaging voice in this ever changing marketplace!

More like this