Security और XSS Prevention
In this page:
$(selector).text(userInput); // safe
$(selector).html(userInput); // unsafe with untrusted inputXSS क्या है?
Cross-site scripting (XSS) तब होता है जब untrusted text — कोई user द्वारा type किया गया, या किसी external API से return किया गया — page में execut।
उदाहरण: 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() बनाम html()
text() method आपके दिए गए किसी भी value को plain text की तरह treat करता है और उसे safely escape करता है, जबकि html() string को actual HTML markup की तरह parse करता है।
उदाहरण: 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>Untrusted Content Escape करें
जब भी content users से या किसी ऐसे external system से आए जिसे आप पूरी तरह control नहीं करते, उसे HTML के रूप में insert करने के बजाय plain text की तरह रखें।
उदाहरण: 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>Unsafe String Building से बचें
untrusted values शामिल करने वाली strings को concatenate करके HTML बनाना एक common तरीका है जिससे XSS risks किसी application में घुस आते हैं, क्योंकि यह भूलना आसान है।
उदाहरण: 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>एक छोटा Security Project
एक simple, reliable rule follow करें: किसी user या किसी external source से आई किसी भी value को default रूप से untrusted मानें। इसे दिखाने के लिए text() इस्तेमाल करें।
उदाहरण: 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>- एक user द्वारा type किए गए text के लिए
.html(userInput)इस्तेमाल करना, जो<img onerror=...>जैसा injected markup चला सकता है;.text(userInput)इस्तेमाल करें। - सिर्फ
<script>tags हटाकर sanitize करने की कोशिश करना, जबकि attackersonerrorजैसे दूसरे tags और attributes इस्तेमाल कर सकते हैं। - 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: