js对url进行base64加密解密

原文链接:https://dsx2016.com/?p=972

微信公众号:大师兄2016

无论是传递给后台url地址,还是前端复制链接和分享链接.

都需要对url进行处理,避免一些特殊符号等格式造成加载错误等

base64

url要处理的一般包括中文,+,#等特殊字符,以及回调地址等

在这里使用的是base64编码,使用的为github的第三方库js-base64

参考地址:

https://github.com/dankogai/js-base64

首先要明确的是,这个base64库可以过滤中文,但是加密结果依旧含有特殊符号,所以仍然需要单独对特殊符号进行处理.

过滤中文参考官方demo

加密

Base64.encode('dankogai');  // ZGFua29nYWk=
Base64.encode('小飼弾');    // 5bCP6aO85by+
Base64.encodeURI('小飼弾'); // 5bCP6aO85by-

解密

Base64.decode('ZGFua29nYWk=');  // dankogai
Base64.decode('5bCP6aO85by+');  // 小飼弾
// note .decodeURI() is unnecessary since it accepts both flavors
Base64.decode('5bCP6aO85by-');  // 小飼弾

特殊符号

作为url参数主要需要过滤base64高频且影响加载的内容,核心有以下8种

把特殊符号替换为16进制

+	空格	/	?	%	&	=	#
%2B	%20	%2F	%3F	%25	%26	&3D	%23

进行base64编码后,在使用js过滤,参考代码如下

// 加密url
import { Base64 } from 'js-base64';
let urlStr=Base64.encodeURI(url)
​
// 过滤特殊符号
urlStr = urlStr.replace(/\+/g, "%2B");
urlStr = urlStr.replace(/\=/g, "&3D");
urlStr = urlStr.replace(/\&/g, "%26");
urlStr = urlStr.replace(/\//g, "%2F");
urlStr = urlStr.replace(/\#/g, "%%23");
urlStr = urlStr.replace(/\?/g, "%3F");
urlStr=urlStr.replace(/\s/g,"%20");
urlStr = urlStr.replace(/\%/g, "%25");

解密

使用base64的decode

注意decode可以解密encode和encodeURI两种

let url=Base64.decode(urlStr)

注意事项

使用encode会可能产生以下乱码,建议对url使用encodeURI加密

浏览器报错信息如下(其是就是base64加密解密除了问题,以及乱码)

Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded error