Preventing Cross-Site Scripting in Your Web Application

By Richard Blum

Cross-site scripting (known as XSS) is quite possibly the most dangerous type of attack made on dynamic web applications. The main idea of an XSS attack is to embed malicious JavaScript code in data that the attacker submits to the web application as part of the normal data input process. When the web application tries to display the data in a client browser, the JavaScript is pushed to the client browser that’s viewing the website and runs.

Follow these steps to watch an XSS exploit in action:

  1. Open your favorite text editor, program editor, or integrated development environment (IDE) package.
  2. Type the following code into the editor window:
    <!DOCTYPE html>
    <title>XSS Test</title>
       input {
           margin: 5px;
    <h2>Please enter your first name:</h2>
    <form action="xsstest.php" method="post">
    <input type="text" name="fname"><br>
    <input type="submit" value="Submit name">
  3. Save the file as xssform.html in the DocumentRoot folder for your web server.For XAMPP on Windows, that’s c:\xampp\htdocs; for XAMPP on macOS, that’s /Applications/XAMPP/htdocs.
  4. Open a new tab or window in your browser, and type the following code:
    <!DOCTYPE html>
    <title>XSS Test</title>
    <h1>XSS Test</h1>
        $fname = $_POST['fname'];
       echo "<p>Welcome, $fname</p>\n";
    <h2>This is the end of the test</h2>
  5. Save the file as xsstest.php in the DocumentRoot folder for your web server.
  6. Open the XAMPP Control Panel, and then start the Apache web server.
  7. Navigate here.

    You may need to change the TCP port used to match your web server.

  8. In the form, type the following code in the Name text box:
  9. Click the Submit button to continue.
  10. Close the browser window when you’re done with the test.

When you submit the form with the embedded JavaScript code, you should get the output shown here.

embedded JavaScript cross-site scripting
The output from entering embedded JavaScript in a form.

The PHP code sent the JavaScript to the browser as part of the echo statement output, and the browser dutifully ran the JavaScript code. This example is harmless, because it just displays a simple alert message, but a real attacker would embed much more malicious code.

Some browsers, such as Safari and Chrome, have built-in XSS attack detection, which may trigger on this test and block the JavaScript code from running. If you don’t see the alert() pop-up box, open the developer tools for your browser and see if there’s a notice that the browser blocked a potential XSS attempt.

The “cross-site” part of the XSS name comes from where the <script> tag sends the browser to retrieve the JavaScript code file. In the previous example, the JavaScript code was embedded directly within the script element. Remember: The <script> HTML5 tag can also reference an external JavaScript file, which the browser will load and run. An attacker can specify the src attribute in the <script> tag to redirect the browser to run JavaScript located on a rogue server anywhere in the world.

There are two different methods of carrying out an XSS attack:

  • Reflected attack: The attacker places the rogue script as a link in the submitted data. Victims must actively click the link to launch the XSS attack.
  • Persistent attack: The attacker places the rogue script as data that the browser displays when the web page loads (as in the previous example).

Persistent attacks are very dangerous. The malicious script runs as soon as an unsuspecting website visitor opens the web page that contains the script as part of the content, without any actions required by the victim. For example, if an attacker posts a blog comment that contains malicious JavaScript code, every time the web application displays that blog comment on a client browser, the malicious script is run.