Top 7 Common Frontend Security Attacks

If you’re building web apps, you should not only focus on building your app, but securing it as well.

In fact, there are over 2,200 cyber-attacks that occur per day as a result of poorly designed web applications.

So, it’s important that you understand the different types of attacks that can happen in your web apps and how you can mitigate them.

1. Cross-Site Scripting (XSS)

One of the most common attacks you might come across is the cross-site scripting (XSS). In an XSS attack, the attacker injects malicious client-side scripts into trusted websites, which are then executed in the user’s browser.

What Causes an XSS Attack?

One of the leading causes in an XSS attack is poor sanitization of user-generated inputs before you render them on a page. For example, an attacker might be able to inject malicious code using JavaScript and it can get executed when your app renders the DOM.

This malicious code could end up accessing and stealing the user session tokens, cookies, and other sensitive information stored within the browser.

How Can You Prevent an XSS Attack?

To mitigate an cross-site scripting is not difficult. Ensure that validation is at your heart!

Ensure that you validate and sanitize forms, input fields that allow users to insert data and encode outputs where necessary. Additionally, consider implementing a Content Security Policy (CSP) to restrict resources and scripts that are loaded. Or, simply use a framework like Angular, Vue, and React that has built-in preventive mechanisms against cross-site scripting attacks.

2. SQL Injections

An SQL Injection is a deadly attack that’s been in existence for quite a while. An attack manipulates the database queries to gain unauthorized database access to perform malicious activities like corrupting databases or stealing sensitive data.

Simply put, an SQL Injection lets attackers execute SQL Queries from your frontend. This can lead to distructive actions where they drop your database!

For example, the attack on the Estonian Central Health Database in 2020 resulting in the compromise of the health records of almost every Estonian citizen is a distressing example of an occurrence of a massive SQL Injection in recent years.

How Can You Prevent an SQL Injection?

Preventing an SQL injection is a two part strategy:

1. First, you need to ensure that your frontend input fields are rightfully validated and sanitized. You need to prevent users from inserting malicious code in your fields.
2. After you’ve validated your frontend, it’s also important to sanitize the payloads you receive in your backend. Don’t trust your payloads as anyone can get your API endpoints and start sending malicious input. So, ensure that you sanitize your backend payloads as well. Additionally, utilize tools like Burp Scanner , sqlmap , jSQL Injection , and Invicti to detect potential SQL attacks and related vulnerabilities in your applications.

3. Cross Site Request Forgery

Cross-Site Request Forgery (CSRF) is a frontend security attack that deceives authenticated users on a specific application into performing a request they do not wish to.

This can be a disguised form, link, or a button, that changes the user credentials, erases or manipulates sensitive data, or transfers funds unintentionally from the user’s bank accounts upon making the request.

How Can You Prevent a CSRF Attack?

One of the most simplest ways of preventing a CSRF attack is to use CSRF tokens that are generated from the server. You can share these tokens with your client so that your backend can check for the token in every request it recieves and validate it for authenticity. So, if the client fails to provide the accurate token, your server can reject the requested action.

Additionally, leverage frameworks like .NET, Joomla, Spring (Spring Security), and Ruby on Rails have in-built CSRF support to prevent such attacks.

4. A Man-in-the-Middle Attack

Man-in-the-Middle (MitM) Attacks enforce the attacker to intercept and manipulate the information that is being transmitted between two parties.

For example, an attacker can intercept your connection to Facebook.com and steal your credentials and then forward you back to the Facebook.

These attacks occur when an attacker exploits an insecure communication channel (often through public WiFi). A victim of this attack doesn’t feel that they are being attacked as they assume that they are holding a perfectly normal and secure conversation with the server when the information they are sharing is being spied upon or altered along the way.

How Can You Prevent a Man-in-the-Middle Attack?

1. Use a secure internet connection and log out of apps you no longer use.
2. Don’t connect to networks that you don’t know. For example, don’t connect onto a free WiFi that’s available in your café.
3. Use secure communication protocols such as HTTPS and TLS to encrypt all data in transit.

5. Clickjack

ng

Clickjacking (A.K.A — UI Redress Attack) is a deceptive mechanism that tricks the users into clicking something entirely different from what they believe it to be.

It overlays hidden elements on top of the legitimate clickable components on a website. In such an instance, the users are actually clicking on an unintended element that could trigger unexpected actions like fund transfers without their consent.

How Can You Prevent a Clickjacking Attack?

One mechanism to use in order to mitigate the potential risk of a clickjacking attack is using X-Frame-Options header, that can assure that your website is not embedded into other sites or IFrames.

6. Security Misconfiguratio

Attacks

Security misconfiguration issues of applications can often arise from improper setup, defaults, and outdated configurations that could lead to a vulnerability that cyber criminals can actively exploit.

For instance, there can be cases where the directory listing is enabled potentially disclosing sensitive information, passwords and keys are not updated and kept as the default values, and exposed error-handling information.

How Can You Prevent Security Misconfiguration Issues?

1. Always ensure that you update the default keys and passwords of the services you use and perform regular configuration audits.
2. Review the security settings periodically can also help mitigate the risk of possibly having security misconfiguration or outdated configuration vulnerabilities.
3. Have automated build and deploy processes for similarly configured production, development, and test environments with distinct credentials can also help in safeguarding your application.

7. Dependency Exploitation

Frontend applications comprise of a lot of third-party libraries that are used to make a developers life easier. But a common developer oversight is that these libraries can sometimes have security vulnerabilities.

For example, Log4j has a massive vulnerability that let attackers execute remote code in a Java environment. So, any application that used Log4j became a victim of this attack!

How Can You Prevent Dependency Exploitation?

It is always good to go with widely-used and properly maintained libraries which are reliable and community tested.

Apart from that, regular audits, dependency updates, and employing vulnerability scanning tools can ensure the safety of your frontend application.

Wrapping Up

It’s important to ensure that the web applications that you build are highly secure. It’s not about building an app with desirable UX alone, but rather securing it to make sure your user data remains safe.

After reading this article, I recommend going through your application code to see if your app is prone to any of these issues, and if so, adopt mitigative strategies immediately!

Thank you for reading.