Escape User HTML
Escape User HTML: free step-by-step lesson with examples, common mistakes, and interview tips — part of jQuery Tutorial on Toolliyo Academy.
On this page
jQuery Tutorial · Lesson 66 of 100
Escape User HTML
Setup & DOM ✓ → Events Effects AJAX ✓ → Perf & Integrate → Ship & Projects
Perf & Integrate · 3 — Harden · ~10 min · Performance and Security
What is this?
Never inject raw user strings with .html(). Use .text() or escape before inserting markup.
Why should you care?
XSS in QueryVerse search boxes and comments is a common legacy bug.
See it live — copy this example
Examples include the jQuery 3.7 CDN. Paste into an HTML file or use Run Example to preview.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QueryVerse</title>
<style>
body { font-family: system-ui, sans-serif; margin: 1.25rem; }
.box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
.muted { color: #666; }
button { margin-right: .35rem; margin-top: .35rem; }
</style>
</head>
<body>
<input id="name" placeholder="Type anything" value="<img src=x onerror=alert(1)>">
<button id="safe">Render safe</button>
<button id="unsafe">Render unsafe (demo)</button>
<div id="out" class="box"></div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
$('#safe').on('click', function () {
$('#out').text($('#name').val());
});
$('#unsafe').on('click', function () {
// Demo only — do not ship this pattern
$('#out').html($('#name').val());
});
});
</script>
</body>
</html>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- Safe path uses text.
- Unsafe path parses HTML/JS.
- Prefer text; sanitize if HTML is required.
Practice next
- Try both buttons with the default payload.
- Clear the out box between tries.
- Discuss why text wins.
- Build ""+ escape(name) +"" only with a real escaper.
- Enable CSP later in production.
Remember
Untrusted → text. html is privileged. Review every .html( call.
Search echo
Show the query on the results page.
Outcome: Malicious markup does not run.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!