Cross-site scripting attacks (or XSS) are a special class of web attacks that target the front-end code, particularly HTML and JavaScript.

The main purpose of an XSS attack is to manipulate the front-end code generated by a dynamic web page, in order to steal information from the page's visitors or to make them execute arbitrary operations.

Even if the target is the page's front-end, XSS vulnerabilities are often caused by the site back-end.

But how do such attacks work, exactly? And more important, how do you prevent them?

Let's take a look.

What can XSS attacks do?

By exploiting an XSS vulnerability, an attacker can manipulate the code sent from a website to a victim user, making the user execute any HTML or JavaScript code.

The victim (and its web browser) will see the code as coming from the legitimate website. There is no obvious way to know that the page's code has been manipulated.

Having the complete control over the page's code gives the attacker a lot of power.

In fact, the attacker can read, change and forward to itself a lot of information, including:

• any data on the page;
• values inside the page's forms, even before they are sent;
• all the page's cookies (including the Session ID, which can be used for Session Hijacking);
• all the request string values;
• all the AJAX connections data in the page.

The attacker can forward any of this data to its own website.

It can also change the links on the page to force the site users to click on a malicious website, edit the users' local storage, and even exploit browser vulnerabilities to install malware on the users' devices.

Moreover, the attacker can make the users run arbitrary operations on the website, like posting spam messages on a forum or making monetary transactions.

An XSS attack example

Let's see a simple XSS attack example.

Suppose that your PHP application is an online quiz that asks the visitors for their first name, using a simple form:

After the user clicks "Next", the website shows "Hi, [name]!", where [name] is the name entered by the visitor.

This is the PHP code:

This simple code is vulnerable to XSS.

To understand why, imagine someone creates a link to the page with an embedded name request value, like this:

(Of course, "yourpage.php" is the address of the form PHP back-end).

If you click the above link, the page will immediately echo "Hi, Steve!”

No problems so far.

But what if someone sends you this link?

This time, the name is a JavaScript code that will be injected into the response page and executed as soon as the user loads the page.

The user will see an alert popup with information about its browser.

Try it yourself: enter "<script>alert(navigator.userAgent);</script>" as the name and see what happens (you can download the PHP script at the end of the lesson to try it).

Lesson Key Point

AN XSS ATTACK CAN MAKE THE VICTIM USER EXECUTE ANY JAVASCRIPT CODE.

This specific code is harmless. But it's easy to see how the attacker can inject any JavaScript or HTML code as the "name" request parameter.

For example, the attacker's code could sniff the page's input values and send them to the attacker's website with an AJAX background call.

If this happens on an e-commerce website, sensitive data like credit card numbers can be effectively stolen using this technique.

Lesson takeaways

• XSS attacks target the front-end code, but they are often caused by back-end vulnerabilities.
• With an XSS attack, an attacker can make the users of the target website execute arbitrary code.
• It's a very effective technique to steal users' data or to make them run unwanted operations on the target website.