डेवलपर टूल · URL एनकोडर और डिकोडर
encodeURI बनाम encodeURIComponent: प्रत्येक कौन सा अक्षर अकेला छोड़ देता है
· यह काम किस प्रकार करता है
URL एन्कोडिंग जावास्क्रिप्ट डेवलपर-वर्कफ़्लो
दो JavaScript फ़ंक्शन बिल्कुल ग्यारह वर्णों से भिन्न होते हैं, और गलत को चुनने से या तो URL टूट जाता है या मान बच नहीं पाता है। यह पोस्ट सेटों का वर्णन करती है और एक नियम देती है जिसे आप याद रख सकते हैं।
वह खोज जिसने सब कुछ लौटा दिया क्योंकि 'R&D' में & ने क्वेरी को विभाजित कर दिया - गलत फ़ंक्शन से एक ठोस बग
यदि कोड हाथ से ?q=R&D बनाता है तो R&D की खोज गलती से R के परिणाम लौटा सकती है। एम्परसेंड क्वेरी पैरामीटर के बीच एक विभाजक है; जब तक आप मान को एन्कोड नहीं करते, इसे q के भाग के रूप में संरक्षित नहीं किया जाता है। उस छोटे से टुकड़े के लिए एनकोडयूआरआई चुनना त्रुटि है, सर्वर बग नहीं। एप्लिकेशन कोड में सबसे सुरक्षित विकल्प अक्सर URLSearchParams होता है, लेकिन दो JavaScript प्राइमिटिव को समझने से मौजूदा कोड को डीबग करना बहुत आसान हो जाता है।
दोनों फ़ंक्शन क्या साझा करते हैं - अनारक्षित सेट जिसे वे कभी नहीं छूते हैं और UTF-8 प्रतिशत-एन्कोडिंग जो वे दोनों लागू करते हैं
दोनों विधियाँ ASCII अक्षर, अंक और अनारक्षित विराम चिह्न - _ छोड़ती हैं। ! ~ * ' ( ) JavaScript के एन्कोडिंग नियमों से अछूता है। वे प्रतिशत त्रिक लिखने से पहले गैर-ASCII वर्णों को UTF-8 बाइट्स में परिवर्तित करते हैं: é %C3%A9 बन जाता है, एक भी लैटिन-1 byte नहीं। वे किसी स्थान को %20 के रूप में एन्कोड भी करते हैं। प्रतिशत-एन्कोडिंग URI की संरचना को संरक्षित करने के बारे में है; यह HTML से बचना, इनपुट सत्यापन या प्राप्तकर्ता पेज पर दुर्भावनापूर्ण स्क्रिप्ट के विरुद्ध सुरक्षा नहीं है।
ग्यारह अक्षर केवल एनकोडयूआरआई संरक्षित करता है -; , / ? : @ & = + $ # और URL में प्रत्येक का संरचनात्मक अर्थ क्यों है
encodeURI अतिरिक्त रूप से ग्यारह संरचनात्मक वर्णों को संरक्षित करता है जो encodeURIComponent एनकोड करता है: ; , / ? : @ & = + $ #। संपूर्ण पते के लिए, स्लैश और प्रश्न चिह्न को अकेला छोड़ने से इसका पथ और क्वेरी सिंटैक्स सुरक्षित रहता है। एक क्वेरी मान के लिए, & या = को देने से पैरामीटर सूची बदल जाएगी, जबकि एक अनएस्केप्ड # एक खंड शुरू कर सकता है। फ़ंक्शन सटीक रूप से भिन्न होते हैं क्योंकि एक पूरे पते के लिए होता है और दूसरा उस पते के अंदर एक घटक के लिए होता है।
एक नियम जो मानता है: मानों को एनकोडयूआरआईकंपोनेंट मिलता है, पूर्ण URL को एनकोडयूआरआई मिलता है - और क्यों 'पूर्ण URL' जितना लगता है उससे कहीं अधिक दुर्लभ है
मान लगभग हमेशा encodeURIComponent प्राप्त करते हैं; पूर्ण, पहले से संरचित पते एनकोडयूआरआई के लिए कम आम मामले हैं। URL के लिए आप प्रोग्रामेटिक रूप से निर्माण कर रहे हैं, एन्कोडेड और कच्चे टुकड़ों के मिश्रण को संयोजित करने के बजाय पथ और खोज मापदंडों को संभालने के लिए URL API का उपयोग करें। संपूर्ण URL को encodeURIComponent के साथ एनकोड न करें और फिर स्लैश और कोलन से विभाजक के रूप में व्यवहार करने की अपेक्षा करें। इसके विपरीत, किसी उपयोगकर्ता के क्वेरी शब्द को एनकोडयूआरआई के माध्यम से फ़ीड न करें और उसके एम्परसेंड को सक्रिय छोड़ दें।
कार्यान्वित उदाहरण: दोनों कार्यों के माध्यम से एक ही स्ट्रिंग - रिक्त स्थान, &, / और एक उच्चारण के साथ एक मान के लिए आउटपुट की एक तालिका
R&D/café को एक क्वेरी मान के रूप में लें। encodeURIComponent एम्परसेंड और स्लैश की सुरक्षा करते हुए R%26D%20%2F%20caf%C3%A9 लौटाता है। encodeURI संरचनात्मक विराम चिह्न को संरक्षित करते हुए R&D%20/%20caf%C3%A9, लौटाता है; एक भोला ?q= उपसर्ग अब एक अनपेक्षित सीमांकक बनाएगा। दोनों स्थान और उच्चारण को कूटबद्ध करते हैं, इसलिए केवल "हैलो वर्ल्ड" का उपयोग करने वाला परीक्षण महत्वपूर्ण अंतर से चूक जाता है। ToolAcre में जेनरेट की गई स्ट्रिंग्स की तुलना करें, फिर उन्हें URL पार्सर में पेस्ट करें और जांचें कि कितने क्वेरी पैरामीटर दिखाई देते हैं।
सामान्य गलतियाँ - पूर्ण URL को encodeURIComponent के साथ एन्कोड करना, और गलत समकक्ष के साथ डिकोड करना
पूर्ण URL को एक घटक के रूप में एन्कोड करने से %3A%2F%2F उत्पन्न होता है, जहां एक उपभोक्ता को उम्मीद थी://. मान्य करने से पहले पूरे पते को डिकोड करने से आरक्षित विभाजकों को नए अर्थों के साथ फिर से प्रस्तुत किया जा सकता है। इसके अलावा पहले से ही %26 वाले मान को डबल-एन्कोडिंग करने से बचें: प्रतिशत चिह्न स्वयं %25 बन सकता है, इसलिए दूसरी डिकोड परत फिर से अर्थ बदल सकती है। एक घटक के लिए encodeURIComponent को decodeURIComponent के साथ जोड़ें और विकृत प्रतिशत एस्केप को इनपुट त्रुटियों के रूप में मानें।
इसमें क्या शामिल नहीं है - + के साथ फॉर्म एन्कोडिंग, और URLSearchParams के साथ URL बनाना
HTML फॉर्म क्वेरी एन्कोडिंग एप्लिकेशन में एक स्थान के लिए प्लस चिह्न का उपयोग करती है/x-www-form-urlencoded, जो इन दो फ़ंक्शन के %20 आउटपुट से अलग है। URLSearchParams आपके लिए उन फॉर्म नियमों को संभालता है। यह आलेख पथ सामान्यीकरण, यूनिकोड होस्टनाम रूपांतरण या यह तय करने पर चर्चा नहीं करता है कि डिकोड किया गया URL अनुरोध करने के लिए सुरक्षित है या नहीं; URL एन्कोडिंग एक प्रतिनिधित्व कदम है, प्राधिकरण नीति नहीं।
टेकअवे: भागों को एनकोड करें, पूरे को नहीं - कैसे URL एनकोडर और डिकोडर दोनों मोड दिखाते हैं ताकि आप अपने इनपुट पर अंतर देख सकें
यादगार सीमा भाग बनाम संपूर्ण है: एक पैरामीटर मान एक भाग है, इसलिए encodeURIComponent या URLSearchParams का उपयोग करें। URL एनकोडर और डिकोडर एक ही स्ट्रिंग के लिए दोनों ब्राउज़र फ़ंक्शन दिखाता है और प्रयोग को स्थानीय रखता है। यह निर्णय लेने से पहले कि दो एनकोडर विनिमेय हैं, &, =, #, स्लैश और एक एक्सेंट वाले इनपुट का परीक्षण करें।