रिएक्ट तत्वों की $ $ टाइपो संपत्ति क्यों है?

XSS के लिए JSON इंजेक्शन की संभावना को रोकने के लिए प्रतिक्रिया तंत्र के बारे में, और सामान्य कमजोरियों से बचने के बारे में।

आप सोच सकते हैं कि आप JSX लिख रहे हैं:

<marquee bgcolor="#ffa7c4">hi</marquee> 

लेकिन वास्तव में आप समारोह को बुला रहे हैं:

 React.createElement( /* type */ 'marquee', /* props */ { bgcolor: '#ffa7c4' }, /* children */ 'hi' ) 

और यह फ़ंक्शन आपको एक नियमित वस्तु देता है जिसे प्रतिक्रिया तत्व कहा जाता है। तदनुसार, सभी घटकों का पता लगाने के बाद, समान वस्तुओं का एक पेड़ प्राप्त किया जाता है:

 { type: 'marquee', props: { bgcolor: '#ffa7c4', children: 'hi', }, key: null, ref: null, $$typeof: Symbol.for('react.element'), } 

यदि आपने पहले React का उपयोग किया है, तो आप फ़ील्ड्स, प्रॉप्स, की और टाइप रिफ से परिचित हो सकते हैं। लेकिन $$typeof संपत्ति क्या है? और इसका प्रतीक Symbol() इसके मूल्य के रूप में क्यों है?

UI लाइब्रेरी लोकप्रिय होने से पहले, एप्लिकेशन कोड में क्लाइंट इनपुट प्रदर्शित करने के लिए, HTML मार्कअप वाली एक लाइन जेनरेट की गई थी और उसे सीधे DOM के माध्यम से सम्मिलित किया गया था, भीतर से HTML:

 const messageEl = document.getElementById('message'); messageEl.innerHTML = '<p>' + message.text + '</p>'; 

यह तंत्र तब तक ठीक काम करता है जब तक कि message.text <img src onerror="stealYourPassword()"> । तदनुसार, हम निष्कर्ष निकालते हैं कि आपको HTML मार्कअप के रूप में सभी क्लाइंट इनपुट की व्याख्या करने की आवश्यकता नहीं है।

इस तरह के हमलों से बचाने के लिए, आप सुरक्षित एपीआई जैसे document.createTextNode() textContent document.createTextNode() या textContent उपयोग कर सकते हैं, जो टेक्स्ट की व्याख्या नहीं करते हैं। और एक अतिरिक्त उपाय के रूप में, संभावित खतरनाक अक्षरों जैसे < , > को सुरक्षित रखने के द्वारा स्ट्रिंग को छोड़ दें।

फिर भी, त्रुटि की संभावना अधिक है, क्योंकि यह उन सभी स्थानों को ट्रैक करना मुश्किल है, जहां आप अपने पृष्ठ में उपयोगकर्ता द्वारा दर्ज की गई जानकारी का उपयोग करते हैं। यही कारण है कि आधुनिक पुस्तकालय जैसे रिएक्ट किसी भी डिफ़ॉल्ट पाठ के साथ सुरक्षित रूप से काम करते हैं:

 <p> {message.text} </p> 

यदि message.text एक <img> साथ एक दुर्भावनापूर्ण स्ट्रिंग है, तो यह वास्तविक <img> में नहीं बदलेगा। प्रतिक्रिया पाठ सामग्री से बच जाती है और फिर इसे DOM में जोड़ देती है। इसलिए, <img> देखने के बजाय, आप बस इसके मार्कअप को एक स्ट्रिंग के रूप में देखते हैं।

प्रतिक्रियाशील तत्व के अंदर मनमाने ढंग से HTML प्रदर्शित करने के लिए, आपको निम्न निर्माण का उपयोग करना होगा: dangerouslySetInnerHTML={{ __html: message.text }} । डिजाइन जानबूझकर असहज है। इसकी बेरुखी के कारण, यह अधिक ध्यान देने योग्य हो जाता है, और कोड को देखते समय ध्यान आकर्षित करता है।

क्या इसका मतलब यह है कि रिएक्ट पूरी तरह से सुरक्षित है? नहीं। HTML और DOM के आधार पर कई ज्ञात हमले के तरीके हैं। टैग विशेषताएँ विशेष ध्यान देने योग्य हैं। उदाहरण के लिए, यदि आप <a href={user.website}> , तो आप एक दुर्भावनापूर्ण कोड को पाठ लिंक के रूप में स्थानापन्न कर सकते हैं: 'javascript: stealYourPassword()' ।

ज्यादातर मामलों में, क्लाइंट साइड पर कमजोरियों की उपस्थिति सर्वर साइड पर समस्याओं का परिणाम है, और इसे सबसे पहले ठीक किया जाना चाहिए।

हालाँकि, कस्टम पाठ सामग्री का सुरक्षित प्रदर्शन रक्षा की एक उचित पहली पंक्ति है जो कई संभावित हमलों को दर्शाता है।

पिछले विचारों के आधार पर, हम यह निष्कर्ष निकाल सकते हैं कि निम्नलिखित कोड पूरी तरह से सुरक्षित होना चाहिए:

 //   <p> {message.text} </p> 

लेकिन ऐसा नहीं है। और यहां हम रिएक्ट तत्व में $$typeof की उपस्थिति की व्याख्या करने के करीब पहुंचते हैं।

जैसा कि हमने पहले बताया, प्रतिक्रिया तत्व सरल वस्तु हैं:

 { type: 'marquee', props: { bgcolor: '#ffa7c4', children: 'hi', }, key: null, ref: null, $$typeof: Symbol.for('react.element'), } 

आमतौर पर, एक प्रतिक्रिया तत्व को React.createElement() फ़ंक्शन को कॉल करके बनाया जाता है, लेकिन आप इसे तुरंत एक शाब्दिक रूप से बना सकते हैं, जैसा कि मैंने अभी ऊपर किया था।

मान लीजिए कि हम सर्वर पर एक स्ट्रिंग संग्रहीत करते हैं जिसे उपयोगकर्ता ने पहले हमें भेजा था, और हर बार जब हम इसे क्लाइंट पक्ष पर प्रदर्शित करते हैं। लेकिन किसी ने, एक स्ट्रिंग के बजाय, हमें JSON भेजा:

 let expectedTextButGotJSON = { type: 'div', props: { dangerouslySetInnerHTML: { __html: '/*     */' }, }, // ... }; let message = { text: expectedTextButGotJSON }; //    React 0.13 <p> {message.text} </p> 

यानी, अपेक्षित स्ट्रिंग के बजाय, अचानक, अपेक्षित TextButGotJSON चर का मान JSON निकला। जिसे रिएक्ट द्वारा एक शाब्दिक के रूप में संसाधित किया जाएगा, और जिससे दुर्भावनापूर्ण कोड निष्पादित किया जाएगा।

प्रतिक्रिया 0.13 XSS जैसे हमले के लिए असुरक्षित है, लेकिन संस्करण 0.14 के साथ शुरू, प्रत्येक तत्व एक प्रतीक के साथ चिह्नित है:

 { type: 'marquee', props: { bgcolor: '#ffa7c4', children: 'hi', }, key: null, ref: null, $$typeof: Symbol.for('react.element'), } 

ऐसे संरक्षण कार्य करते हैं क्योंकि वर्ण मान्य JSON मान नहीं हैं। इसलिए, भले ही सर्वर में संभावित भेद्यता हो और पाठ के बजाय JSON लौटाता हो, JSON में Symbol.for('response.element') नहीं हो सकता। प्रतिक्रिया तत्व के लिए element.$$typeof जाँच करता है element.$$typeof गायब होने या अमान्य होने पर तत्व को संसाधित करने से इनकार करता है।

Symbol.for() का मुख्य लाभ यह है कि प्रतीक संदर्भों के बीच वैश्विक हैं क्योंकि वे एक वैश्विक रजिस्ट्री का उपयोग करते हैं। यह एक iframe में भी समान रिटर्न वैल्यू सुनिश्चित करता है। और यहां तक ​​कि अगर पृष्ठ पर प्रतिक्रिया की कई प्रतियां हैं, तो वे अभी भी $$typeof एक मूल्य के माध्यम से "मैच अप" करने में सक्षम होंगे।

उन ब्राउज़रों के बारे में जो वर्णों का समर्थन नहीं करते हैं?

काश, वे ऊपर चर्चा की गई अतिरिक्त सुरक्षा को लागू करने में सक्षम नहीं होंगे, लेकिन प्रतिक्रिया तत्वों में अभी भी स्थिरता के लिए $$typeof संपत्ति होगी, लेकिन यह सिर्फ एक संख्या होगी - 0xeac7 ।

ठीक 0xeac7 क्यों? क्योंकि यह रिएक्ट जैसा दिखता है।