React में XSS: dangerouslySetInnerHTML और तृतीय-पक्ष स्क्रिप्ट
समझें कि React का डिफ़ॉल्ट एस्केपिंग XSS को कैसे रोकता है, dangerouslySetInnerHTML कब खतरनाक होता है और तृतीय-पक्ष स्क्रिप्ट जोखिम कैसे लाती हैं।
React में XSS: dangerouslySetInnerHTML और तृतीय-पक्ष स्क्रिप्ट, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
React की अंतर्निहित XSS सुरक्षा
React JSX के माध्यम से रेंडर किए गए सभी मानों को DOM में डालने से पहले अपने-आप एस्केप करता है। जब आप JSX में {userInput} लिखते हैं, तो React लगभग textContent असाइनमेंट जैसा काम करता है — मान को HTML के रूप में नहीं, केवल टेक्स्ट के रूप में माना जाता है। डिफ़ॉल्ट रूप से यह React एप्लिकेशनों में अधिकांश XSS हमलों को रोकता है।
<code>dangerouslySetInnerHTML</code> क्या करता है
dangerouslySetInnerHTML={{ __html: htmlString }} React का ऐसा एस्केप-हैच है, जो स्वचालित एस्केपिंग को बायपास करता है। इसका नाम जानबूझकर चेतावनी देने वाला है: यह बताता है कि HTML स्ट्रिंग की सुरक्षा की ज़िम्मेदारी आपकी है। React सीधे innerHTML सेट करता है, जिससे स्क्रिप्ट्स और इवेंट हैंडलर्स सहित कोई भी HTML चल सकता है।
उचित उपयोग
जब आप रिच टेक्स्ट एडिटर (जैसे TipTap या Quill), HTML संग्रहीत करने वाले CMS, या Markdown को HTML में बदलने वाले कन्वर्टर से प्राप्त HTML रेंडर करते हैं, तब आपको वास्तव में dangerouslySetInnerHTML की आवश्यकता होती है। ये स्रोत वास्तविक HTML मार्कअप तैयार करते हैं, जिसे एस्केप किए गए टेक्स्ट के रूप में नहीं बल्कि HTML के रूप में रेंडर करना आवश्यक होता है।
हमले का तरीका
यदि HTML स्ट्रिंग में <script>stealCookies()</script> या <img src=x onerror="stealData()"> मौजूद हो, तो उसे innerHTML के रूप में सेट करने पर हमलावर का कोड चल जाता है। सैनिटाइज़ेशन के बिना उपयोगकर्ता से प्राप्त किसी भी सामग्री को सीधे dangerouslySetInnerHTML में भेजना एक गंभीर XSS भेद्यता है।
DOMPurify: मानक सैनिटाइज़र
DOMPurify ब्राउज़रों के लिए उद्योग-मानक HTML सैनिटाइज़र है। यह HTML स्ट्रिंग को सैंडबॉक्स किए गए संदर्भ में पार्स करता है, खतरनाक एलिमेंट्स और एट्रिब्यूट्स (स्क्रिप्ट टैग्स, ऑन-इवेंट हैंडलर्स, javascript: यूआरएल) हटा देता है और एक सुरक्षित HTML स्ट्रिंग लौटाता है। उपयोग: DOMPurify.sanitize(dirtyHtml) को dangerouslySetInnerHTML में भेजने से पहले चलाएँ।
तृतीय-पक्ष स्क्रिप्ट के जोखिम
तृतीय-पक्ष स्क्रिप्ट्स (एनालिटिक्स, चैट विजेट्स, विज्ञापन नेटवर्क) आपके एप्लिकेशन के JavaScript के समान अनुमतियों के साथ चलती हैं। कोई संक्रमित या दुर्भावनापूर्ण तृतीय-पक्ष स्क्रिप्ट document.cookie पढ़ सकती है, localStorage तक पहुँच सकती है, फ़ॉर्म में दर्ज डेटा पढ़ सकती है और बाहरी सर्वरों को अनुरोध भेज सकती है — वह भी उपयोगकर्ता को बिना किसी संकेत के।
सुरक्षा परत के रूप में Content Security Policy
Content Security Policy एक HTTP हेडर है, जो बताता है कि किन स्क्रिप्ट्स को चलने की अनुमति है। DOM में XSS पेलोड डाल दिए जाने पर भी सही ढंग से कॉन्फ़िगर किया गया CSP इनलाइन स्क्रिप्ट्स को सीमित करके और केवल अनुमति-सूची वाले स्क्रिप्ट स्रोतों को स्वीकार करके उनका चलना रोक सकता है। इनपुट सैनिटाइज़ेशन के बाद CSP सुरक्षा की दूसरी परत है।
npm के ज़रिए सप्लाई चेन हमले
npm पैकेज XSS हमलों का वास्तविक माध्यम हो सकते हैं। कोई निर्भरता ऐसा दुर्भावनापूर्ण कोड शामिल कर सकती है, जो पर्यावरण चर या उपयोगकर्ता का डेटा चुराकर बाहर भेज दे। 2022 की node-ipc घटना और 2021 में ua-parser-js के साथ हुआ समझौता दिखाता है कि व्यापक रूप से उपयोग किए जाने वाले पैकेजों पर भी कब्ज़ा करके उनमें हानिकारक कोड डाला जा सकता है। निर्भरताओं का ऑडिट करने के लिए npm audit चलाएँ और लॉकफ़ाइल का उपयोग करें।
हमलावर XSS से क्या कर सकते हैं
सफल XSS हमला हमलावर को उपयोगकर्ता का sessionStorage JWT टोकन चुराने (उसे हमलावर के नियंत्रण वाले सर्वर पर भेजने), प्रमाणीकृत उपयोगकर्ता के रूप में कार्य करने (उपयोगकर्ता के सेशन का उपयोग करके एपीआई कॉल करने), फ़िशिंग सामग्री दिखाने के लिए DOM में बदलाव करने या एप्लिकेशन में उपयोगकर्ता द्वारा दबाई गई हर कुंजी का रिकॉर्ड रखने में सक्षम बनाता है।
Trusted Types API
Trusted Types ब्राउज़र एपीआई के लिए आवश्यक है कि सभी DOM सिंक्स (innerHTML, eval, script.src) कच्ची स्ट्रिंग्स के बजाय विशेष टाइप वाली ऑब्जेक्ट्स प्राप्त करें। इससे स्ट्रिंग-आधारित XSS पेलोड प्लेटफ़ॉर्म स्तर पर DOM तक नहीं पहुँच पाते। React Trusted Types के साथ संगतता की दिशा में काम कर रहा है और CSP इसे अनिवार्य कर सकता है।
CMS सामग्री के लिए सुरक्षित तरीके
CMS HTML रेंडर करने का सुरक्षित तरीका यह है: HTML प्राप्त करें, उसे सुरक्षित टैग्स और एट्रिब्यूट्स की अनुमति-सूची के साथ DOMPurify.sanitize() से गुज़ारें, फिर dangerouslySetInnerHTML={{ __html: cleanHtml }} के साथ रेंडर करें। सैनिटाइज़ेशन चरण को कभी न छोड़ें, भले ही आपको CMS पर भरोसा हो, क्योंकि स्वयं CMS डेटाबेस से भी छेड़छाड़ हो सकती है।
DOMPurify का उद्देश्य
DOMPurify.sanitize(htmlString) कॉल करने पर DOMPurify क्या करता है?
पाठ का पुनरावलोकन
React JSX मानों को अपने-आप एस्केप करता है, जिससे अधिकांश XSS हमले रुक जाते हैं। dangerouslySetInnerHTML वास्तविक HTML रेंडर करने के लिए इस सुरक्षा को बायपास करता है — इसलिए पहले इनपुट को DOMPurify से सैनिटाइज़ करें। तृतीय-पक्ष स्क्रिप्ट्स और संक्रमित npm पैकेज सप्लाई चेन के ज़रिए XSS के माध्यम बन सकते हैं। Content Security Policy सुरक्षा की दूसरी परत प्रदान करती है। सफल XSS से टोकन चोरी, किसी और की पहचान में कार्य करना और फ़िशिंग संभव हो जाती है।
एआई शिक्षक के साथ React सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 88
- पाठ
- 324
अक्सर पूछे जाने वाले प्रश्न
क्या “React में XSS: dangerouslySetInnerHTML और तृतीय-पक्ष स्क्रिप्ट” पाठ निःशुल्क है?
हाँ—“React में XSS: dangerouslySetInnerHTML और तृतीय-पक्ष स्क्रिप्ट” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“React में XSS: dangerouslySetInnerHTML और तृतीय-पक्ष स्क्रिप्ट” में मैं क्या सीखूँगा?
समझें कि React का डिफ़ॉल्ट एस्केपिंग XSS को कैसे रोकता है, dangerouslySetInnerHTML कब खतरनाक होता है और तृतीय-पक्ष स्क्रिप्ट जोखिम कैसे लाती हैं। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“React में XSS: dangerouslySetInnerHTML और तृतीय-पक्ष स्क्रिप्ट” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- React में XSS: dangerouslySetInnerHTML और तृतीय-पक्ष स्क्रिप्ट
- React और API सेटअप में CSRF सुरक्षा
- React ऐप्स के लिए कंटेंट सिक्योरिटी पॉलिसी
- सीक्रेट प्रबंधन और पर्यावरण चर