用JS进行Base64编码、解码

JavaScript026

用JS进行Base64编码、解码,第1张

  从IE10+浏览器开始，所有浏览器就原生提供了Base64编码、解码方法，不仅可以用于浏览器环境，Service Worker环境也可以使用。

方法名就是 atob 和 btoa ，具体语法如下：

IE8/IE9的polyfill

  当下，仍有不少PC项目还需要兼容IE9，所以，我们可以专门针对这些浏览器再引入一段ployfill脚本或者一个JS文件即可。

[if IE] 表示所有IE浏览器，由于IE10+浏览器已经放弃了著名的IE条件注释的支持，Chrome等浏览器本身就不支持这个IE私有语法，因此，很天然的，上面一段script引入只在IE9-浏览器下有效。而我们本来就希望只IE8，IE9浏览器引入ployfill，于是正好完美衔接上。

也就是原生支持atob和btoa方法的浏览器认为就是一段无需关心的HTML注释，不支持atob和btoa的IE9及其以下浏览器则会加载我们的base64-polyfill.js，使浏览器也支持 window.btoa 和 window.atob 这个语法。

开源的 base64.js ，使用很简单，浏览器引入该JS文件，然后Base64编码这样：

解码就调用 decode 方法，如下：

function Base64() {

// private property

_keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="

// public method for encoding

this.encode = function (input) {

var output = ""

var chr1, chr2, chr3, enc1, enc2, enc3, enc4

var i = 0

input = _utf8_encode(input)

while (i <input.length) {

chr1 = input.charCodeAt(i++)

chr2 = input.charCodeAt(i++)

chr3 = input.charCodeAt(i++)

enc1 = chr1 >>2

enc2 = ((chr1 &3) <<4) | (chr2 >>4)

enc3 = ((chr2 &15) <<2) | (chr3 >>6)

enc4 = chr3 &63

if (isNaN(chr2)) {

enc3 = enc4 = 64

} else if (isNaN(chr3)) {

enc4 = 64

}

output = output +

_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +

_keyStr.charAt(enc3) + _keyStr.charAt(enc4)

}

return output

}

// public method for decoding

this.decode = function (input) {

var output = ""

var chr1, chr2, chr3

var enc1, enc2, enc3, enc4

var i = 0

input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "")

while (i <input.length) {

enc1 = _keyStr.indexOf(input.charAt(i++))

enc2 = _keyStr.indexOf(input.charAt(i++))

enc3 = _keyStr.indexOf(input.charAt(i++))

enc4 = _keyStr.indexOf(input.charAt(i++))

chr1 = (enc1 <<2) | (enc2 >>4)

chr2 = ((enc2 &15) <<4) | (enc3 >>2)

chr3 = ((enc3 &3) <<6) | enc4

output = output + String.fromCharCode(chr1)

if (enc3 != 64) {

output = output + String.fromCharCode(chr2)

}

if (enc4 != 64) {

output = output + String.fromCharCode(chr3)

}

}

output = _utf8_decode(output)

return output

}

// private method for UTF-8 encoding

_utf8_encode = function (string) {

string = string.replace(/\r\n/g,"\n")

var utftext = ""

for (var n = 0n <string.lengthn++) {

var c = string.charCodeAt(n)

if (c <128) {

utftext += String.fromCharCode(c)

} else if((c >127) &&(c <2048)) {

utftext += String.fromCharCode((c >>6) | 192)

utftext += String.fromCharCode((c &63) | 128)

} else {

utftext += String.fromCharCode((c >>12) | 224)

utftext += String.fromCharCode(((c >>6) &63) | 128)

utftext += String.fromCharCode((c &63) | 128)

}

}

return utftext

}

// private method for UTF-8 decoding

_utf8_decode = function (utftext) {

var string = ""

var i = 0

var c = c1 = c2 = 0

while ( i <utftext.length ) {

c = utftext.charCodeAt(i)

if (c <128) {

string += String.fromCharCode(c)

i++

} else if((c >191) &&(c <224)) {

c2 = utftext.charCodeAt(i+1)

string += String.fromCharCode(((c &31) <<6) | (c2 &63))

i += 2

} else {

c2 = utftext.charCodeAt(i+1)

c3 = utftext.charCodeAt(i+2)

string += String.fromCharCode(((c &15) <<12) | ((c2 &63) <<6) | (c3 &63))

i += 3

}

}

return string

}

}

<html>

<head>

<script src="lib/base64.js" type="text/javascript"></script>

<script type="text/javascript">

var b = new Base64()

var str = b.encode("admin:admin")

alert("base64 encode:" + str)

str = b.decode(str)

alert("base64 decode:" + str)

</script>

</head>

<body>

</body>

</html>

一：最简单的加密解密

大家对于JAVASCRIPT函数escape()和unescape()想必是比较了解啦（很多网页加密在用它们），分别是编码和解码字符串，比如例子代码用escape()函数加密后变为如下格式：

alert%28%22%u9ED1%u5BA2%u9632%u7EBF%22%29%3B

如何？还看的懂吗？当然其中的ASCII字符"alert"并没有被加密，如果愿意我们可以写点JAVASCRIPT代码重新把它加密如下：

%61%6C%65%72%74%28%22%u9ED1%u5BA2%u9632%u7EBF%22%29%3B

呵呵！如何？这次是完全都加密了！

当然，这样加密后的代码是不能直接运行的，幸好还有eval(codeString)可用，这个函数的作用就是检查JavaScript代码并执行，必选项 codeString 参数是包含有效 JavaScript 代码的字符串值，加上上面的解码unescape()，加密后的结果如下：

<SCRIPT LANGUAGE="JavaScript">

var code=unescape("%61%6C%65%72%74%28%22%u9ED1%u5BA2%u9632%u7EBF%22%29%3B")

eval(code)

</SCRIPT>

是不是很简单？不要高兴，解密也就同样的简单，解密代码都摆给别人啦（unescape()）！呵呵

二：转义字符"\"的妙用

大家可能对转义字符"\"不太熟悉，但对于JavaScript提供了一些特殊字符如：\n （换行）、 \r （回车）、\' （单引号 ）等应该是有所了解的吧？其实"\"后面还可以跟八进制或十六进制的数字，如字符"a"则可以表示为："\141"或"\x61"（注意是小写字符"x"），至于双字节字符如汉字"黑"则仅能用十六进制表示为"\u9ED1"（注意是小写字符"u"），其中字符"u"表示是双字节字符，根据这个原理例子代码则可以表示为：

八进制转义字符串如下:

<SCRIPT LANGUAGE="JavaScript">

eval("\141\154\145\162\164\50\42\u9ED1\u5BA2\u9632\u7EBF\42\51\73")

</SCRIPT>

十六进制转义字符串如下:

<SCRIPT LANGUAGE="JavaScript">

eval("\x61\x6C\x65\x72\x74\x28\x22\u9ED1\u5BA2\u9632\u7EBF\x22\x29\x3B")

</SCRIPT>

这次没有了解码函数，因为JavaScript执行时会自行转换，同样解码也是很简单如下：

<SCRIPT LANGUAGE="JavaScript">

alert("\x61\x6C\x65\x72\x74\x28\x22\u9ED1\u5BA2\u9632\u7EBF\x22\x29\x3B")

</SCRIPT>

就会弹出对话框告诉你解密后的结果！