Handling Injection Attacks With JavaScript
Tags: javascript, security
Published: 2021-01-19 04:17:54

---
title: Handling Injection Attacks With JavaScript
published: true
description: There are certain cyberattacks that you can guard against with some regular JavaScript best practices. You can learn how to prevent a basic injection attack through the front-end with just a few things.
tags: #javascript, #security
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/96bu2wuuhordjilipj3q.png
---

There are a lot of ways attackers will try to get unauthorized access to your application. You have to know how to handle them and how to keep your users safe. One of the top ways that attackers try to get into your app is through injection attacks.

## Injection attacks

There are a few different kinds of injection attacks that be used. SQL injection attacks happen when untrusted data gets sent to the back-end as part of a query from the front-end. These are the most dangerous because they can make changes to a system's database.

JavaScript injection attacks aren't as impactful as SQL injection attacks because they remain on the client-side. Most of the time targets for JavaScript injection happens in forms where text can be inserted. So places like contact forms, comments on posts, and any other area a user can type are susceptible to these kinds of attacks.

Attackers may start with JavaScript injection attacks to poke around for any clues on how to access the back-end. This means they might see if they can change cookie settings to try and log in as a different user.

While most of the things they can do are limited to UI changes as long as the app has been configured correctly, there are some quick things you can do to add extra protection.

## Things you can do for protection

Since the front-end is the first line of defense against attacks like these, you'll want to take some common steps to protect your app.

**Sanitize form data:** Only allow the data you expect to get through any requests you make with it. Add form validation to let users know when they are typing something that won't be an accepted value. Also, adding typing to your data with Typescript can help.

**Add extra validation on the back-end:** The front-end is where any input should be validated, but having it on the back-end as well doesn't hurt. This is a way to double-check the query that is trying to get information from or send data to your database.

**Make sure you're using safe APIs:** An example of a safe API is one that gives you an interface with parameters you can use instead of giving you direct access to data through queries. Something else you might consider is using an ORM to handle your data requests.

## Example of what you can do

Just to show you a few things you can do to prevent injection attacks, here's a form with some security stuff.

[https://codesandbox.io/s/xenodochial-curie-44hcb](https://codesandbox.io/s/xenodochial-curie-44hcb)

{% codesandbox xenodochial-curie-44hcb %}

The security stuff here is mainly form validation, but that blocks a lot more attacks than you would think.

## Conclusion

Trying to protect your app from attacks is a job in itself. Adding something like form validation is one of the first lines of defense you have. It's easy to overlook form validation when you're in a rush and just rely on the back-end to take care of things.

If you need to prove the value of adding validation to forms to the team, just tell them to imagine someone hacking into prod on a Saturday at 2am. Then tell them to imagine what it would be like trying to fix it, explain it, and get user confidence back.

Then just go ahead and add that to the next sprint or whenever makes the most sense.