Working with JSON — Injection Attacks
Tags: javascript, webdev, programming, beginners
Published: 2021-01-25 03:14:31

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

JSON stands for JavaScript Object Notation.

It’s a popular data-interchange format that has many uses.

In this article, we’ll take a look at how to use JSON.

### Injection Attacks

Injection attacks are where attackers run their own malicious code on our websites to do what they want.

They add their own malicious code onto our sites and run them by exploiting the vulnerabilities on our site.

### Cross-Site Scripting (XSS)

One kind of injection attack is the cross-site scripting attack.

This is where the attack runs their malicious code on our site by using the vulnerabilities on our site.

JavaScript has the `eval` function that takes a string and run code form it.

For example, if we have:

```
const jsonString = '{"animal":"cat"}';
const obj = eval(`(${jsonString})`);
console.log(obj.animal);
```

Then we put the `jsonString` in the parentheses and run that with `eval` .

A JavaScript object will be returned and we assign that to `obj` .

So when we console log the value of `obj.animal` , we get `'cat'` .

As we can see, this can lead to problems when we have malicious code as the argument of `eval` .

For example, if we have:

```
const jsonString =  "alert('bad')";;
const obj = eval(`(${jsonString})`);
```

Then `eval` runs the code in `jsonString` to show an alert box.

That is definitely not good since it’s doing something users don’t expect.

Fortunately, this attack is recognized by developers and the `JSON.parse` method won’t parse JSON strings with functions in them.

Therefore, we should use `JSON.parse` instead of `eval` to parse JSON strings:

```
const jsonString = '{"animal":"cat"}';
const obj = JSON.parse(jsonString);
console.log(obj.animal)
```

We parse `jsonString` with `JSON.parse` instead and get the same result as the previous example.

This is supported by almost all modern browsers so we can use this to parse JSON strings without thinking.

We should also think about HTML strings that have JavaScript.

For example, we can write:

```
{
    "message": "<div onmouseover=\"alert('gotcha!')\">hover here.</div>"
}
```

The string calls `alert` in the HTML code when we hover over the rendered HTML.

This is something that we have considered when we are parsing HTML strings and rendering them directly in the browser.

It can do a lot more than just showing an alert, and do things like stealing data.

A good way to prevent parsing raw HTML and JavaScipt directly is to escape the HTML characters.

We can convert `<div>` to `&lt;div&gt;` so that it won’t be rendered as HTML.

Instead, the code will be displayed as the code.

Modern web frameworks should prevent raw HTML from being rendered directly in the browser unless we explicitly make it do so.

### Conclusion

We should watch out for cross-site scripting attacks when we’re writing our sites and web apps.

Modern web frameworks should prevent raw HTML from being rendered directly.

Also, we shouldn’t use `eval` to run raw JavaScript code.