HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>safe comment text</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 520px; }
    input { width: 100%; padding: 8px; box-sizing: border-box; margin-bottom: 8px; border: 1px solid #cbd5e1; border-radius: 6px; }
    button { padding: 8px 14px; margin-right: 6px; border: none; border-radius: 6px; cursor: pointer; }
    #safe-btn { background: #059669; color: #fff; }
    #unsafe-btn { background: #ef4444; color: #fff; }
    .panel { margin-top: 12px; padding: 12px; border-radius: 8px; min-height: 40px; }
    #safe { background: #dbeafe; border: 1px solid #93c5fd; }
    #unsafe { background: #fee2e2; border: 1px solid #fca5a5; }
    label { font-size: 13px; color: #64748b; display: block; margin-top: 10px; }
    #hint { color: #64748b; font-size: 14px; margin-top: 10px; }
  </style>
</head>
<body>
  <input type="text" id="comment" value="<img src=x onerror=alert('XSS')>">
  <button type="button" id="safe-btn">.text() — safe</button>
  <button type="button" id="unsafe-btn">.html() — dangerous</button>
  <label>Safe (.text):</label>
  <div id="safe" class="panel"></div>
  <label>Unsafe (.html):</label>
  <div id="unsafe" class="panel"></div>
  <p id="hint">Use .text() for user comments — never .html(untrustedInput)</p>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#safe-btn").on("click", function() {
      $("#safe").text($("#comment").val());
      $("#hint").text(".text() shows markup as literal characters — no script runs.");
    });
    $("#unsafe-btn").on("click", function() {
      $("#unsafe").html($("#comment").val());
      $("#hint").text("Warning: .html() parses tags — XSS risk with user input!");
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .text() — safe user comment (Try It)