window.btoa 和 window.atob

小编 2026-06-05 阅读:513 评论:0
前一段时间被安全部门查出,明文传递密码,被要求整改。然后就进行了引入了第三方的base64编码的...

前一段时间被安全部门查出,明文传递密码,被要求整改。

然后就进行了引入了第三方的base64编码的js库,进行了编码然后传递。

其实在前端的加密都是寻求一个心理安慰,作用是微乎其微的,确实也更加好那么一点。

今天在看 filer 无意看到了 btoa和atob。

这不就是内置的base64编码和解码么,那么接下来有两个问题 兼容性和中文的支持情况

 

兼容性

兼容性IE10以上和其他浏览器都支持,还是相对不错的,要是移动端都支持。

借两张 MDN的图片,要是真遇到IE怎么办,引入polyfill库,引入第三方库,或者直接不进行编码。

window.btoa 和 window.atobwindow.btoa 和 window.atob

 

 中文编码

中文编码一直都是程序员要关注的,window.btoa('哎哟不错'),是会抛出异常的。

那么一般的思想都是先借用encodeURIComponent进行base64编码,

然后借用decodeURIComponent进行base64解码。

后看到MDN的备注,

function utf8_to_b64( str ) {    return window.btoa(unescape(encodeURIComponent( str )));}function b64_to_utf8( str ) {    return decodeURIComponent(escape(window.atob( str )));}// Usage:utf8_to_b64(' à la mode'); // "4pyTIMOgIGxhIG1vZGU="b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // " à la mode"//译者注:在js引擎内部,encodeURIComponent(str)相当于escape(unicodeToUTF8(str))//所以可以推导出unicodeToUTF8(str)等同于unescape(encodeURIComponent(str))

 

 两者的问题都解决了,那么到了引用场景了。

 简单的加密解密,,对于Html5 Api中出现的如FileReader Api, 拖拽上传,甚至是Canvas,Video截图都可以实现。

 

URL.createObjectURL也可以生成base64格式的东西,关键在于性能,借用别人的截图。这说明个啥,能用btoa的地方优先喽。

window.btoa 和 window.atob

 

 

 

阴影:

WindowBase64 - Web API 接口 | MDN

window.atob()与window.btoa()方法实现编码与解码 - 风雨后见彩虹 - 博客园

Base64 encoding and decoding - Web APIs | MDN

new Blob vs btoa

版权声明

本文仅代表作者观点,不代表百度立场。
本文系作者授权百度百家发表,未经许可,不得转载。

热门文章
  • 机房智能化温湿度解决方式之POE供电以太网温湿度传感器

    机房智能化温湿度解决方式之POE供电以太网温湿度传感器
    机房智能化温湿度解决方式之POE供电以太网温湿度传感器 北京盈创力和电子科技有限公司 智能型TCP网口温湿度记录仪 北京IP网络温湿度记录仪厂家,北京盈创力和 北京智能型TCP网口温湿度记录仪IP网络温湿度记录仪是一种新型的基于TCP/IP协议双绞线以太网标准温湿度采集模块,利用它可以实现现场温度值、相对湿度值的采集,同时利用其自身的RJ45通信接口可以方便地和机房监控主机或交换机集线器进行联网。 工作于-40℃~85℃工业级带...
  • Sequential Monte Carlo Methods (SMC) 序列蒙特卡洛/粒子滤波/Bootstrap Filtering

    Sequential Monte Carlo Methods (SMC) 序列蒙特卡洛/粒子滤波/Bootstrap Filtering
    Problem Statement 我们考虑一个具有马尔可夫性质、非线性、非高斯的状态空间模型(State Space Model):对于一个时间序列上的观测结果{yt,t∈N}\\{ y_t , t \\in N \\}{yt​,t∈N},我们认为每个观测结果yty_tyt​的生成依赖于一个无法直接观察的隐变量xt∈{xt,t∈N}x_t \\in \\{x_t , t \\in N \\}xt​∈{xt​,t∈N},即:p(...
  • HTTP状态保持的原理

    HTTP状态保持的原理
    a)在用户登录之后,浏览器返回响应的时候会在响应中添加上cookieb)浏览器接收到cookie之后会自动保存c)当用户再次请求同一服务器中的其他网页的时候,浏览器会自动带上之前保存的cookied)服务接收到请求之后可以请 request 对象中取到cookie 判断当前用户是否登录  Http是无状态的,就是连接时数据互通,关闭后...
  • Hive 系统函数及示例

    Hive 系统函数及示例
    查看所有系统函数 show functions; 函数分类 内置函数【系统函数】 数学函数: floor、round、ceil、cos、log2等 字符串函数: length、reverse、trim、lower、get_json_object、repeat等 收集函数: size 转换函数: cast 日期函数: year、month、datediff、date、date_add等 条件函数: coalesce、case…w...
  • CSRF的原理和防范措施

    CSRF的原理和防范措施
    a)攻击原理:i.用户C访问正常网站A时进行登录,浏览器保存A的cookieii.用户C再访问攻击网站B,网站B上有某个隐藏的链接或者图片标签会自动请求网站A的URL地址,例如表单提交,传指定的参数iii.而攻击网站B在访问网站A的时候,浏览器会自动带上网站A的cookieiv.所以网站A在接收到请求之后可判断当前用户是登录状态,所以...
标签列表