Security and XSS Prevention
In this page:
What is XSS?
Cross-site scripting (XSS) happens when untrusted text — something typed by a user, or returned from an external API — is inserted into the page as executable HTML instead of being treated as plain text. If that text contains a script tag or an event handler attribute, the browser will run it, potentially letting an attacker execute code in your users' sessions.
Example: What is XSS?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="output"></div>
<script>
const userInput = "<img src=x onerror=alert(1)>";
$("#output").text(userInput);
</script>
</body>
</html>text() vs html()
The text() method treats whatever value you give it as plain text and escapes it safely, while html() parses the string as actual HTML markup. Because of this, html() should never be used directly with untrusted input — doing so is one of the most common ways XSS vulnerabilities end up in real applications.
Example: text() vs html()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="safe"></p><p id="risky"></p>
<script>
const input = "<b>bold</b>";
$("#safe").text(input);
$("#risky").html(input);
</script>
</body>
</html>Escape Untrusted Content
Whenever content comes from users or from an external system you don't fully control, keep it as plain text rather than inserting it as HTML. This prevents the browser from ever treating that content as executable markup, closing off the XSS risk entirely for that piece of data.
Example: Escape Untrusted Content
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="comment"></div>
<script>
const userComment = "Nice post!";
$("#comment").text(userComment);
</script>
</body>
</html>Avoid Unsafe String Building
Building HTML by concatenating strings that include untrusted values is a common way XSS risks sneak into an application, since it's easy to forget to escape something. Creating elements programmatically and setting their text content with text() instead avoids this risk altogether.
Example: Avoid Unsafe String Building
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="output"></div>
<script>
const username = "Alice";
$("<p>").text("Hello, " + username).appendTo("#output");
</script>
</body>
</html>Small Security Project
A simple, reliable rule to follow: treat any value that came from a user or an external source as untrusted by default. Use text() when displaying it, and validate or sanitize data before it's ever sent somewhere it could be executed.
Example: Small Security Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="feed"></ul>
<script>
const comments = ["Great!", "<img src=x onerror=alert(1)>"];
comments.forEach(function(c) {
$("<li>").text(c).appendTo("#feed");
});
</script>
</body>
</html>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: