डेवलपर टूल · URL एनकोडर और डिकोडर
URL कंस्ट्रक्टर आपके लिए क्या एनकोड करता है: ब्राउज़र का प्रतिशत-एनकोड सेट
· यह काम किस प्रकार करता है
URL एन्कोडिंग जावास्क्रिप्ट क्या बात है? वेब-एपिस
URL API चुपचाप कुछ वर्णों को प्रतिशत-एनकोड करता है और दूसरों को अकेला छोड़ देता है, यह इस पर निर्भर करता है कि वे URL के किस हिस्से में आते हैं। यह पोस्ट WHATWG एनकोड सेट और आउटपुट की भविष्यवाणी करने के तरीके के बारे में बताती है।
वह स्थान जो %20 और | बन गया वह रुक गया - एक ठोस मामला जहां नए URL() ने आंशिक रूप से एक पथ को एन्कोड किया
जब नया URL('https://example.com/hello वर्ल्ड') चलता है, तो स्पेस चुपचाप %20 बन जाता है। लेकिन नया URL('https://example.com/hello|world") पाइप को अछूता छोड़ देता है। यह अंतर यादृच्छिक नहीं है। WHATWG URL मानक प्रत्येक URL घटक के लिए एन्कोड करने के लिए अलग-अलग वर्ण सेट को परिभाषित करता है: पथ, क्वेरी, टुकड़ा और उपयोगकर्ता जानकारी प्रत्येक के अपने नियम हैं। इन सेटों को समझने का मतलब यह अनुमान लगाना है कि कंस्ट्रक्टर क्या करेगा।
स्थान को प्रतिशत-एन्कोडिंग की आवश्यकता है क्योंकि यह HTTP से अधिक असुरक्षित है और पठनीयता को तोड़ता है। पाइप अलग है: कोई आरक्षित वर्ण नहीं है जो संरचना को विभाजित करता है, इसलिए ब्राउज़र इसे अकेला छोड़ देता है। सुरक्षा और पठनीयता के बीच की रेखा WHATWG द्वारा खींची जाती है, अनुमान से नहीं। "हैलो वर्ल्ड" का परीक्षण एन्कोडिंग दिखाता है; "हैलो|वर्ल्ड" का परीक्षण प्रत्येक URL भाग की सीमाओं को प्रकट करता है।
एक URL, कई एन्कोड सेट - पथ, क्वेरी, फ़्रैगमेंट और उपयोगकर्ता जानकारी, प्रत्येक के पास बचने के लिए वर्णों की अपनी सूची होती है
एक URL में कई क्षेत्र होते हैं, प्रत्येक के अपने एन्कोडिंग नियम होते हैं। पथ एक सेट का अनुसरण करता है, दूसरे को क्वेरी करता है, तीसरे को खंडित करता है, उपयोगकर्ता जानकारी को चौथे को। पथ और क्वेरी में एक स्थान %20 बन जाता है। एक समान चिह्न क्वेरी में रहता है, जहां यह कुंजियों और मानों को अलग करता है, लेकिन encodeURIComponent इसे %3D में बदल देता है। URL कंस्ट्रक्टर इसके संदर्भ को जानता है और प्रत्येक भाग के लिए सही नियम लागू करता है।
एन्कोड सेट सटीक और छोटे हैं। पथ की अपनी वर्ण सूची होती है; क्वेरी में एक समान लेकिन भिन्न सूची है। यह दर्शाता है कि किन पात्रों का संरचनात्मक अर्थ है। फ़ॉरवर्ड स्लैश पथ खंडों को विभाजित करता है, इसलिए encodeURIComponent इसे %2F के रूप में एन्कोड करता है। टुकड़े में, बिना कुछ तोड़े एक फॉरवर्ड स्लैश मौजूद हो सकता है। WHATWG नियमों को समझने का अर्थ है बिना कोड चलाए आउटपुट की भविष्यवाणी करना।
प्रतिशत-एन्कोडिंग एकतरफ़ा क्यों है: जो एन्कोडेड रहता है वह उसी तरह रहता है
URL कंस्ट्रक्टर एकतरफा सामान्यीकरण करता है। "%20" को नए URL में पास करें और यह %20 अपरिवर्तित उत्पन्न करता है। कंस्ट्रक्टर इसे पहले से ही एन्कोडेड के रूप में पहचानता है और इसे अकेला छोड़ देता है। यही कारण है कि डबल-एन्कोडिंग मायने रखती है: एक बार एन्कोड करें, कंस्ट्रक्टर से गुजरें, और एन्कोडिंग स्टिक। कंस्ट्रक्टर डिकोड, पुनः व्याख्या और पुनः एनकोड नहीं करता है; यह आगे पढ़ता है.
यह एकतरफ़ा संपत्ति URL.href को विहित मानने वाले अनुप्रयोगों को प्रभावित करती है। यदि आप उपयोगकर्ता इनपुट को अपने पथ के साथ जोड़ते हैं, तो इनपुट सामान्य हो जाता है लेकिन डिकोड नहीं होता है। "my+file" जैसा मान वैसा ही रहता है, या कुछ संदर्भों में "my%2Bfile" बन जाता है। बाद में decodeURIComponent का उपयोग करने वाला कोड फॉर्म डेटा से प्लस को स्पेस के रूप में पढ़ सकता है। कंस्ट्रक्टर एक बार सामान्य हो जाता है; उसके बाद आपकी वैल्यू तय हो जाती है.
कारगर उदाहरण: नई URL() के माध्यम से उसी गन्दी स्ट्रिंग को पास करना और href, pathname और searchParams को पढ़ना - तीन अलग-अलग दृश्य
"हैलो वर्ल्ड&फू=बार|टेस्ट#एंकर" लें और इसे विभिन्न घटकों के साथ नए URL में डालें। हर जगह स्थान %20 हो जाता है। पथ में एम्परसेंड रहता है (वहां कोई संरचनात्मक अर्थ नहीं है), लेकिन क्वेरी में यह भी रहता है (पैरामीटर को अलग करता है, इसलिए सामान्यीकरण "q =" और "foo = bar" के बीच की सीमा खो देगा)। स्थान के अनुसार पाइप और हैश अलग-अलग व्यवहार करते हैं।
href, pathname और searchParams को पढ़ने से तीन अलग-अलग दृश्य दिखाई देते हैं। पथनाम योजना, होस्ट या क्वेरी के बिना एन्कोडेड पथ दिखाता है। searchParams डिकोडेड पैरामीटर देता है, इसलिए फॉर्म डेटा से "हैलो+वर्ल्ड" एक स्पेस बन जाता है। खोज गुण शाब्दिक स्ट्रिंग को सुरक्षित रखता है। href पूर्ण सामान्यीकृत URL दिखाता है। ये एक वस्तु पर सह-अस्तित्व में हैं; किसका उपयोग करना है यह आपके अगले कदम पर निर्भर करता है।
URLSearchParams और फॉर्म-एन्कोडिंग नियम - यह रिक्त स्थान के लिए + क्यों उत्पन्न करता है जबकि पथनाम %20 उत्पन्न करता है
URLSearchParams फॉर्म-एन्कोडिंग लागू करता है: स्पेस प्लस बन जाता है, %20 नहीं। नया URLSearchParams({q: "helloworld"}) "q=hello+world" उत्पन्न करता है, न कि "q=hello%20world"। यह ऐतिहासिक अनुप्रयोग/x-www-form-urlencoded नियम है। लेकिन यदि आप इस स्ट्रिंग को नई URL में कच्ची क्वेरी के रूप में पास करते हैं, तो प्लस प्लस ही रहता है; केवल URLSearchParams ही इसे स्पेस के रूप में डिकोड करता है। कंस्ट्रक्टर जो देखता है उसके प्रति वफादार होता है।
यह प्लस-चिह्न अंतर सामान्य बग का कारण बनता है। पता बार से URL रिक्त स्थान के लिए %20 का उपयोग करता है। प्रपत्र डेटा प्लस का उपयोग करता है। यदि आप URLSearchParams.get के बजाय decodeURIComponent (जो शाब्दिक रूप से प्लस पढ़ता है) के साथ डीकोड करते हैं, तो रिक्त स्थान प्लस वर्ण बन जाते हैं। URL एनकोडर और डिकोडर दोनों दिखाता है: "हैलो+वर्ल्ड" पेस्ट करें और स्पेस कहां दिखाई देता है यह देखने के लिए घटक और फॉर्म मोड की तुलना करें।
एनकोडयूआरआई के साथ तुलना - जहां दोनों सहमत हैं और जहां वे भिन्न हैं
URL कंस्ट्रक्टर और encodeURIComponent अलग-अलग टूल हैं। encodeURIComponent अनारक्षित अक्षरों, अंकों और - _ को छोड़कर लगभग सभी चीज़ों को एनकोड करता है। ! ~ * ' ( ). यह कोई संदर्भ नहीं मानता. URL कंस्ट्रक्टर वास्तविक URL को पार्स करता है और प्रति घटक WHATWG नियम लागू करता है। encodeURIComponent "hello/world" को "hello%2Fworld" में बदल देता है; नया URL स्लैश को पथ विभाजक के रूप में देखता है। वही इनपुट, अलग आउटपुट।
टुकड़ों को जोड़कर URL बनाते समय encodeURIComponent का उपयोग करें। पूर्ण या आंशिक URL के लिए URLSearchParams या URL कंस्ट्रक्टर का उपयोग करें। संपूर्ण URL पर encodeURIComponent का उपयोग न करें; आप इस योजना को ख़राब कर देंगे। परिणाम की तुलना इरादे से करें. ब्राउज़र URL संरचना राय लागू करता है, और नया URL उन्हें लागू करता है। URL एनकोडर और डिकोडर दोनों दृश्यों को एक साथ दिखाते हैं।
इसमें क्या शामिल नहीं है - होस्ट पार्सिंग, IDNA और विशेष बनाम गैर-विशेष योजनाएं
WHATWG URL मानक सत्य का स्रोत है, हालाँकि इसे पढ़ने के लिए धैर्य की आवश्यकता होती है। एन्कोड सेट को एल्गोरिथम अंशों में परिभाषित किया गया है, सामान्य सूचियों में नहीं। व्यवहार में, सेट को याद रखने की तुलना में सिद्धांत को समझना अधिक मायने रखता है। पथ अधिक वर्णों की अनुमति देता है (स्लैश संरचनात्मक हैं); क्वेरी के अपने नियम हैं; फ़्रैगमेंट पर सबसे कम प्रतिबंध हैं (क्लाइंट-साइड को संभाला जाता है, सर्वर पर कभी नहीं भेजा जाता है)। प्रत्येक घटक के अपने नियम हैं; यह जानना आपको बताता है कि कहाँ देखना है।
सामान्यीकरण और सत्यापन अलग-अलग सीमाएँ हैं। कंस्ट्रक्टर सामान्यीकृत करता है: प्रतिशत-एन्कोडिंग को साफ़ करता है, घटक नियम लागू करता है, विहित रूप देता है। यह मान्य नहीं है: अमान्य वर्ण फेंक दिए जाते हैं, लेकिन खाली होस्ट स्वीकार किए जाते हैं। निर्माता प्रारूप के बारे में सख्त है लेकिन व्याख्या के बारे में उदार है। सटीक विशिष्ट अनुपालन के लिए, WHATWG का प्रतिशत-एन्कोडेड बाइट्स अनुभाग पढ़ें। रोजमर्रा के निर्माण के लिए, URLSearchParams, URL API और वास्तविक उदाहरणों का उपयोग करें।
टेकअवे: पार्सर की राय है - कैसे URL एनकोडर और डिकोडर आपको किसी मान या पते का सादा प्रतिशत-एन्कोडिंग दिखाता है ताकि आप इसकी तुलना ब्राउज़र द्वारा उत्पादित चीज़ से कर सकें
यहां असमर्थित WHATWG सुविधाओं में IDNA रूपांतरण (अंतर्राष्ट्रीय डोमेन नाम ASCII) और विशेष बनाम गैर-विशेष योजना प्रबंधन के साथ होस्ट पार्सिंग शामिल है। फ़ाइल: URL डबल-स्लैश प्राधिकरण का उपयोग करते हैं; डेटा: URL नहीं है. कंस्ट्रक्टर इन नियमों को लागू करता है। होस्टनाम परिवर्तित करना और विशेष स्थिति निर्धारित करना स्पेक-रीडिंग से संबंधित है, न कि प्रतिशत-एन्कोडिंग से। विभिन्न योजनाओं में URL बनाते समय यह मायने रखता है।
अपेक्षाओं के साथ ब्राउज़र व्याख्या की तुलना करके अपने URL निर्माण का परीक्षण करें। नए URL के साथ निर्माण करें, उन गुणों को पढ़ें जो मायने रखते हैं: पूर्ण फॉर्म के लिए href, पथ के लिए पथनाम, कच्ची क्वेरी के लिए खोज, डिकोड किए गए के लिए searchParams। यदि आउटपुट आपको आश्चर्यचकित करता है, तो URL एनकोडर और डिकोडर में पेस्ट करें और चरण दर चरण परिवर्तन का पालन करें। टूल कच्चे एन्कोडिंग के साथ-साथ सामान्यीकृत आउटपुट दिखाता है, जिससे अंतर का पता चलता है। WHATWG सेट को समझने का अर्थ है ब्राउज़र विकल्पों को समझना और उनके साथ कैसे काम करना है।