Josh-CO Dev

Solving the worlds problems one line of code at a time.

Incredibly Basic Cross Site Scripting Defense

Leave a comment

In my last post, we talked about the basics behind cross site scripting (XSS) and how attacks are normally performed. To reiterate, a cross site scripting attack is essentially when an attacker causes your site to run unintended code. This can be done through several different mechanisms, but the most common is to use the forms provided on your website, things such as text boxes, search boxes, etc. Unless certain protections are put into place, these type of controls can allow unintended code to be ran.

Cross site scripting is the vulnerability that most attackers start with when they are testing a site, mostly because it is incredibly simple to test and execute. Let’s say you have a web form that is asking a user for their name, and then it writes their name to the screen. An attacker is not going to put in their name.

Here’s some HTML that you can try this with, please not that you will need to include jQuery to use these examples.

<!DOCTYPE html>

<html lang="en">
        <meta charset="utf-8" />
        <title>XSS Testing</title>
        <script src="/jquery-1.8.1.js" type="text/javascript"></script>
        <script src="/Script.js" type="text/javascript"></script>
        <p>This form will allow for easy XSS attacks using the input element.</p>

        <p>Enter your name: <input type="text" id="inputName">&nbsp<input type="button" value="Submit" id="btnSubmit2"></p>

        <div id="Content">

This should give you a basic html5 page that does nothing but asks the user to enter their name and then provides a submit button.

Now, create a new javascript file named Script.js and include the following code.

$(document).ready(function () {
    $("#btnSubmit2").click(function () {

        var htmlToRender = "Welcome to our site " + $("#inputName").val();


This should seem a lot like the previous article so far. We’re basically echoing their name back to the screen.
Now, a malicious attacker is not going to enter their name. Their going to enter something like this:

alert("haha, attacked!");My Name

If your site is vulnerable to XSS, the attacker will get a popup box saying “haha, attacked!” and their name will still get echoed back to the screen.

So, how do we go about defending against this? One very basic way is to use regular expressions (regex) to check the text before echoing it back to the screen.

Add this method to your javascript

    function checkInput(inputToCheck) {
        var checkedInput = inputToCheck.match(/(javascript|src|onerror|%|)/g);

        return checkedInput;

This method simply accepts a string of text, and then runs it against a basic regex statement to check for items such as “src” or “<". Now modify your event handler.

    $("#btnSubmit2").click(function () {
        var input = $("#inputName").val();
        //var safe = input.text();

        var checkedInput = checkInput(input);

        if (checkedInput != null) {
            alert("Attack caught");
        else {
            var htmlToRender = "Welcome to our site " + input;


All we are doing is sending the input text submitted to our new method and seeing if there is a match against the regular expression. If there is, we throw up an alert box and we only echo back the input text if it is not a match.

This method is far from foolproof and will only give you a basic system for preventing XSS attacks. This will keep out kids that don’t really know what they are doing, but it’s no good against a real attacker.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s