DEV Community

Cover image for 7 Common Front End security attacks
Mrinalini Sugosh (Mrina) for TinyMCE

Posted on • Updated on

7 Common Front End security attacks

As web applications become increasingly critical for business operations, they’re also more attractive targets for cyber attacks. Unfortunately though, many web developers have fallen behind in building secure front ends compared to their backend and DevOps counterparts. This gap raises the risk of damaging data breaches.

Recent incidents like the Balancer Protocol breach expose how much damage attackers can inflict when they exploit front-end vulnerabilities. Balancer Protocol was reportedly hacked through a front-end attack, resulting in the loss of over $240,000, based on what’s been publicly acknowledged. The threat to web apps continues to grow as barriers to staging attacks drop, due to the proliferation of hacking tools and scripts.

The seven common front-end attacks:

1. Cross-site scripting (XSS):

It is a type of attack that injects malicious client-side code. For example, an attacker could input JavaScript that steals user cookies into a comment form that doesn't sanitize entries. When victims load the compromised page, the script executes to give the attacker access to user accounts.

2. Dependency risks:

Front-end apps rely on many third-party libraries and components. If these have vulnerabilities, they undermine the whole app. Using outdated dependencies with known issues is a common developer oversight.

3. Cross-site request forgery (CSRF):

These force victims to execute unwanted actions in an app they're logged into. For example, an attacker could trick users with a disguised link that quietly transfers funds from their account using their stored credentials.

4. Clickjacking:

Uses transparent overlays on a trusted page to trick users into clicking on something different than they perceive. For example, an attacker could overlay a transfer funds button or a cat video's play button.

5. CDN tampering:

If libraries are loaded from external CDNs, attackers could modify them there to inject malicious code that then gets downloaded by app users.

6. HTTPS downgrades:

Stripping away HTTPS encryption facilitates spying on user traffic. Attackers exploit bugs or lack of HSTS headers to downgrade HTTP requests to plain unprotected HTTP.

7. Man-in-the-middle attacks:

The attacker secretly relays and possibly alters the way two parties believe they are communicating. This enables spying and spreading of false information between victims.

As more business functionalities move online, the web will continue to grow as an attack vector. JavaScript developers building front-end apps therefore need to step up their security practices. Plus, having an understanding of vulnerabilities from an offender’s perspective, is crucial for shutting down vulnerabilities before they become headlines.

Top comments (17)

Collapse
 
random_ti profile image
Random

Insightful overview! Your clear explanations make it easier for developers to understand and address front-end security challenges effectively

Thanks for sharing💖

Collapse
 
mrinasugosh profile image
Mrinalini Sugosh (Mrina)

@random_ti Glad it was effective!

Collapse
 
aceix profile image
the_aceix

Very nice article. Some examples would really help understand.

Collapse
 
mrinasugosh profile image
Mrinalini Sugosh (Mrina)

@aceix I plan on diving into more detail! Will ping you when I publish some examples of the attack and defense as well

Collapse
 
mrinasugosh profile image
Mrinalini Sugosh (Mrina) • Edited

@aceix I just published an article that's a bit more of a deep dive on the first attack
XSS

Collapse
 
chideracode profile image
Chidera Humphrey

Thanks for sharing this insightful piece.

Collapse
 
mrinasugosh profile image
Mrinalini Sugosh (Mrina)

@chideracode Glad it was helpful!

Collapse
 
kk_786 profile image
Kratarth

Great! Also it would've been better if defensive measures were included. But thanks for the knowledge.

Collapse
 
mrinasugosh profile image
Mrinalini Sugosh (Mrina)

@kk_786 Plan on posting more articles with examples!

Collapse
 
mrinasugosh profile image
Mrinalini Sugosh (Mrina)

@kk_786 Just published an article that's a bit more of a deep dive on the first type of common attack XSS

Collapse
 
timocodes profile image
TimoCodes

Nice article. CSRF link is missing f from the end and goes into 404

Collapse
 
mrinasugosh profile image
Mrinalini Sugosh (Mrina)

@timocodes Good catch! Thank you, just fixed it

Collapse
 
javed74 profile image
Javed Ansari

Nice article and explanation. As others commented about missing more examples and counter measures. Do let me know when you post with more details.

Collapse
 
mrinasugosh profile image
Mrinalini Sugosh (Mrina)

@javed74 Just published an article that's a bit more of a deep dive on the first type of common attack
XSS

Collapse
 
begueradj profile image
Billal BEGUERADJ

Several flaws in this article.
For example, MITM attacks does not fall into the frontend attacks.

Collapse
 
mrinasugosh profile image
Mrinalini Sugosh (Mrina)

@begueradj Thanks for pointing this out. Man-in-the-Middle (MITM) attacks are also considered front-end security attacks because they typically target the communication between a user (the client) and the server. In front-end security, the focus is on protecting data as it's transferred from the user's device to the server, which is where MITM attacks come into play. Here's a few ways how it fits into the front-end security paradigm:

  1. User Interaction
  2. Data Interception
  3. Session Hijacking
  4. SSL Stripping
  5. Relevance to Front-End Security Measures

While I do agree that MITM attacks affect the data transmission between client and server (which to many can be considered the 'back end' of a system), it's essential to understand that security requires both strong front-end and back-end measures against a wide range of vulnerabilities, including MITM which is a very common vulnerability

Collapse
 
badgerduke profile image
Eric Hamacher

Very good! Thank you!