How to prevent Cross-Site Scripting using HTML, JavaScript, and DOM

How to prevent cross-site scripting: Because cross-site scripting, often known as XSS, is one of the most hazardous attack methods used by cybercriminals, it is essential for every developer and security researcher to have a solid understanding of what it is and how to protect against assaults using it. The XSS vulnerability is a challenge; what steps can you take to address it? To display the information that a website has obtained from a user, you can use HTML, JavaScript, or DOM. Each of these three distinct sectors has the potential to collaborate with the others.

How to Protect Yourself from XSS Attackers are able to insert malicious codes or scripts into websites using HTML XSS, which allows them to target users who are browsing the site without their knowledge. This could result in the theft of personal data, the redirection of visitors to another website that was set up by the cybercriminal, or some other form of alteration to the appearance of the webpage. You have the ability to block something from taking place; for example, you could prevent someone from inputting HTML.

Imagine for a moment that you run a website that includes a guestbook. Let’s imagine that guests who use this guestbook have the opportunity to sign their names and leave remarks below and that these visitors’ messages are viewable by the general public. An adversary who wants to conduct an XSS test in your guestbook will use the space that you have set aside for messages to be written in if they have access to it. This is where the malicious hacker will run some JavaScript code. As an illustration, a malicious actor could employ JavaScript code such as:

<script>alert(“The XSS!”)</script>

In order for this to be successful, the attacker needs to make use of a script tag. In the event that they don’t, the JavaScript code won’t function properly. In order to prevent visitors from ever making use of HTML tags, you will need to encrypt the statement that begins with a. The attacker will have a more difficult time working with HTML tags as a result of this.

How to avoid Cross-Site Scripting attacks using JavaScript

The reasoning behind HTML is also sound when applied to JavaScript. Using a JavaScript code, it is possible to print out the information that the website has obtained from the user in some apps.

Consider this coding:

<p id=”print”></p>
<script>
document.getElementById(“test”).innerHTML = “”;
</script>

Imagine that the source code for a website looks something like the example shown above. The developer utilized a “p” tag that was referred to as “print” in this instance. As can be seen from the source code, a value will be obtained from the “search” parameter, and the developer intends for the “p” tag to display this newly acquired value. The programmer who carried out this procedure had the intention of making use of the JavaScript component known as innerHTML.

Now, let’s take a look at this scenario from the perspective of the person who launched the cyberattack. In this scenario, the attacker will check for XSS vulnerabilities by inserting code into the “script” tag. In order to accomplish this, the attacker does not have to restart the tag because there is already an instance of the “script” tag in use. After that, the attacker may compose a test like this one:

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

This snippet of code is going to be shown on the website as:

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

It is certain that this assault will be successful. Let’s take a look at one more example method that an adversary could employ in order to get a better grasp of the situation. A possible XSS scan was run by the hacker, including the following:

filename.php?search=”;</script><em>Fatih</em>

The way it would appear when viewed from the website is as follows:

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

Because the attacker has closed the initial “script” tag by utilizing a structure like “/script” here, this can come off as a little bit weird to some readers. As a result, the attacker has the ability to restart any JavaScript or HTML code they like.

When you consider these two distinct illustrations, defending against XSS appears to be a fairly straightforward process. Encoding the characters ” and’that are displayed in the first example is a necessary precaution that needs to be taken. In the second illustration, you are going to encode the characters < and >.

Using DOM to Protect Against Cross-Site Scripting

The data that the website receives from the user can potentially interfere with the property of a DOM element when it comes to this particular form of XSS. For instance, the color information that the website obtains from the user can influence the color that appears in the background of a table or the color that appears in the background of the entire page. The result is that the user unintentionally messes with the style layouts of the table and the body. The following piece of code serves as an excellent illustration of this:

<body bgcolor=”<?php echo $_GET[‘color’]; ?>”/>

Because of this, the website will make direct use of the “color” argument that was provided by the user and will apply it to the “bgcolor” property of the “body” element. At this time, what options do potential attackers have? They could carry out the following piece of malicious code:

filename.php?color=red” onload=”alert(‘The XSS!’)

When viewed from the website, this appears as follows:

<body bgcolor=” red” onload=”alert(‘The XSS!’) “/>

The programmer would have to encode the character ” in order to stop something like this from happening.

Nevertheless, there is one more essential component of JavaScript that should be brought to your attention. The following snippet of code serves as an illustration of this:

<a href=”javascript:alert(‘The XSS!’)”>

This demonstrates that it is feasible to execute some JavaScript code in its native form. Making certain that the website verifies the data it receives from users to determine whether or not it is a real URL is one of the most effective preventative measures. Making sure that there are expressions in the connection such as “HTTP” and “HTTPS” (the secure version of HTTP) is the simplest method.

An Illustration of a Function to Prevent Cross-Site Scripting Using PHP

You have been presented with a few different examples of how to defend a website or application against XSS assaults. The following table contains snippets of PHP code that you can use:

Please keep in mind that the examples given here are merely examples and that the actual results may vary based on the programming language that you use.

You can use PHP to build a web application, and then use the scripts you saw earlier to see how they look in text form. If you’re unsure how to put any of these techniques to use, you can receive some pointers from the PHP code block that’s provided below; these pointers should be helpful even if you’re programming in a different language:

<?php
$data = $_GET[‘data’];

function in_attribute($str){
return htmlspecialchars($str, ENT_COMPAT);
// ENT_COMPAT will encode the double quote (“) character.
}

function in_html($str){
$link = ‘/^(((https?)|(\/\/))).*/’;
if(!preg_match($link, $str))
{
return “/”;
}
return $str;
}

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

Defend your website against XSS attacks and more

Hackers frequently employ XSS as a route for their attacks. In most cases, a route value in the URL or any field on your website into which data can be submitted (including fields for forms and comments) can be used to test for an XSS vulnerability. However, there are undoubtedly a wide variety of approaches that cybercriminals can take to attack a website, and this is especially true if the website in question has a large number of users who conceal their information.

Would you like to read more about how to prevent cross-site scripting-related articles? If so, we invite you to take a look at our other tech topics before you leave!