← Back to jQuery Course | Chapter 15: Performance & Best Practices | Lesson 5 of 5

Security और XSS Prevention

Cross-site scripting, या XSS, तब हो सकता है जब untrusted text को HTML के रूप में insert किया जाए। जब तक HTML जानबूझकर ज़रूरी न हो, user input को data की तरह treat करें।

In this page:

  1. XSS क्या है?
  2. text() बनाम html()
  3. Untrusted Content Escape करें
  4. Unsafe String Building से बचें
  5. एक छोटा Security Project
Syntax
javascript 
$(selector).text(userInput); // safe
$(selector).html(userInput); // unsafe with untrusted input

XSS क्या है?

Cross-site scripting (XSS) तब होता है जब untrusted text — कोई user द्वारा type किया गया, या किसी external API से return किया गया — page में execut।

उदाहरण: What is XSS?

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="output"></div>

  </section>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      const userInput = "<img src=x onerror=alert(1)>";
      $("#output").text(userInput);
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

text() बनाम html()

text() method आपके दिए गए किसी भी value को plain text की तरह treat करता है और उसे safely escape करता है, जबकि html() string को actual HTML markup की तरह parse करता है।

उदाहरण: text() vs html()

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    .btn { display:inline-block; padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border-radius:4px; cursor:pointer; font:13px sans-serif; }
    #resetBtn.btn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <span id="runBtn" class="btn" role="button">Run</span>
  <span id="resetBtn" class="btn" role="button">Reset</span>
  <section id="demo">
    <p id="safe"></p><p id="risky"></p>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      const input = "<b>bold</b>";
      $("#safe").text(input);
      $("#risky").html(input);
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Untrusted Content Escape करें

जब भी content users से या किसी ऐसे external system से आए जिसे आप पूरी तरह control नहीं करते, उसे HTML के रूप में insert करने के बजाय plain text की तरह रखें।

उदाहरण: Escape Untrusted Content

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="comment"></div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      const userComment = "Nice post!";
      $("#comment").text(userComment);
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Unsafe String Building से बचें

untrusted values शामिल करने वाली strings को concatenate करके HTML बनाना एक common तरीका है जिससे XSS risks किसी application में घुस आते हैं, क्योंकि यह भूलना आसान है।

उदाहरण: Avoid Unsafe String Building

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="output"></div>

  </section>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      const username = "Alice";
      $("<p>").text("Hello, " + username).appendTo("#output");
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

एक छोटा Security Project

एक simple, reliable rule follow करें: किसी user या किसी external source से आई किसी भी value को default रूप से untrusted मानें। इसे दिखाने के लिए text() इस्तेमाल करें।

उदाहरण: Small Security Project

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <ul id="feed"></ul>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $("#output").empty();
      const comments = ["Great!", "<img src=x onerror=alert(1)>"];
      comments.forEach(function(c) {
        $("<li>").text(c).appendTo("#feed");
      });
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

Reflow और Repaint कम करना · कुशल Event हैंडलिंग · Chaining से Optimize करना · Selectors को Cache करना

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. एक user द्वारा type किए गए text के लिए .html(userInput) इस्तेमाल करना, जो <img onerror=...> जैसा injected markup चला सकता है; .text(userInput) इस्तेमाल करें।
  2. सिर्फ <script> tags हटाकर sanitize करने की कोशिश करना, जबकि attackers onerror जैसे दूसरे tags और attributes इस्तेमाल कर सकते हैं।
  3. untrusted input के साथ "<p>" + name + "</p>" जैसी strings को concatenate करके HTML बनाना, जबकि value को बाद में .text() से set किया जाना चाहिए।
चैप्टर सारांश
  • Selectors cache करना और chaining इस्तेमाल करना repeated work से बचाते हैं।
  • Efficient event handling और reflow तथा repaint कम करना pages को responsive रखते हैं।
  • Security practices, XSS prevention सहित, jQuery code को safe रखती हैं।
🔒

Chapter Quiz — Complete all 5 topics to unlock

0/5 topics done

Complete these topics first:

← Previous Lesson Reducing Reflow and Repaint Next Lesson → Native DOM Alternatives to jQuery Selectors

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.