การเข้ารหัสและถอดรหัส Base64 ใน Javascript ฝั่งไคลเอ็นต์

มีวิธีการใดใน JavaScript ที่สามารถใช้ในการเข้ารหัสและถอดรหัสสตริงโดยใช้การเข้ารหัส base64 ได้หรือไม่?

เบราว์เซอร์บางตัวเช่น Firefox, Chrome, Safari, Opera และ IE10 + สามารถรองรับ Base64 ได้ ดูคำถาม Stackoverflowนี้ มันใช้btoa()และatob()ฟังก์ชั่นฟังก์ชั่น

สำหรับ JavaScript ฝั่งเซิร์ฟเวอร์ (โหนด) คุณสามารถใช้ Buffer s เพื่อถอดรหัส

หากคุณต้องการโซลูชันข้ามเบราว์เซอร์มีไลบรารีที่มีอยู่เช่นCryptoJSหรือรหัสเช่น:

http://ntt.cc/2008/01/19/base64-encoder-decoder-with-javascript.html

ด้วยสิ่งหลังนี้คุณจะต้องทดสอบฟังก์ชั่นการทำงานร่วมกันของเบราว์เซอร์อย่างละเอียด และความผิดพลาดได้รับรายงานแล้ว

ในตุ๊กแก / เบราว์เซอร์ WebKit-based (Firefox, Chrome และ Safari) และ Opera คุณสามารถใช้btoa ()และatob ()

คำตอบเดิม: คุณสามารถเข้ารหัสสตริงเป็น Base64 ใน JavaScript ได้อย่างไร?

Internet Explorer 10+

// Define the string
var string = 'Hello World!';

// Encode the String
var encodedString = btoa(string);
console.log(encodedString); // Outputs: "SGVsbG8gV29ybGQh"

// Decode the String
var decodedString = atob(encodedString);
console.log(decodedString); // Outputs: "Hello World!"

เบราว์เซอร์

เขียนใหม่และทำให้เป็นโมดูลแบบ UTF-8 และ Base64 Javascript Encoding และถอดรหัสไลบรารี่ / โมดูลสำหรับ AMD, CommonJS, Nodejs และเบราว์เซอร์ เข้ากันได้ข้ามเบราว์เซอร์

กับ Node.js

นี่คือวิธีที่คุณเข้ารหัสข้อความปกติเป็น base64 ใน Node.js:

//Buffer() requires a number, array or string as the first parameter, and an optional encoding type as the second parameter. 
// Default is utf8, possible encoding types are ascii, utf8, ucs2, base64, binary, and hex
var b = new Buffer('JavaScript');
// If we don't use toString(), JavaScript assumes we want to convert the object to utf8.
// We can make it convert to other formats by passing the encoding type to toString().
var s = b.toString('base64');

และนี่คือวิธีที่คุณถอดรหัสสตริงที่เข้ารหัส base64:

var b = new Buffer('SmF2YVNjcmlwdA==', 'base64')
var s = b.toString();

ด้วย Dojo.js

ในการเข้ารหัสอาร์เรย์ของไบต์โดยใช้ dojox.encoding.base64:

var str = dojox.encoding.base64.encode(myByteArray);

ในการถอดรหัสสตริงที่เข้ารหัสแบบ 64:

var bytes = dojox.encoding.base64.decode(str)

ซุ้มประตูติดตั้งเชิงมุม -64

<script src="bower_components/angular-base64/angular-base64.js"></script>

angular
    .module('myApp', ['base64'])
    .controller('myController', [

    '$base64', '$scope', 
    function($base64, $scope) {
    
        $scope.encoded = $base64.encode('a string');
        $scope.decoded = $base64.decode('YSBzdHJpbmc=');
}]);

แต่อย่างไร

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการเข้ารหัส base64 โดยทั่วไปและโดยเฉพาะใน JavaScript ฉันขอแนะนำบทความนี้: วิทยาศาสตร์คอมพิวเตอร์ใน JavaScript: การเข้ารหัส Base64

นี่คือโพสต์ Sniper ที่รัดกุมขึ้น มันถือว่าดีสตริง base64 ที่ดีขึ้นโดยไม่มีการรับคืน รุ่นนี้กำจัดลูปสองสามตัวเพิ่มการ&0xffแก้ไขจาก Yaroslav, กำจัด null ที่ต่อท้าย, รวมถึงรหัสของกอล์ฟ

decodeBase64 = function(s) {
    var e={},i,b=0,c,x,l=0,a,r='',w=String.fromCharCode,L=s.length;
    var A="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    for(i=0;i<64;i++){e[A.charAt(i)]=i;}
    for(x=0;x<L;x++){
        c=e[s.charAt(x)];b=(b<<6)+c;l+=6;
        while(l>=8){((a=(b>>>(l-=8))&0xff)||(x<(L-2)))&&(r+=w(a));}
    }
    return r;
};

ฟังก์ชันถอดรหัส Base64 JavaScript ที่สั้นและเร็วโดยไม่มีความล้มเหลว:

function decode_base64 (s)
{
    var e = {}, i, k, v = [], r = '', w = String.fromCharCode;
    var n = [[65, 91], [97, 123], [48, 58], [43, 44], [47, 48]];

    for (z in n)
    {
        for (i = n[z][0]; i < n[z][1]; i++)
        {
            v.push(w(i));
        }
    }
    for (i = 0; i < 64; i++)
    {
        e[v[i]] = i;
    }

    for (i = 0; i < s.length; i+=72)
    {
        var b = 0, c, x, l = 0, o = s.substring(i, i+72);
        for (x = 0; x < o.length; x++)
        {
            c = e[o.charAt(x)];
            b = (b << 6) + c;
            l += 6;
            while (l >= 8)
            {
                r += w((b >>> (l -= 8)) % 256);
            }
         }
    }
    return r;
}

function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}

https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#The_.22Unicode_Problem.22

php.jsโครงการมีการใช้งานจาวาสคริของหลายฟังก์ชั่นของ PHP base64_encodeและbase64_decodeรวมอยู่ด้วย

มีใครพูดว่า code golf? =)

ต่อไปนี้คือความพยายามในการปรับปรุงแต้มต่อของฉันในขณะที่ตามเวลา จำหน่ายเพื่อความสะดวกของคุณ

function decode_base64(s) {
  var b=l=0, r='',
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  s.split('').forEach(function (v) {
    b=(b<<6)+m.indexOf(v); l+=6;
    if (l>=8) r+=String.fromCharCode((b>>>(l-=8))&0xff);
  });
  return r;
}

สิ่งที่ฉันเป็นจริงหลังจากนั้นก็คือการใช้งานแบบอะซิงโครนัสและสิ่งที่ฉันประหลาดใจก็คือมันforEachตรงกันข้ามกับ$([]).eachการใช้วิธีการของ JQuery ที่ซิงโครนัสมาก

หากคุณมีความคิดบ้าคลั่งเช่นกันความล่าช้า 0 window.setTimeoutจะเรียกใช้การถอดรหัส base64 แบบอะซิงโครนัสและดำเนินการฟังก์ชันการเรียกกลับพร้อมผลลัพธ์เมื่อเสร็จสิ้น

function decode_base64_async(s, cb) {
  setTimeout(function () { cb(decode_base64(s)); }, 0);
}

@Toothbrush แนะ "ดัชนีสายเช่นอาร์เรย์" splitและได้รับการกำจัด รูทีนนี้ดูแปลกมาก ๆ และไม่แน่ใจว่ามันเข้ากันได้ดีแค่ไหน แต่มันก็โดนเบอร์ดี้ตัวอื่น

function decode_base64(s) {
  var b=l=0, r='',
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  [].forEach.call(s, function (v) {
    b=(b<<6)+m.indexOf(v); l+=6;
    if (l>=8) r+=String.fromCharCode((b>>>(l-=8))&0xff);
  });
  return r;
}

ในขณะที่พยายามหาข้อมูลเพิ่มเติมเกี่ยวกับสตริง JavaScript เป็นอาร์เรย์ที่ฉันสะดุดกับเคล็ดลับโปรนี้โดยใช้/./gregex เพื่อก้าวผ่านสตริง สิ่งนี้จะช่วยลดขนาดรหัสได้มากขึ้นโดยการแทนที่สตริงเข้าที่และไม่จำเป็นต้องเก็บตัวแปรส่งคืน

function decode_base64(s) {
  var b=l=0,
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  return s.replace(/./g, function (v) {
    b=(b<<6)+m.indexOf(v); l+=6;
    return l<8?'':String.fromCharCode((b>>>(l-=8))&0xff);
  });
}

อย่างไรก็ตามหากคุณกำลังมองหาบางสิ่งบางอย่างที่เป็นแบบดั้งเดิมมากกว่านี้เล็กน้อย

function decode_base64(s) {
  var b=l=0, r='', s=s.split(''), i,
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  for (i in s) {
    b=(b<<6)+m.indexOf(s[i]); l+=6;
    if (l>=8) r+=String.fromCharCode((b>>>(l-=8))&0xff);
  }
  return r;
}

ฉันไม่มีปัญหาต่อท้าย null ดังนั้นสิ่งนี้จึงถูกลบทิ้งเพื่อให้อยู่ในระดับที่ตราไว้ แต่ควรแก้ไขได้ด้วยtrim()หรือtrimRight()ถ้าคุณต้องการนี่จะเป็นปัญหาสำหรับคุณ

กล่าวคือ

return r.trimRight();

บันทึก:

ผลที่ได้คือสตริง ASCII ไบต์หากคุณต้องการ Unicode ที่ง่ายที่สุดคือescapeสตริงไบต์ซึ่งสามารถถอดรหัสด้วยdecodeURIComponentการผลิตสตริง Unicode

function decode_base64_usc(s) {      
  return decodeURIComponent(escape(decode_base64(s)));
}

เนื่องจากescapeเราเลิกใช้งานเราสามารถเปลี่ยนฟังก์ชั่นของเราเพื่อรองรับยูนิโค้ดโดยตรงโดยไม่จำเป็นต้องใช้escapeหรือString.fromCharCodeเราสามารถสร้าง%สตริงที่ใช้ Escape พร้อมสำหรับการถอดรหัส URI

function decode_base64(s) {
  var b=l=0,
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  return decodeURIComponent(s.replace(/./g, function (v) {
    b=(b<<6)+m.indexOf(v); l+=6;
    return l<8?'':'%'+(0x100+((b>>>(l-=8))&0xff)).toString(16).slice(-2);
  }));
}

Njoy!

ฉันได้ลองใช้ Javascript ประจำที่ phpjs.org และทำงานได้ดี

ฉันลองทำตามปกติที่แนะนำในคำตอบที่เลือกโดย Ranhiru Cooray - http://ntt.cc/2008/01/19/base64-encoder-decoder-with-javascript.html

ฉันพบว่าพวกเขาไม่ได้ทำงานในทุกสถานการณ์ ฉันเขียนกรณีทดสอบที่การปฏิบัติเหล่านี้ล้มเหลวและโพสต์ไว้ใน GitHub ที่:

https://github.com/scottcarter/base64_javascript_test_data.git

ฉันยังโพสต์ความคิดเห็นในบล็อกโพสต์ที่ ntt.cc เพื่อแจ้งเตือนผู้เขียน (รอการกลั่นกรอง - บทความเก่าดังนั้นไม่แน่ใจว่าจะแสดงความคิดเห็นหรือไม่)

ฉันควรจะใช้วิธีการเข้ารหัส / ถอดรหัสbas64จากCryptoJSซึ่งเป็นห้องสมุดที่ได้รับความนิยมมากที่สุดสำหรับอัลกอริธึมการเข้ารหัสลับมาตรฐานและปลอดภัยที่นำมาใช้ใน JavaScript โดยใช้วิธีปฏิบัติที่ดีที่สุดและรูปแบบ

ใน Node.js เราสามารถทำได้ง่ายๆ

var base64 = 'SGVsbG8gV29ybGQ='
var base64_decode = new Buffer(base64, 'base64').toString('ascii');

console.log(base64_decode); // "Hello World"

สำหรับเฟรมเวิร์ก JavaScript ที่ไม่มีatobเมธอดและในกรณีที่คุณไม่ต้องการอิมพอร์ตไลบรารีภายนอกนี่เป็นฟังก์ชันแบบสั้นที่ทำ

มันจะได้รับสตริงที่มีค่าที่เข้ารหัส Base64 และจะส่งกลับอาร์เรย์ที่ถอดรหัสของไบต์ (โดยที่อาร์เรย์ของไบต์จะแสดงเป็นอาร์เรย์ของตัวเลขโดยที่แต่ละหมายเลขนั้นเป็นจำนวนเต็มตั้งแต่ 0 ถึง 255)

function fromBase64String(str) {
    var alpha = 
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    var value = [];
    var index = 0;
    var destIndex  = 0;
    var padding = false;
    while (true) {

        var first  = getNextChr(str, index, padding, alpha);
        var second = getNextChr(str, first .nextIndex, first .padding, alpha);
        var third  = getNextChr(str, second.nextIndex, second.padding, alpha);
        var fourth = getNextChr(str, third .nextIndex, third .padding, alpha);

        index = fourth.nextIndex;
        padding = fourth.padding;

        // ffffffss sssstttt ttffffff
        var base64_first  = first.code  == null ? 0 : first.code;
        var base64_second = second.code == null ? 0 : second.code;
        var base64_third  = third.code  == null ? 0 : third.code;
        var base64_fourth = fourth.code == null ? 0 : fourth.code;

        var a = (( base64_first << 2) & 0xFC ) | ((base64_second>>4) & 0x03);
        var b = (( base64_second<< 4) & 0xF0 ) | ((base64_third >>2) & 0x0F);
        var c = (( base64_third << 6) & 0xC0 ) | ((base64_fourth>>0) & 0x3F);

        value [destIndex++] = a;
        if (!third.padding) {
            value [destIndex++] = b;
        } else {
            break;
        }
        if (!fourth.padding) {
            value [destIndex++] = c;
        } else {
            break;
        }
        if (index >= str.length) {
            break;
        }
    }
    return value;
}

function getNextChr(str, index, equalSignReceived, alpha) {
    var chr = null;
    var code = 0;
    var padding = equalSignReceived;
    while (index < str.length) {
        chr = str.charAt(index);
        if (chr == " " || chr == "\r" || chr == "\n" || chr == "\t") {
            index++;
            continue;
        }
        if (chr == "=") {
            padding = true;
        } else {
            if (equalSignReceived) {
                throw new Error("Invalid Base64 Endcoding character \"" 
                    + chr + "\" with code " + str.charCodeAt(index) 
                    + " on position " + index 
                    + " received afer an equal sign (=) padding "
                    + "character has already been received. "
                    + "The equal sign padding character is the only "
                    + "possible padding character at the end.");
            }
            code = alpha.indexOf(chr);
            if (code == -1) {
                throw new Error("Invalid Base64 Encoding character \"" 
                    + chr + "\" with code " + str.charCodeAt(index) 
                    + " on position " + index + ".");
            }
        }
        break;
    }
    return { character: chr, code: code, padding: padding, nextIndex: ++index};
}

ทรัพยากรที่ใช้: RFC-4648 ตอนที่ 4