一、btoa和atob编码转换示例

微信群里经常会收到某些人发送的营销推广类分享,殊不知你分享的同时可能已暴露了自己的信息给大家。这里就结合js下的btoa和atob来看一个编码解码信息的示例。微信里收到的分享通常如下:

weixin-share
weixin-share

点开该分享获取其URL为:https://wallet.95516.com/s/wl/webV2/activity/springFestival/invite/html/shareIndex.html?r=MTc2ODE5NTg1OTg%3D&channel=3 ,前面部分都是没意义的,重点看下r=MTc2ODE5NTg1OTg这部分(%3D是URL特殊符号转义,其真实为= ,本示例中没有实际意义)。r后面拿到这串组合看起来也像是无意义的东西,接下来看,让他现形:

atob
atob

接下来打开浏览器的console调试界面,发掘下信息。骚年,别浪了吧,你手机号已经暴露了噢!(为保护当事人隐私,我已经给你加灰了,下次还是悠着点吧。)

二、看下btoa和atob

btoa和atob是JavaScript中window对象的两个函数,其中btoa是binary to ascii,用于将binary的数据用ascii码表示,即Base64的编码过程,而atob则是ascii to binary,用于将ascii码解析成binary数据。Base64加解密在html5标准化后被广泛在web JavaScript里应用。再来一个简单小示例:

btoa-chinese
btoa-chinese

如上所示,进行拉丁文来回转换没有一点问题。但使用中文时出现报错:

Uncaught DOMException: Failed to execute ‘btoa’ on ‘Window’: The string to be encoded contains characters outside of the Latin1 range.

那么如何让他支持汉字呢,可以使用window.encodeURIComponent和window.decodeURIComponent解决该问题:

1var str = "运维之路,www.361way.com";
2window.btoa(window.encodeURIComponent(str))
3//输出结果 "JUU4JUJGJTkwJUU3JUJCJUI0JUU0JUI5JThCJUU4JUI3JUFGJUVGJUJDJThDd3d3LjM2MXdheS5jb20="
4window.decodeURIComponent(window.atob('JUU4JUJGJTkwJUU3JUJCJUI0JUU0JUI5JThCJUU4JUI3JUFGJUVGJUJDJThDd3d3LjM2MXdheS5jb20='))
5//输出结果 "运维之路,www.361way.com"

上面的也可以简写下把window去掉,看下图:

encodeurlcomponent
encodeurlcomponent

注:如果使用的IE浏览器,需要注意IE10以前的版本是不支持这两个函数的。具体可以参看developer.mozilla.org中所列的表格