IT story

클라이언트 측 Javascript의 Base64 인코딩 및 디코딩

hot-time 2020. 4. 14. 19:16
반응형

클라이언트 측 Javascript의 Base64 인코딩 및 디코딩


base64 인코딩을 사용하여 문자열을 인코딩하고 디코딩하는 데 사용할 수있는 JavaScript의 메소드가 있습니까?


Firefox, Chrome, Safari, Opera 및 IE10 +와 같은 일부 브라우저는 기본적으로 Base64를 처리 할 수 ​​있습니다. Stackoverflow 질문을 살펴보십시오 . 사용 btoa()하고 atob()기능 합니다.

서버 측 JavaScript에는 Node.JS 용 btoa 패키지가 있습니다 .

크로스 브라우저 솔루션을 사용 하려는 경우 CryptoJS 와 같은 기존 라이브러리 또는 다음과 같은 코드가 있습니다.

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

후자를 사용하면 크로스 브라우저 호환성을 위해 기능을 철저히 테스트해야합니다. 그리고 오류 가 이미보고되었습니다 .


Gecko / WebKit 기반 브라우저 (Firefox, Chrome 및 Safari) 및 Opera에서 btoa ()atob ()을 사용할 수 있습니다 .

원래 답변 : JavaScript에서 문자열을 Base64로 인코딩하는 방법은 무엇입니까?


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!"

크로스 브라우저

AMD, CommonJS, Nodejs 및 브라우저 용 UTF-8 및 Base64 Javascript 인코딩 및 디코딩 라이브러리 / 모듈을 다시 작성하고 모듈화했습니다. 크로스 브라우저 호환


Node.js로

Node.js에서 일반 텍스트를 base64로 인코딩하는 방법은 다음과 같습니다.

//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);

base64로 인코딩 된 문자열을 디코딩하려면

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 인코딩


스나이퍼 포스트의 강화 버전입니다. 캐리지 리턴이없는 잘 구성된 base64 문자열을 가정합니다. 이 버전은 몇 개의 루프를 제거하고 &0xffYaroslav 수정 사항을 추가하며 후행 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;
}

php.js의 프로젝트는 PHP의 기능 중 많은 자바 스크립트 구현이 있습니다. base64_encode그리고 base64_decode포함되어 있습니다.


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


누군가 코드 골프라고 했습니까? =)

다음은 시대를 따라 잡는 동안 핸디캡을 개선하려는 나의 시도입니다. 귀하의 편의를 위해 제공됩니다.

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;
}

실제로 실제로 수행 한 것은 비동기 구현이었고 놀랍게도 forEachJQuery의 $([]).each메소드 구현과는 대조적으로 매우 동 기적 인 것으로 나타났습니다 .

이러한 미친 개념을 염두에두면 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 문자열에 대한 자세한 정보를 찾으려고하는 동안 /./g정규식을 사용하여 문자열을 단계별로 사용 하여이 팁을 우연히 발견했습니다 . 이렇게하면 문자열을 제자리에 놓고 반환 변수를 유지할 필요가 없어 코드 크기가 훨씬 줄어 듭니다.

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 문제가 없었 으므로이 문제는 파로 남아 있기 위해 제거되었지만 원하는 경우 a trim()또는 a로 쉽게 해결할 수 있습니다 trimRight().

즉.

return r.trimRight();

노트 :

결과는 ASCII 바이트 문자열입니다. 유니 코드가 필요한 경우 가장 쉬운 것은 escape바이트 문자열입니다. 그런 다음 decodeURIComponent유니 코드 문자열을 생성하기 위해 함께 디코딩 할 수 있습니다 .

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

이후 escape우리가 직접 할 필요없이 지원 유니 코드에 대한 우리의 기능을 변경할 수있는 사용되지되고 escape또는 String.fromCharCode우리가 생산할 수있는 %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);
  }));
}

조이!


phpjs.org에서 Javascript 루틴을 시도했으며 잘 작동했습니다.

내가 처음 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의 블로그 게시물에 작성자에게 알리기 위해 의견을 게시했습니다.


모범 사례와 패턴을 사용하여 JavaScript로 구현 된 표준 및 보안 암호화 알고리즘을위한 가장 인기있는 라이브러리 인 CryptoJS 의 bas64 인코딩 / 디코딩 방법을 사용하고 싶습니다 .


Node.js에서 간단한 방법으로 할 수 있습니다

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

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

참고 : https://stackoverflow.com/questions/2820249/base64-encoding-and-decoding-in-client-side-javascript

반응형