डेवलपर टूल · Base64 एनकोडर और डिकोडर
डेटा यूआरआई ने समझाया: डेटा:image/png;base64 कैसे काम करता है और यह कहां से आया है
· पेजभूमि
Base64 एन्कोडिंग
डेटा: URL योजना को छोटे संसाधनों को सीधे एक पेज में एम्बेड करने के तरीके के रूप में 1998 में निर्दिष्ट किया गया था। यह पोस्ट इसके व्याकरण की व्याख्या करती है, Base64 वैकल्पिक क्यों है और ब्राउज़र कहाँ सीमाएँ खींचते हैं।
फ़ेविकॉन जो 1,300-अक्षर URL था - एक डेटा को पूरा कर रहा है: URI जंगल में और उसके हिस्सों को पढ़ रहा है
एक डेटा: URI एक छोटे संसाधन को सीधे URL में एम्बेड करता है, एक अलग HTTP अनुरोध से बचता है। प्रारूप RFC 2397 (1998 में परिभाषित) में निर्दिष्ट है और एक योजना, वैकल्पिक मीडिया प्रकार, वैकल्पिक एन्कोडिंग ध्वज और स्वयं पेलोड के साथ व्याकरण का उपयोग करता है। उदाहरण के लिए, data:text/plain,hello एक सादा-पाठ डेटा URI है जिसमें हैलो शब्द शामिल है। ब्राउज़र इसे उसी तरह संसाधित करता है जैसे वह HTTP अनुरोध को संसाधित करता है, लेकिन सामग्री को नेटवर्क पर लाने के बजाय, यह इसे URL से ही डीकोड करता है।
डेटा यूआरआई छोटी छवियों, CSS आइकन और परीक्षण फिक्स्चर के लिए सबसे आम हैं। एक डेटा: URI Base64 एन्कोडिंग के साथ इस तरह दिखता है: डेटा: छवि/png;base64,iVBORw0K.... ब्रेकडाउन है: डेटा: योजना है; image/png मीडिया प्रकार है; ;Base64 एन्कोडिंग ध्वज है; लंबी स्ट्रिंग Base64-एन्कोडेड छवि बाइट्स है। जब कोई ब्राउज़र इस URL को देखता है, तो यह मूल बाइट्स को पुनर्प्राप्त करने के लिए Base64 को डीकोड करता है, फिर उन बाइट्स का उपयोग करके छवि प्रस्तुत करता है।
किसी डेटा को उसके दृश्यमान व्याकरण से URI पढ़ना - मीडिया प्रकार, वैकल्पिक Base64 मार्कर और पेलोड
यदि एन्कोडिंग ध्वज हटा दिया गया है (डेटा: text/html,<p>hello</p>), तो पेलोड प्रतिशत-एन्कोडेड UTF-8 टेक्स्ट है, Base64 नहीं। ;Base64 की उपस्थिति ब्राउज़र को बताती है कि कौन सा डिकोडिंग नियम लागू करना है। डेटा में मीडिया प्रकार: URI एक MIME प्रकार है, उसी प्रकार की स्ट्रिंग का उपयोग HTTP सामग्री-प्रकार हेडर में किया जाता है। image/png, text/plain, application/json और image/svg+xml सामान्य उदाहरण हैं। यदि कोई मीडिया प्रकार निर्दिष्ट नहीं है, तो डिफ़ॉल्ट text/plain;charset=US-ASCII. है
ब्राउज़र को यह निर्धारित करना होगा कि मीडिया प्रकार के आधार पर बाइट्स को कैसे प्रस्तुत किया जाए: यदि यह image/png, कहता है तो बाइट्स PNG हैं; यदि यह text/html, कहता है तो सामग्री HTML है। गलत मीडिया प्रकार निर्दिष्ट करने से भ्रामक परिणाम उत्पन्न हो सकते हैं; text/plain के रूप में लेबल की गई PNG फ़ाइल छवि के बजाय कचरा वर्णों के रूप में प्रदर्शित होगी। डेटा में Base64 वैकल्पिक है: URI। पाठ सामग्री के लिए, प्रतिशत-एन्कोडिंग (URL क्वेरी स्ट्रिंग्स में प्रयुक्त समान एन्कोडिंग) अक्सर Base64 की तुलना में अधिक कॉम्पैक्ट होती है। एक डेटा URI उपभोक्ता यह तय करता है कि मीडिया प्रकार और अल्पविराम से पहले मार्कर से पेलोड की व्याख्या कैसे की जाए। Base64 एन्कोडर केवल पेलोड वर्णों की आपूर्ति करता है। यह MIME प्रकार नहीं जोड़ता है, चुनें कि क्या बाइट्स PNG या SVG का वर्णन करते हैं, या इकट्ठे पते को मान्य करते हैं।
Base64 वैकल्पिक क्यों है - SVG के लिए प्रतिशत-एन्कोडेड टेक्स्ट पेलोड और बाइनरी के लिए Base64 के मुकाबले सादा टेक्स्ट
URI data:text/html,<p>Hello</p> में HTML को शाब्दिक वर्णों के रूप में शामिल किया गया है (उद्धरण या कोण कोष्ठक जैसे किसी विशेष वर्ण के लिए प्रतिशत-एन्कोडिंग के साथ)। Base64 बाइनरी डेटा के लिए उपयोगी है जिसे टेक्स्ट के रूप में प्रस्तुत नहीं किया जा सकता है, और ऐसे मामलों के लिए जहां पेलोड में कई विशेष वर्ण होते हैं जो प्रतिशत-एन्कोडिंग फूल जाती है। एक छोटी SVG या एक टेक्स्ट फ़ाइल छोटी प्रतिशत-एन्कोडेड हो सकती है; एक बाइनरी फ़ाइल Base64 होनी चाहिए। हाथ से डेटा बनाना: URI के लिए मीडिया प्रकार और एन्कोडिंग को जानना आवश्यक है।
SVG आइकन के लिए, आप data:image/svg+xml का उपयोग कर सकते हैं, उसके बाद प्रतिशत-एनकोडेड SVG मार्कअप या ;Base64 और Base64-एनकोडेड बाइट्स का उपयोग कर सकते हैं। प्रतिशत-एन्कोडिंग के लिए, SVG को data:image/svg+xml, में लपेटें, फिर किसी भी कोण कोष्ठक, उद्धरण और अन्य विशेष वर्णों को प्रतिशत-एन्कोड करें। परिणाम लंबा है लेकिन मानव-पठनीय है। Base64 के लिए, SVG बाइट्स लें, उन्हें Base64 में एन्कोड करें, और डेटा उत्पन्न करें:image/svg+xml;base64, फिर Base64 स्ट्रिंग जोड़ें। Base64 आमतौर पर बाइनरी के लिए अधिक कॉम्पैक्ट होता है, लेकिन SVG टेक्स्ट के लिए, प्रतिशत-एन्कोडेड फॉर्म छोटा हो सकता है।
व्यावहारिक उदाहरण: हाथ से एक छोटे SVG के लिए डेटा बनाना: URI - मार्कअप को टेक्स्ट के रूप में एन्कोड करना और स्ट्रिंग को असेंबल करना
ब्राउज़र और उपभोग करने वाले एप्लिकेशन डेटा यूआरआई पर सीमा या नीति प्रतिबंध लगा सकते हैं, लेकिन यह रिपॉजिटरी पोर्टेबल संख्यात्मक सीमा स्थापित नहीं करता है। मेमोरी का उपयोग, पार्सर व्यवहार और सुरक्षा नीति इस बात पर भी निर्भर करती है कि मूल्य कहां दिखाई देता है, इसलिए याद की गई सीमा पर भरोसा करने के बजाय सटीक लक्ष्य ब्राउज़र और एम्बेडिंग संदर्भ का परीक्षण करें।
प्रत्येक HTML फ़ाइल में एक 5 MB एम्बेडेड छवि पेज आकार को बढ़ा देगी। डेटा यूआरआई छोटे संसाधनों के लिए सर्वोत्तम हैं: CSS आइकन, छोटी छवियां, या परीक्षण डेटा। बड़ी फ़ाइलों के लिए, बाहरी अनुरोध तेज़ होता है क्योंकि ब्राउज़र प्रतिक्रिया को कैश कर सकता है और कई पेजों पर इसका पुन: उपयोग कर सकता है; एक डेटा: URI हर बार पेज लोड होने पर इनलाइन हो जाता है।
ब्राउज़र और सुरक्षा सीमाओं को मानने के बजाय उपभोग करने वाले एप्लिकेशन में सत्यापित करें
एक सामान्य सीमा कुछ किलोबाइट है; उसके नीचे, डेटा: यूआरआई कुशल हैं; इससे ऊपर, बाहरी फ़ाइलें आमतौर पर तेज़ होती हैं। सुरक्षा और ब्राउज़र नीतियां कुछ संदर्भों में डेटा: URI उपयोग को प्रतिबंधित करती हैं। फ़िशिंग को रोकने के लिए एक शीर्ष-स्तरीय नेविगेशन (एक लिंक पर क्लिक करना जो डेटा की ओर इशारा करता है: URI HTML सामग्री के साथ) को अक्सर अवरुद्ध कर दिया जाता है। एक डेटा: URI एक स्क्रिप्ट स्रोत विशेषता में मनमाना JavaScript निष्पादित कर सकता है, जिससे सुरक्षा जोखिम पैदा हो सकता है।
ब्राउज़र डेटा पर सामग्री सुरक्षा नीति (CSP) नियम लागू करते हैं: यूआरआई; एक सख्त CSP उन्हें पूरी तरह से प्रतिबंधित कर सकता है। एक img src या एक iframe src में एक डेटा: URI की आमतौर पर अनुमति होती है, लेकिन किसी शैली या स्क्रिप्ट संदर्भ में एम्बेडेड प्रतिबंधित हो सकता है। हमेशा अपने लक्षित परिवेश की ब्राउज़र अनुकूलता और सुरक्षा नीति की जाँच करें। CSS में डेटा यूआरआई छोटी पेजभूमि छवियों के लिए सामान्य हैं। सिंटैक्स समान है: url(data:image/png;base64,...).
जहां डेटा: यूआरआई अभी भी सही टूल हैं - CSS आइकन, ईमेल-सुरक्षित इनलाइन छवियां और परीक्षण फिक्स्चर
एम्बेडेड डेटा के साथ एक CSS फ़ाइल: URI को सभी छवियों के साथ एक एकल फ़ाइल के रूप में भेजा जा सकता है, जिससे HTTP अनुरोध कम हो जाते हैं। यह छोटे आइकन सेट या सरल ग्राफ़िक्स के लिए उपयोगी है। CSS में एम्बेड की गई बड़ी छवियां फ़ाइल को फुला देती हैं और इसके पार्सिंग को धीमा कर देती हैं। आधुनिक निर्माण टूल (जैसे वेबपैक) स्वचालित रूप से छोटी छवियों को डेटा में परिवर्तित कर सकते हैं: CSS में यूआरआई, और बाहरी छवियों को सामान्य URL में, प्रदर्शन को संतुलित करते हुए।
डेटा: URI प्रारूप को RFC 2397 द्वारा परिभाषित किया गया है, एक छोटा दस्तावेज़ जो व्याकरण निर्दिष्ट करता है लेकिन यह परिभाषित नहीं करता है कि डेटा: यूआरआई का उपयोग कहां किया जा सकता है या नहीं। ब्राउज़र विक्रेताओं ने सुरक्षा और प्रदर्शन संबंधी चिंताओं के आधार पर अपने स्वयं के प्रतिबंध जोड़े हैं।
इसमें क्या शामिल नहीं है - ब्लॉब: URL, ऑब्जेक्ट URL और फ़ाइल-सिस्टम एक्सेस
कुछ प्रणालियों ने दुरुपयोग को रोकने के लिए कुछ संदर्भों में डेटा: URI समर्थन को अस्वीकार कर दिया है (जैसे CSP स्तर 3 में फॉर्म-एक्शन)। डेटा का उपयोग करते समय: URI, इसे अपने लक्षित ब्राउज़र में परीक्षण करें; RFC कहता है कि प्रारूप वैध है, लेकिन ब्राउज़र की सुरक्षा नीति इसे अवरुद्ध कर सकती है।
डेटा बनाना: URI मैन्युअल रूप से उत्पादन में असामान्य है; अधिकांश बिल्ड टूल और लाइब्रेरी रूपांतरण को संभालते हैं। लेकिन डिबगिंग के लिए प्रारूप को समझना उपयोगी है। यदि आपको अपने CSS या HTML में एक लंबा डेटा:image/... URL दिखाई देता है, तो आप इसे Base64 एनकोडर और डिकोडर टूल से डीकोड कर सकते हैं: डेटा:image/...;base64, उपसर्ग को हटा दें, शेष स्ट्रिंग को टूल में पेस्ट करें, और वास्तविक बाइट्स देखने के लिए इसे डीकोड करें।
टेकअवे: सख्त व्याकरण के साथ एक छोटा प्रारूप - Base64 एनकोडर और डिकोडर टेक्स्ट-एन्कोडिंग चरण को कैसे संभालते हैं ताकि आप एक वैध URI को इकट्ठा कर सकें
SVG डेटा के लिए: URI, आप टेक्स्ट फॉर्म को प्रतिशत-डीकोड कर सकते हैं और XML मार्कअप पढ़ सकते हैं। डेटा की शारीरिक रचना को समझना: URI एम्बेडेड संसाधनों का समस्या निवारण करना आसान बनाता है। डेटा यूआरआई एक वेब मानक (RFC 2397) है जो संसाधनों को सीधे URL के रूप में एम्बेड करने की अनुमति देता है। वे छोटे, स्थिर संसाधनों के लिए सबसे अधिक कुशल हैं जिन्हें अलग-अलग कैशिंग से लाभ नहीं होता है। प्रारूप में वैकल्पिक मीडिया-प्रकार विनिर्देश और एक एन्कोडिंग ध्वज (Base64 या निहित प्रतिशत-एन्कोडिंग) शामिल है।
बाइनरी डेटा के लिए Base64 एन्कोडिंग आवश्यक है लेकिन टेक्स्ट के लिए वैकल्पिक है; प्रतिशत-एन्कोडेड SVG अधिक पठनीय हो सकता है। ब्राउज़र सुरक्षा नीतियां सीमित करती हैं कि डेटा कहां उपयोग किया जा सकता है: यूआरआई, इसलिए आपके लक्षित वातावरण में प्रतिबंधों को समझना आवश्यक है। Base64 एनकोडर और डिकोडर टूल आपको किसी संसाधन को मैन्युअल रूप से एनकोड करने या उसकी सामग्री का निरीक्षण करने के लिए एम्बेडेड URI को डीकोड करने में मदद कर सकता है।