How to Prevent Cross-Site Scripting Using HTML, JavaScript, and DOM

Cross-Site Scripting, widely known as XSS, is one of the most dangerous attack methods employed by cybercriminals, so it’s vital that every developer and security researcher knows what it is and how to prevent attacks. So, how can you take action against the XSS vulnerability? You use HTML, JavaScript, or DOM to show the data a website receives from the user. One or more of these three different areas can work together.

How to Prevent XSS Using HTML

XSS allows attackers to inject malicious codes or scripts into webpages, targeting unsuspecting users visiting the site. This could steal personal data, redirect visitors to another site set up by the cybercriminal, or otherwise tamper with the look of the webpage. But you can prevent this from happening; for instance, by stopping them inserting HTML.

Imagine you have a website with a guestbook. Let’s say that your visitors using this guestbook can write their names and messages here, and their messages can be publicly viewed. An attacker who wants to make an XSS test in your guestbook will use the area you have allocated for a message to be written. That cybercriminal will run a JavaScript code here. For example, an attacker could use JavaScript code like:

<script>alert("The XSS!")</script>

The attacker must use a script tag for this to be successful. If they don’t, the JavaScript code will not work. You must encode the < statement so that users can never use HTML tags. This will make it difficult for the attacker to work with HTML tags.

How to Prevent XSS Using JavaScript

The logic in HTML is also valid in JavaScript. In some applications, it is possible to print the data received by the website from the user with a JavaScript code.

Consider this coding:

<p id="print"></p>
document.getElementById("test").innerHTML = "";

Imagine a website uses a code block like the one above. The developer used a “p” tag called “print” here. As you can see from the code, a value will come from the “search” parameter, and the developer wants to show this incoming value in the “p” tag. The developer who made this operation wanted to use the innerHTML feature of JavaScript.

Now let’s look at the situation from the point of view of the cyberattacker. In such a case, the attacker will perform an XSS test within the “script” tag. For this, the attacker does not need to restart the tag, because a “script” tag that is already being used. The attacker could then write a test like this:

filename.php?search=a" alert("The XSS!"); f= "

This code will appear on the website as:

document.getElementById("test").innerHTML = " a" alert("The XSS!"); f=" ";

That attack would be successful. To better understand the issue, let’s examine one more example technique an attacker could use. The hacker may have applied an XSS test such as:


This is what it would look like when viewed from the website:

document.getElementById("test").innerHTML = " ";</script><em>Fatih</em> ";

This may seem a little strange because the attacker has closed the first “script” tag by using a structure like “/script” here. And so, the attacker can restart any JavaScript and HTML code they want.

If you think about these two different examples, protecting from XSS seems pretty simple. The necessary precaution would be to encode the and characters you see in the first example. In the second example, encode the characters < and >.

How to Prevent XSS Using DOM

In this variant of XSS, the data that the website receives from the user can interfere with the property of a DOM element. For example, the color information that the site receives from the user can affect the background color of a table or the entire background of the page. So the user unwittingly interferes with the style layouts of the body and table. The following code is a good example for this:

<body bgcolor="<?php echo $_GET['color']; ?>"/>

With this, the website uses the “color” parameter received from the user directly in the “bgcolor” property of the “body” element. So what could an attacker do at this point? They could execute this malicious code:

filename.php?color=red" onload="alert('The XSS!')

This looks like this when viewed from the website:

<body bgcolor=" red" onload="alert('The XSS!') "/>

To prevent this from happening, the developer would have to encode the character.

However, there is one more important element in JavaScript to note. The following code snippet is an example for this:

<a href="javascript:alert('The XSS!')">

This means that it’s possible to run some JavaScript code directly. One of the best preventative measures is making sure the website checks whether the data it receives from users is a real URL. The simplest method is to make sure there are expressions such as “HTTP” and “HTTPS” (the secure version of HTTP) in the connection.

An Example Function to Prevent XSS With PHP

Defend your site against XSS attacks with php codes

You’ve seen some examples of how to protect an app or website from XSS attacks. You can use the code snippets in this table with PHP:

Encode in HTML

htmlspecialchars($str, ENT_COMPAT)

Encode in JavaScript and DOM attribute

htmlspecialchars($str, ENT_NOQUOTES)

URL Checking


Note that these are just examples and will vary depending on the software language you are using.

You can create a web application with PHP and try the codes you see above to text them out. If you’re wondering how to use all these methods, you can get some ideas from the PHP code block below, which should be useful even if you’re using a different language:

$data = $_GET['data'];

function in_attribute($str)
return htmlspecialchars($str, ENT_COMPAT);

function in_html($str)
$link = '/^(((https?)

$data = in_attribute($data);
$data = in_html($data);
$data = real_url(data);

Protect Your Website From XSS and More

XSS is a popular attack vector used by hackers. Usually, a path value in the URL, any field on your website where data can be entered (such as forms and comments fields), can be used to test for an XSS vulnerability. But of course, there are many different methods cybercriminals can use to attack a site, especially if you have a website that has many users and hides their information.

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *