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 <div> 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.
