🔧 🖕🏼 👩🏼‍✈️ WebView के दो पहलू: परियोजनाओं की त्वरित शुरुआत और व्यक्तिगत डेटा की चोरी के बारे में 🤱🏼 👐🏼 🐨

नमस्कार, हेब्र!

मेरा नाम यूजीन है, मैं फुल स्टैक JS डेवलपर हूं, वर्तमान स्टैक Node.js + React + React Native है। मैं 10 वर्षों से विकास में हूं। मोबाइल विकास में मैंने कॉर्डोवा से रिएक्ट नेटिव के विभिन्न उपकरणों की कोशिश की। कार्डोवा के साथ अनुभव प्राप्त करने के बाद, मुझे एहसास हुआ कि मैं मूल इंटरफेस बनाना चाहूंगा, मेरी राय में वेबव्यू पूरे आवेदन नहीं होना चाहिए। लेकिन इसका मतलब यह नहीं है कि इसका उपयोग बिल्कुल भी नहीं किया जाना चाहिए।

Sberbank के सहयोगियों के निमंत्रण पर, इस पोस्ट में मैं हाइब्रिड मोबाइल एप्लिकेशन के बारे में बात करना चाहता हूं। सही दृष्टिकोण के साथ, यह एक अच्छी तरह से काम करने वाले उत्पाद के विचार को जल्दी से लागू करने का एक शानदार तरीका है, जो आपके स्टार्टअप के पहले लॉन्च के लिए पर्याप्त है।

स्त्रोत: srishta.com

मैं आपको इस बारे में भी बताऊंगा कि आप कैसे WebView का उपयोग कर सकते हैं और हमलावर आपके खिलाफ इसका उपयोग कैसे कर सकते हैं। लेख में उदाहरणों को रिएक्टिव नेटिव फ्रेमवर्क का उपयोग करके दिखाया जाएगा, लेकिन समान विचारों को इसके बिना लागू किया जा सकता है।

स्टार्टअप के बारे में थोड़ा सा

मैं हमारे देश और पश्चिम में स्टार्टअप शुरू करने के बुनियादी अंतरों के साथ शुरू होता हूं, मैं आपको बताऊंगा कि वेबव्यू यहां कैसे मदद कर सकता है, मैं वेब और देशी तत्वों की बातचीत के काम के उदाहरण और साथ ही तीसरे पक्ष के अनुप्रयोगों के साथ बातचीत करने के लिए सुरक्षा के सुझाव दूंगा।

एक नियम के रूप में, स्टार्टअप के सफल होने के लिए, इसे जल्दी से शुरू करने की आवश्यकता है। यदि आप समय गंवाते हैं, तो आपके प्रतियोगी आपको बायपास कर देंगे। यह हमारे देश और पश्चिम दोनों में समझा जाता है। लेकिन एक नियम के रूप में, लॉन्च करने के लिए रूसी दृष्टिकोण बहुत अधिक गहन है - शब्द के बुरे अर्थ में।

सभी असफल रूसी स्टार्टअप लगभग उसी परिदृश्य में शुरू और विकसित होते हैं। सबसे आम गलतियाँ सॉफ्टवेयर उत्पाद विकास की रणनीतिक योजना से संबंधित हैं। प्रबंधन सोचता है कि सभी कार्यक्षमता और सभी बारीकियों के 110% कार्यान्वयन के बाद ही लॉन्च संभव है। इस दृष्टिकोण के साथ, एक बजट घाटा जल्दी से उत्पन्न होता है, क्योंकि विकास की लागत अधिक होती है, और स्टार्टअप से कोई आय नहीं होती है। अतिरिक्त निवेश, अनुमोदन और संशोधन के एक अंतहीन चक्र की खोज में बहुत समय लगता है, उत्पाद प्रतियोगी में दिखाई देता है। बस, मैराथन हार गया।

यूरोपीय और अमेरिकी स्टार्टअप अलग तरह से काम करते हैं। शुरुआत के लिए, वे केवल न्यूनतम न्यूनतम कार्यात्मक भाग के साथ मोबाइल वेब संस्करण तक सीमित हैं। इसे डेस्कटॉप और मोबाइल डिवाइस दोनों से देखा जा सकता है। और इस स्तर पर परियोजना शुरू करने के लिए तैयार है! लॉन्च के बाद, मोबाइल उपकरणों के लिए आवेदन किया जाता है।

एक नियम के रूप में, एप्लिकेशन वेब संस्करण से बुनियादी सुविधाओं में भिन्न नहीं होता है। यह उपयोगकर्ता के साथ बातचीत की संभावनाओं का विस्तार करता है, उदाहरण के लिए, पुश सूचनाओं के माध्यम से। यह दृष्टिकोण मुख्य स्थिति की पूर्ति सुनिश्चित करता है - त्वरित शुरुआत, त्वरित पहला लाभ। पहले चरण के राजस्व को विकास में निवेश किया जा सकता है। भविष्य में, परियोजना को बढ़ाया जा सकता है और बजट घाटे के बिना वांछित के रूप में विकसित किया जा सकता है, जिससे नई कार्यक्षमता को जोड़ने और उपयोगकर्ता इंटरफ़ेस को विकसित करने के लिए एक पुनरावृत्त दृष्टिकोण का प्रदर्शन किया जा सकता है।

मैं मंच पर अधिक विस्तार से विचार करने का प्रस्ताव करता हूं जब साइट का एक मोबाइल संस्करण पहले से ही है और आपको मोबाइल उपकरणों के लिए एक एप्लिकेशन विकसित करने की आवश्यकता है। इसलिए, हमने एक साइट बनाई, जिसका अर्थ है कि हम सर्वर एपीआई, इंटरफ़ेस और व्यावसायिक तर्क विकसित कर रहे थे। दो तीन घटक हैं
- इंटरफ़ेस और तर्क - मोबाइल एप्लिकेशन में मौजूद हैं। सहमत हूँ, मैं उन्हें फिर से लिखना नहीं चाहता।

देशी और वेब अनुप्रयोगों का सबसे अच्छा संयोजन

देशी अनुप्रयोगों को विकसित करने पर ध्यान केंद्रित उपकरण हैं। अन्य वेब के लिए हैं। देशी अनुप्रयोगों का लाभ यह है कि वे फोन की पूर्ण कार्यात्मक क्षमता का उपयोग कर सकते हैं। लेकिन वेब अनुप्रयोगों की तुलना में उन्हें विकसित करना काफी मुश्किल है। वेब एक आसान शुरुआत प्रदान करता है, लेकिन एप्लिकेशन की क्षमताओं को बहुत सीमित करता है।

* वेब एप्लिकेशन की टॉटोलॉजी को कम करने के लिए, मैं मोबाइल एप्लिकेशन, लॉजिक और इंटरफ़ेस के थोक को ब्राउज़र की तरफ से लागू करूंगा।

WebView घटक का उपयोग करके बनाए गए हाइब्रिड एप्लिकेशन देशी अनुप्रयोगों और वेब के सभी लाभों के संयोजन की अनुमति देते हैं। बेशक, ऐसे सावधानीपूर्वक डेवलपर्स हैं जो स्पष्ट रूप से वेबव्यू के खिलाफ अपनी किसी भी अभिव्यक्ति में हैं। वे इस तथ्य के साथ तर्क देते हैं कि आवेदन तुरंत पूरी तरह से मूल होना चाहिए, ताकि आप एक मोबाइल डिवाइस की सभी सुविधाओं का उपयोग कर सकें, साथ ही साथ सहज उपयोगकर्ता इंटरफ़ेस प्रदर्शन प्रदान कर सकें। लेकिन कई मामलों में, जब साइट के मोबाइल संस्करण की क्षमताएं काफी होती हैं, तो आप हाइब्रिड एप्लिकेशन बनाकर पहले लॉन्च के समय को कम कर सकते हैं, और धीरे-धीरे इसे एक देशी के साथ बदल सकते हैं।

हाइब्रिड एप्लिकेशन हमेशा ख़राब नहीं होते हैं और एक्सटेंसिबल नहीं होते हैं। वे सुविधाजनक और उत्पादक हो सकते हैं। उचित उपयोग के साथ, यह दृष्टिकोण गुणवत्ता आवेदन विकसित करने के लिए पर्याप्त समय पाने में मदद करता है, और जल्दबाजी में मूल आवेदन जारी नहीं करने के लिए।

ऐसी कई स्थितियां हैं जिनमें हाइब्रिड अनुप्रयोगों का उपयोग करना उचित है। वे एक त्वरित शुरुआत के लिए एक अस्थायी ठूंठ के रूप में अच्छे हैं - जब हमारे पास तैयार साइट का एक मोबाइल संस्करण है, और मोबाइल एप्लिकेशन को "कल" की आवश्यकता थी। ऐसा एप्लिकेशन कुछ घंटों में बनाया जा सकता है, उत्पादन में चलाया जा सकता है। उपयोगकर्ताओं के पास मोबाइल एप्लिकेशन के साथ काम करने का अवसर होगा, और आपके पास कम तंग समय सीमा (यदि आवश्यक हो) में अधिक पूर्ण संस्करण पर काम करने का अवसर होगा।

यहाँ एक उदाहरण है। हाल ही में, सहकर्मियों को तत्काल एक मोबाइल एप्लिकेशन की आवश्यकता थी। वेब संस्करण में, इसमें आठ मेनू आइटम थे, और हमने उन्हें वेब व्यू के माध्यम से प्रदर्शित किया। और फिर उन्होंने एक आइटम को बदल दिया। यह एक या तीन महीने में नहीं, बल्कि कुछ ही दिनों में आवेदन जारी करने के लिए हुआ। बाद में धीरे-धीरे इसे मूल में स्थानांतरित कर दिया।

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

वेबव्यू का उपयोग कैसे करें

एक लोकप्रिय स्क्रिप्ट ले लो। हम साइट के मोबाइल संस्करण और मूल मेनू का उपयोग करना चाहते हैं। हम एक मेनू के साथ एक मूल एप्लिकेशन बनाते हैं, लेकिन सामग्री के बजाय, हम वेबवे के माध्यम से साइट के मोबाइल संस्करण को कनेक्ट करते हैं (अब तक बिना किसी बदलाव के)।

Gif पर आप 2 मेनू देख सकते हैं। सही मेनू साइट का हिस्सा है, जिसे वेब पर लागू किया गया है, बाईं ओर मूल मेनू है, जिसे मोबाइल एप्लिकेशन के अंदर लागू किया गया है। देशी एप्लिकेशन के लिए पहला अनुमान प्राप्त करने के लिए, हमें बस वेब पर लागू होने वाले मेनू को छिपाने की आवश्यकता है। यहाँ WebView के माध्यम से एप्लिकेशन के अंदर वेब संस्करण प्रदर्शित करने के लिए कितना कोड आवश्यक है:

export default (props) => (  <Layout {...props} name="Example1">    <WebView source={{uri: '<a href="https://provincehotels.ru/">https://provincehotels.ru/</a>'}} style={{flex:1}} />  </Layout> );

अगला उदाहरण यह है कि मूल भाग वेब के साथ कैसे इंटरैक्ट कर सकता है।

कैनवस पर रोबोट तैयार किया गया है, यह वेबसाइट का हिस्सा है। और उस पर स्विच देशी UI पर बनाया गया है। यह अलग-अलग फोन पर अलग दिखेगा। हम एक स्विच का उपयोग करके रोबोट के आंदोलनों को नियंत्रित कर सकते हैं। आप और इसके विपरीत - आवेदन को प्रभावित करने के लिए वेब इंटरफ़ेस के कुछ तत्वों के साथ कर सकते हैं। रिएक्ट नेटिव इसके लिए वेब और देशी हिस्से के बीच बातचीत के लिए एक विशेष एपीआई प्रदान करता है।

नीचे इस एनीमेशन का उपयोग करने के लिए कोड है। लेआउट - सभी स्थान। पिकर एक देशी हिस्सा है जो रोबोट की स्थिति के लिए ड्रॉपडाउन विकल्पों में से चुन सकता है। WebView - वेब प्रदर्शित करने के लिए एक कंटेनर, जिसके अंदर एक रोबोट बनाया गया है।

 const states = [ 'Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing' ]; const uri = 'https://artexoid.ru/181212/example2/'; export default class Example2 extends React.Component { myWebView = React.<i>createRef</i>(); state = {   robot: states[0] }; render() {   return (     <Layout { ...this.props } name="Example2">       <Picker         mode="dropdown"         selectedValue={this.state.robot}         onValueChange={(item) => {           this.setState({robot: item});           this.myWebView.current.postMessage(item);         }}       >         {states.map((item => <Picker.Item key={item} label={item} value={item} /> ))}       </Picker>       <WebView ref={this.myWebView} source={{uri}} style={{flex:1}} />     </Layout>   ); } }

ऐसे मामले अक्सर सामने आते हैं। उदाहरण के लिए, हमने दंत चिकित्सकों के परीक्षण और प्रमाणन के लिए एक आवेदन किया। परीक्षण में प्रत्येक उत्तर के लिए, वेब पर कैनवस का उपयोग करके लागू किए गए सवालों के अंदर एनीमेशन तैयार किया गया था। इस परीक्षण के साथ एक मोबाइल एप्लिकेशन बनाने की चुनौती थी। WebView का उपयोग करते हुए, हम वेब से एनिमेशन प्रदर्शित करने में सक्षम थे, जबकि हमने शेष इंटरफ़ेस को मूल रूप से बनाया था। एनिमेशन ने पुराने स्मार्टफोन्स पर भी ठीक काम किया।

इंजेक्शन कैसे बनाए जाते हैं?

2013 तक, ओपेरा ब्राउज़र ने अपने स्वयं के प्रेस्टो इंजन का उपयोग किया था, लेकिन तब इसे Google से ब्लिंक इंजन में स्थानांतरित कर दिया गया था। कई उपयोगकर्ता बहुत परेशान हैं। वीडियो "क्यों ओपेरा वेबकिट" इस संक्रमण के कारणों पर प्रकाश डालता है। मुख्य अपराधी Google या फेसबुक जैसे बड़े निगम हैं, जिन्होंने ओपेरा में अपने उत्पादों के कोड का परीक्षण नहीं किया और इस ब्राउज़र में पृष्ठों के प्रदर्शन को मना किया, इस तथ्य का हवाला देते हुए कि यह उपयोगकर्ताओं के साथ पर्याप्त लोकप्रिय नहीं है।

उदाहरण के लिए, आप ओपेरा के माध्यम से जीमेल पर जाते हैं और आप देखते हैं: "जावास्क्रिप्ट त्रुटि।" आप समर्थन करने के लिए लिखते हैं, आपको जवाब मिलता है: "ओपेरा हमारे साथ समर्थित नहीं है, हम इसके लिए कोड नहीं लिखेंगे।" सबसे पहले, ओपेरा ने डेवलपर्स को इंजेक्शन लिखने के लिए काम पर रखा, एक विशेष कोड जो जीमेल में एम्बेडेड था और इसे ओपेरा में काम करने की अनुमति दी। लेकिन धीरे-धीरे जीमेल जैसी साइट्स बड़ी होती गईं। ओपेरा ने इंजन छोड़ दिया और बदल दिया।

तो मैं किस बारे में बात कर रहा हूं? आह हाँ, यह इंजेक्शन के बारे में बात करने का समय है:

जीआईएफ पर - एक इंजेक्शन का एक उदाहरण जो साइटों के व्यवहार को बदलता है। मान लीजिए कि हमारे पास किसी और की साइट है, और हम शैलियों का एक इंजेक्शन करते हैं - हम सही मेनू और स्लाइडर को छिपाते हैं जो दाईं ओर निकलता है। यह शैलियों का एक इंजेक्शन है। साइट का तर्क नहीं बदलता है, केवल प्रदर्शन।

 const addStyles=` const newCSS = 'div[class*=svgHamburger],div[class*=drawerPanel] { display: none !important; }'       head = document.head || document.getElementsByTagName('head')[0],       style = document.createElement('style'); style.type = 'text/css'; style.appendChild(document.createTextNode(newCSS)); head.appendChild(style); `; const uri = 'https://provincehotels.ru/'; export default (props) => ( <Layout { ...props } name="Example1">   <WebView source={{uri }} style={{flex:1}} injectedJavaScript={addStyles} javaScriptEnabled={true} /> </Layout> );

हरे रंग में लिखा कोड इंजेक्शन है। यह तत्वों को छुपाता है, आप उन पर क्लिक नहीं कर सकते, आप उनके साथ बातचीत नहीं कर सकते। यह वेब नियंत्रण के बिना, पूरी तरह से मूल अनुप्रयोग की तरह दिखता है।

अगला इंजेक्शन अधिक दिलचस्प है। मान लें कि हमारे पास एक मोबाइल एप्लिकेशन है, और इसमें एक अंतर्निहित मोबाइल ब्राउज़र है।

एक व्यक्ति लिंक का अनुसरण करता है, और हम उसे आसानी से फेसबुक पेज के साथ प्रतिस्थापित करते हैं जिसमें आपको उपयोगकर्ता नाम और पासवर्ड दर्ज करने की आवश्यकता होती है। यदि कोई व्यक्ति इसमें प्रवेश करता है, तो आवेदन इसे स्वीकार कर लेता है। यहाँ कोड है :

 const addScripts=` document   .querySelector('input[type=password]')   .addEventListener("change", (event) => alert(event.target.value)); `; const uri = 'https://www.facebook.com/'; export default (props) => ( <Layout { ...props } name="Example4">   <WebView source={{uri }} style={{flex:1}} injectedJavaScript={addScripts} javaScriptEnabled={true} /> </Layout> );

ऐसे कोड को लॉजिक इंजेक्शन कहा जाता है। आमतौर पर यह अधिक कठिन है, लेकिन ज्यादा नहीं। यही है, एक पासवर्ड चोरी नियंत्रण को छिपाने की तुलना में आसान है।

व्यामोह के मिनट: ब्राउज़र अनुप्रयोगों में एम्बेडेड

जैसा कि आप जानते हैं, कई एप्लिकेशन में अंतर्निहित ब्राउज़र (WebView) हैं - उदाहरण के लिए, VKontakte, Telegram, Gmail, WhatsApp और इतने पर। हम बड़ी कंपनियों पर भरोसा कर सकते हैं, लेकिन वेबव्यू का उपयोग बड़ी संख्या में सितारों और संदिग्ध लेखकों के साथ भी किया जाता है - उदाहरण के लिए, क्यूआर रीडर, फाइल मैनेजर, कैमरा शेल, आदि ... आप एप्लिकेशन इंस्टॉल करते हैं, इसके माध्यम से कोड पढ़ते हैं, लिंक पर क्लिक करते हैं। संवेदनशील डेटा दर्ज करें - और एप्लिकेशन, जैसा कि पिछले उदाहरण में दिखाया गया है, इसकी पहुंच है। और फिर आप यह ट्रैक नहीं कर सकते हैं कि यह डेटा कहाँ बहता है। इसलिए, लिंक खोलने के लिए, केवल विश्वसनीय ब्राउज़रों का उपयोग करें।

ऐसी साइटें हैं जो हर बार उपयोगकर्ता नाम और पासवर्ड का अनुरोध करती हैं। और ऐसे भी हैं जो ऐसा शायद ही कभी करते हैं - महीने में एक बार, साल में एक बार। अजीब तरह से पर्याप्त है, दूसरा विकल्प WebView के माध्यम से डेटा रिसाव के संदर्भ में सुरक्षित है। उदाहरण के लिए, आप साइट को कुछ बाएं ब्राउज़र से दर्ज करते हैं। साइट को एक उपयोगकर्ता नाम और पासवर्ड की आवश्यकता होती है, और यह आपको अजीब नहीं लगता है - यह हमेशा ऐसा करता है। और मामले में जब प्राधिकरण की आवश्यकता कभी-कभी होती है, तो यह आपको सावधान कर देगा।

दिलचस्प बात यह है कि टू-फैक्टर ऑथेंटिकेशन इस तरह के हमले से बचाव नहीं करता है - केवल पासवर्ड चोरी से। तथ्य यह है कि पुष्टि के बाद, आपकी प्रतिक्रिया में एक टोकन वापस किया जाता है, जो बदले में, पहले से ही दो-कारक प्राधिकरण नहीं है, और इसे रोकना आसान है। यही है, यदि आपने एक बार एसएमएस से लॉगिन और कोड दर्ज किया है, तो ब्राउज़र को एक टोकन प्राप्त होता है, जिसे बार-बार उपयोग किया जा सकता है। इस पुष्टि किए गए टोकन के साथ, वह वही कर सकता है जो वह चाहता है, उस समय के लिए जब तक टोकन प्रासंगिक रहता है। सामान्य तौर पर, अंतर्निहित ब्राउज़रों पर बहुत अधिक भरोसा नहीं करते हैं।

आप डेमो एप्लिकेशन के माध्यम से इस पद के उदाहरणों से परिचित हो सकते हैं। एंड्रॉइड ओएस पर आपको एक्सपो प्रोजेक्ट डाउनलोड करने की आवश्यकता है - जावास्क्रिप्ट और रिएक्ट नेटिव के साथ काम करने के लिए एक उपकरण। एक्सपो स्थापित करने के बाद, आपको केवल क्यूआर कोड पढ़ना होगा:

IOS डिवाइस अधिक जटिल हैं: Apple ने इस तरह से अनुप्रयोगों के वितरण पर प्रतिबंध लगा दिया है । तो जिज्ञासु को गीथहब पर स्रोत से एप्लिकेशन का निर्माण करना होगा। आपका ध्यान के लिए धन्यवाद!

WebView के दो पहलू: परियोजनाओं की त्वरित शुरुआत और व्यक्तिगत डेटा की चोरी के बारे में

स्टार्टअप के बारे में थोड़ा सा

देशी और वेब अनुप्रयोगों का सबसे अच्छा संयोजन

वेबव्यू का उपयोग कैसे करें

इंजेक्शन कैसे बनाए जाते हैं?

व्यामोह के मिनट: ब्राउज़र अनुप्रयोगों में एम्बेडेड

More articles: