JavaScript में base64 एन्कोडिंग स्ट्रिंग की बारीकियां

Matt Joseph

base64 कोड में बदलना और उसे डिकोड करना, बाइनरी कॉन्टेंट को वेब-सेफ़ टेक्स्ट के तौर पर दिखाने का एक सामान्य तरीका है. इसका इस्तेमाल आम तौर पर डेटा यूआरएल के लिए किया जाता है. जैसे, इनलाइन इमेज.

JavaScript में, स्ट्रिंग पर base64 एन्कोडिंग और डिकोडिंग लागू करने पर क्या होता है? इस पोस्ट में, इस प्रोसेस के बारे में बारीकी से बताया गया है. साथ ही, इस प्रोसेस में होने वाली आम गलतियों से बचने के बारे में भी बताया गया है.

btoa() और atob()

JavaScript में base64 कोड में बदलने और उसे डिकोड करने के मुख्य फ़ंक्शन, btoa() और atob() हैं. btoa() स्ट्रिंग को base64 कोड में बदली गई स्ट्रिंग में ले जाता है और atob() वापस डीकोड करता है.

यहां एक उदाहरण दिया गया है:

// A really plain string that is just code points below 128.
const asciiString = 'hello';

// This will work. It will print:
// Encoded string: [aGVsbG8=]
const asciiStringEncoded = btoa(asciiString);
console.log(`Encoded string: [${asciiStringEncoded}]`);

// This will work. It will print:
// Decoded string: [hello]
const asciiStringDecoded = atob(asciiStringEncoded);
console.log(`Decoded string: [${asciiStringDecoded}]`);

माफ़ करें, एमडीएन दस्तावेज़ों में बताया गया है कि यह सिर्फ़ उन स्ट्रिंग के साथ काम करता है जिनमें ASCII वर्ण या ऐसे वर्ण होते हैं जिन्हें एक बाइट के ज़रिए दिखाया जा सकता है. दूसरे शब्दों में कहें, तो यह यूनिकोड के साथ काम नहीं करेगा.

यह देखने के लिए कि क्या होता है, यह कोड आज़माएं:

// Sample string that represents a combination of small, medium, and large code points.
// This sample string is valid UTF-16.
// 'hello' has code points that are each below 128.
// '⛳' is a single 16-bit code units.
// '❤️' is a two 16-bit code units, U+2764 and U+FE0F (a heart and a variant).
// '🧀' is a 32-bit code point (U+1F9C0), which can also be represented as the surrogate pair of two 16-bit code units '\ud83e\uddc0'.
const validUTF16String = 'hello⛳❤️🧀';

// This will not work. It will print:
// DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
try {
  const validUTF16StringEncoded = btoa(validUTF16String);
  console.log(`Encoded string: [${validUTF16StringEncoded}]`);
} catch (error) {
  console.log(error);
}

स्ट्रिंग में मौजूद किसी भी इमोजी की वजह से गड़बड़ी होगी. यूनिकोड की वजह से यह समस्या क्यों होती है??

इसे समझने के लिए, कंप्यूटर साइंस और JavaScript, दोनों में स्ट्रिंग को समझते हैं.

यूनिकोड और JavaScript में स्ट्रिंग

यूनिकोड, कैरेक्टर एन्कोडिंग के लिए मौजूदा ग्लोबल स्टैंडर्ड है. इसके अलावा, यह कंप्यूटर सिस्टम में इस्तेमाल करने के लिए, किसी खास वर्ण को संख्या असाइन करने का तरीका भी है. यूनिकोड के बारे में ज़्यादा जानने के लिए, W3C का यह लेख पढ़ें.

यूनिकोड और उनसे जुड़ी संख्याओं के वर्णों के कुछ उदाहरण:

  • घं - 104
  • ñ - 241
  • ❤ - 2764
  • ❤️ - 2764, जिसमें एक छिपा हुआ मॉडिफ़ायर है, जिसका नंबर 65039 है
  • ⛳ - 9971
  • 🧀 - 129472

हर वर्ण को दिखाने वाली संख्याओं को "कोड पॉइंट" कहा जाता है. "कोड पॉइंट" को हर वर्ण के लिए एक पते की तरह समझा जा सकता है. लाल दिल वाले इमोजी में, असल में दो कोड पॉइंट होते हैं: एक दिल के लिए और एक रंग को "बदलने" और उसे हमेशा लाल रखने के लिए.

यूनिकोड में, इन कोड पॉइंट को बिट के क्रम में बदलने के दो सामान्य तरीके हैं, ताकि कंप्यूटर इनका लगातार सही तरीके से विश्लेषण कर सकें: UTF-8 और UTF-16.

एक बहुत ज़्यादा सिंप्लिफ़ाइड व्यू यह है:

  • UTF-8 में, एक कोड पॉइंट में एक से चार बाइट (हर बाइट में आठ बिट) का इस्तेमाल किया जा सकता है.
  • UTF-16 में, एक कोड पॉइंट हमेशा दो बाइट (16 बिट) का होता है.

अहम बात यह है कि JavaScript, स्ट्रिंग को UTF-16 के तौर पर प्रोसेस करता है. इससे btoa() जैसे फ़ंक्शन काम नहीं करते. ये फ़ंक्शन इस आधार पर काम करते हैं कि स्ट्रिंग में मौजूद हर वर्ण, एक बाइट पर मैप होता है. इस बारे में MDN पर साफ़ तौर पर बताया गया है:

यह btoa() तरीका, बाइनरी स्ट्रिंग से Base64 कोड में बदली गई ASCII स्ट्रिंग बनाता है. इसका मतलब है कि यह ऐसी स्ट्रिंग है जिसमें स्ट्रिंग के हर वर्ण को बाइनरी डेटा के एक बाइट के तौर पर माना जाता है.

अब आपको पता है कि JavaScript में अक्सर एक से ज़्यादा बाइट की ज़रूरत होती है. अगले सेक्शन में, base64 एन्कोडिंग और डिकोडिंग के लिए इस मामले को मैनेज करने का तरीका बताया गया है.

यूनिकोड के साथ btoa() और atob()

जैसा कि आपको पता है, गड़बड़ी हमारी स्ट्रिंग की वजह से हो रही है. इसमें ऐसे वर्ण हैं जो UTF-16 में एक बाइट के बाहर के होते हैं.

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

// From https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem.
function base64ToBytes(base64) {
  const binString = atob(base64);
  return Uint8Array.from(binString, (m) => m.codePointAt(0));
}

// From https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem.
function bytesToBase64(bytes) {
  const binString = String.fromCodePoint(...bytes);
  return btoa(binString);
}

// Sample string that represents a combination of small, medium, and large code points.
// This sample string is valid UTF-16.
// 'hello' has code points that are each below 128.
// '⛳' is a single 16-bit code units.
// '❤️' is a two 16-bit code units, U+2764 and U+FE0F (a heart and a variant).
// '🧀' is a 32-bit code point (U+1F9C0), which can also be represented as the surrogate pair of two 16-bit code units '\ud83e\uddc0'.
const validUTF16String = 'hello⛳❤️🧀';

// This will work. It will print:
// Encoded string: [aGVsbG/im7PinaTvuI/wn6eA]
const validUTF16StringEncoded = bytesToBase64(new TextEncoder().encode(validUTF16String));
console.log(`Encoded string: [${validUTF16StringEncoded}]`);

// This will work. It will print:
// Decoded string: [hello⛳❤️🧀]
const validUTF16StringDecoded = new TextDecoder().decode(base64ToBytes(validUTF16StringEncoded));
console.log(`Decoded string: [${validUTF16StringDecoded}]`);

यहां दिए गए चरणों में बताया गया है कि स्ट्रिंग को कोड में बदलने के लिए, यह कोड क्या करता है:

  1. UTF-16 में एन्कोड की गई JavaScript स्ट्रिंग को TextEncoder.encode() का इस्तेमाल करके, UTF-8 में एन्कोड किए गए बाइट की स्ट्रीम में बदलने के लिए, TextEncoder इंटरफ़ेस का इस्तेमाल करें.
  2. इससे Uint8Array मिलता है, जो JavaScript में कम इस्तेमाल किया जाने वाला डेटा टाइप है. यह TypedArray का सबक्लास है.
  3. उस Uint8Array को bytesToBase64() फ़ंक्शन में डालें. यह फ़ंक्शन, Uint8Array में मौजूद हर बाइट को कोड पॉइंट के तौर पर इस्तेमाल करता है और उससे एक स्ट्रिंग बनाता है. इस स्ट्रिंग में कोड पॉइंट होते हैं, जिन्हें एक बाइट के तौर पर दिखाया जा सकता है.
  4. उस स्ट्रिंग को लें और उसे base64 कोड में बदलने के लिए, btoa() का इस्तेमाल करें.

डिकोड करने की प्रोसेस, एन्क्रिप्ट करने की प्रोसेस जैसी ही होती है, लेकिन इसमें एन्क्रिप्ट किए गए डेटा को डिकोड किया जाता है.

ऐसा इसलिए होता है, क्योंकि Uint8Array और स्ट्रिंग के बीच के चरण से यह पक्का होता है कि JavaScript में स्ट्रिंग को UTF-16, दो-बाइट एन्कोडिंग के तौर पर दिखाया जाता है. साथ ही, हर दो बाइट में मौजूद कोड पॉइंट हमेशा 128 से कम होता है.

यह कोड ज़्यादातर मामलों में अच्छी तरह काम करता है, लेकिन कुछ मामलों में यह काम नहीं करेगा.

साइलेंट फ़ेल्योर केस

एक ही कोड का इस्तेमाल करें, लेकिन किसी दूसरी स्ट्रिंग के साथ:

// From https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem.
function base64ToBytes(base64) {
  const binString = atob(base64);
  return Uint8Array.from(binString, (m) => m.codePointAt(0));
}

// From https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem.
function bytesToBase64(bytes) {
  const binString = String.fromCodePoint(...bytes);
  return btoa(binString);
}

// Sample string that represents a combination of small, medium, and large code points.
// This sample string is invalid UTF-16.
// 'hello' has code points that are each below 128.
// '⛳' is a single 16-bit code units.
// '❤️' is a two 16-bit code units, U+2764 and U+FE0F (a heart and a variant).
// '🧀' is a 32-bit code point (U+1F9C0), which can also be represented as the surrogate pair of two 16-bit code units '\ud83e\uddc0'.
// '\uDE75' is code unit that is one half of a surrogate pair.
const partiallyInvalidUTF16String = 'hello⛳❤️🧀\uDE75';

// This will work. It will print:
// Encoded string: [aGVsbG/im7PinaTvuI/wn6eA77+9]
const partiallyInvalidUTF16StringEncoded = bytesToBase64(new TextEncoder().encode(partiallyInvalidUTF16String));
console.log(`Encoded string: [${partiallyInvalidUTF16StringEncoded}]`);

// This will work. It will print:
// Decoded string: [hello⛳❤️🧀�]
const partiallyInvalidUTF16StringDecoded = new TextDecoder().decode(base64ToBytes(partiallyInvalidUTF16StringEncoded));
console.log(`Decoded string: [${partiallyInvalidUTF16StringDecoded}]`);

अगर डिकोड करने के बाद आखिरी वर्ण ( ) को चुना जाता है और उसकी हेक्स वैल्यू की जांच की जाती है, तो आपको दिखेगा कि वह ओरिजनल \uDE75 के बजाय \uFFFD है. यह काम नहीं करता या गड़बड़ी का कोई मैसेज नहीं दिखाता, लेकिन इनपुट और आउटपुट डेटा चुपचाप बदल जाता है. क्यों?

स्ट्रिंग, JavaScript API के हिसाब से अलग-अलग होती हैं

जैसा कि पहले बताया गया है, JavaScript स्ट्रिंग को UTF-16 के तौर पर प्रोसेस करता है. हालांकि, UTF-16 स्ट्रिंग की एक खास प्रॉपर्टी होती है.

उदाहरण के लिए, चीज़ इमोजी. इमोजी (🧀) का यूनिकोड कोड पॉइंट 129472 है. माफ़ करें, 16-बिट संख्या की ज़्यादा से ज़्यादा वैल्यू 65535 होती है! तो UTF-16, इतनी बड़ी संख्या को कैसे दिखाता है?

UTF-16 में एक कॉन्सेप्ट है, जिसे सरोगेट पेयर कहते हैं. इसे इस तरह से समझा जा सकता है:

  • जोड़े की पहली संख्या से पता चलता है कि किस "किताब" में खोज करनी है. इसे "सरोगेट" कहा जाता है.
  • पेयर में मौजूद दूसरा नंबर, "बुक" में मौजूद एंट्री है.

जैसा कि आपने सोचा होगा, किताब का सिर्फ़ नंबर होने पर, कभी-कभी समस्या हो सकती है. UTF-16 में, इसे लोन सरोगेट कहा जाता है.

JavaScript में यह खास तौर पर चुनौती भरा होता है, क्योंकि कुछ एपीआई एक सरोगेट (सरोगेट) के बावजूद काम करते हैं, जबकि दूसरे एपीआई ऐसा नहीं करते.

इस मामले में, base64 से डिकोड करते समय, TextDecoder का इस्तेमाल किया जा रहा है. खास तौर पर, TextDecoder के लिए डिफ़ॉल्ट वैल्यू इनके बारे में बताती हैं:

यह डिफ़ॉल्ट रूप से गलत पर सेट होता है. इसका मतलब है कि डिकोडर, गलत डेटा को बदलने वाले वर्ण से बदल देता है.

आपने पहले जो � वर्ण देखा था, जिसे हेक्स में \uFFFD के तौर पर दिखाया गया है वह बदले जाने वाला वर्ण है. UTF-16 में, सिर्फ़ एक सरोगेट वाली स्ट्रिंग को "गलत तरीके से बनाई गई" या "ठीक से नहीं बनाई गई" माना जाता है.

वेब के कई स्टैंडर्ड (उदाहरण के लिए, 1, 2, 3, 4) हैं. इनसे यह पता चलता है कि गलत स्ट्रिंग से एपीआई के व्यवहार पर कब असर पड़ता है. हालांकि, TextDecoder उन एपीआई में से एक है. टेक्स्ट प्रोसेस करने से पहले, यह पक्का करना अच्छा होता है कि स्ट्रिंग सही तरीके से बनाई गई हैं.

सही स्ट्रिंग की जांच करना

हाल ही में रिलीज़ हुए ब्राउज़र में, अब इस काम के लिए एक फ़ंक्शन है: isWellFormed().

ब्राउज़र सहायता

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 119.
  • Safari: 16.4.

सोर्स

encodeURIComponent() का इस्तेमाल करके भी यही नतीजा मिल सकता है. अगर स्ट्रिंग में सिर्फ़ एक सरोगेट है, तो यह URIError वाली गड़बड़ी दिखाता है.

isWellFormed() उपलब्ध होने पर और उपलब्ध न होने पर encodeURIComponent() का इस्तेमाल करता है. इसी तरह के कोड का इस्तेमाल, isWellFormed() के लिए पॉलीफ़िल बनाने के लिए किया जा सकता है.

// Quick polyfill since older browsers do not support isWellFormed().
// encodeURIComponent() throws an error for lone surrogates, which is essentially the same.
function isWellFormed(str) {
  if (typeof(str.isWellFormed)!="undefined") {
    // Use the newer isWellFormed() feature.
    return str.isWellFormed();
  } else {
    // Use the older encodeURIComponent().
    try {
      encodeURIComponent(str);
      return true;
    } catch (error) {
      return false;
    }
  }
}

पूरी जानकारी का इस्तेमाल करना

अब आपको यूनिकोड और लोन सर्फ़ोर्ट, दोनों को हैंडल करने का तरीका पता है. इसलिए, इन दोनों को एक साथ जोड़कर ऐसा कोड बनाया जा सकता है जो सभी मामलों को हैंडल करता है और ऐसा बिना टेक्स्ट बदले करता है.

// From https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem.
function base64ToBytes(base64) {
  const binString = atob(base64);
  return Uint8Array.from(binString, (m) => m.codePointAt(0));
}

// From https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem.
function bytesToBase64(bytes) {
  const binString = String.fromCodePoint(...bytes);
  return btoa(binString);
}

// Quick polyfill since Firefox and Opera do not yet support isWellFormed().
// encodeURIComponent() throws an error for lone surrogates, which is essentially the same.
function isWellFormed(str) {
  if (typeof(str.isWellFormed)!="undefined") {
    // Use the newer isWellFormed() feature.
    return str.isWellFormed();
  } else {
    // Use the older encodeURIComponent().
    try {
      encodeURIComponent(str);
      return true;
    } catch (error) {
      return false;
    }
  }
}

const validUTF16String = 'hello⛳❤️🧀';
const partiallyInvalidUTF16String = 'hello⛳❤️🧀\uDE75';

if (isWellFormed(validUTF16String)) {
  // This will work. It will print:
  // Encoded string: [aGVsbG/im7PinaTvuI/wn6eA]
  const validUTF16StringEncoded = bytesToBase64(new TextEncoder().encode(validUTF16String));
  console.log(`Encoded string: [${validUTF16StringEncoded}]`);

  // This will work. It will print:
  // Decoded string: [hello⛳❤️🧀]
  const validUTF16StringDecoded = new TextDecoder().decode(base64ToBytes(validUTF16StringEncoded));
  console.log(`Decoded string: [${validUTF16StringDecoded}]`);
} else {
  // Not reached in this example.
}

if (isWellFormed(partiallyInvalidUTF16String)) {
  // Not reached in this example.
} else {
  // This is not a well-formed string, so we handle that case.
  console.log(`Cannot process a string with lone surrogates: [${partiallyInvalidUTF16String}]`);
}

इस कोड में कई ऑप्टिमाइज़ेशन किए जा सकते हैं. जैसे, इसे polyfill में बदलना, एक जैसे सर्वर को चुपचाप बदलने के बजाय, TextDecoder पैरामीटर को बदलना वगैरह.

इस जानकारी और कोड की मदद से, गलत स्ट्रिंग को मैनेज करने के बारे में भी साफ़ तौर पर फ़ैसले लिए जा सकते हैं. जैसे, डेटा को अस्वीकार करना या डेटा को बदलने की प्रोसेस को साफ़ तौर पर चालू करना या बाद में विश्लेषण करने के लिए गड़बड़ी का मैसेज दिखाना.

यह पोस्ट, बेस64 कोड में बदलने और उसे डिकोड करने का एक अहम उदाहरण है. साथ ही, इससे यह भी पता चलता है कि टेक्स्ट को सावधानी से प्रोसेस करना क्यों ज़रूरी है. खास तौर पर, जब टेक्स्ट डेटा, उपयोगकर्ता से जनरेट किया गया हो या बाहरी सोर्स से मिला हो.