What are XSS and CSRF

WangYeUX
3 min readMar 12, 2021

Cross-site scripting (XSS)

What is XSS

Cross-site scripting (or XSS) allows an attacker to execute arbitrary JavaScript within the browser of a victim user.

There are couple of types of XSS: reflected, stored, dom-based, and mutation XSS.

First, one is reflected XSS, which simply reflected script tags in the response. The browser identifies these code as a script block and executes them.

Reflected XSS. Reference: https://www.youtube.com/watch?v=EoaDgUgS6QA

Stored XSS is similar to the reflected one but more powerful. Instead reflected in the response, it is stored in the database and gets executed by pulling it out from where it is stored. For example, you can type some script tags(<script></script>) in some dummy website’s comment area. And whoever sees the comment gets infected automatically.

Stored XSS. Reference: https://www.youtube.com/watch?v=EoaDgUgS6QA

Dom-based XSS, which happens when the user’s input directly lands inside a dangerous part of JavaScript. The process entirely happens on the client-side.

https://owasp.org/www-community/attacks/DOM_Based_XSS#:~:text=DOM%20Based%20XSS%20(or%20as,in%20an%20%E2%80%9Cunexpected%E2%80%9D%20manner.

Mutation XSS

How XSS works

We all know that JavaScript has access to HTML DOM, which means we can use JavaScript to manipulate DOM. Plus, having control over another site’s JavaScript can execute many malicious actions such as stealing cookies.

In short, XSS just a JavaScript injection technique. The interesting point is that the browser sees the whole response data as HTML. As a result, the input that we send out is being reflected back in response. So, we can simply add <Script></Script> tags in input, and the browser will start to execute these scripts when it parses the response.

How can we prevent XSS

Use a third-party library to sanitize JavaScript code, and spits out only clean HTML.

Popular frameworks like React, Vue, and Angular have helped deal with such problems.

Cross-site request forgery (or CSRF)

What is CSRF and how it works

Cross-site request forgery (or CSRF) allows an attacker to induce a victim user to perform actions that they do not intend to. Let’s say you’ve logged in to an online bank website. And then you are lured to open a malicious web in another tab. This malicious web can forgery a request to the bank’s server to make some dangerous behaviors as cookies are sent automatically on every request you make to that domain regardless of your current domain. As a result, a forgery action happens in the context of your session.

How can we prevent CSRF problems

Anti CSRF token

A CSRF token is a unique, secret, unpredictable value that is generated by the server-side application and transmitted to the client in such a way that it is included in a subsequent HTTP request made by the client. When the later request is made, the server-side application validates that the request includes the expected token and rejects the request if the token is missing or invalid.

Ref: https://www.youtube.com/watch?v=eWEgUcHPle0&t=2s

Reference:

--

--

WangYeUX

A front-end developer who likes designing stuffs. Technical blog rookie. Loving sharing.