原文链接:dsx2016.com/?p=972
微信公众号:大师兄2016
无论是传递给后台url地址,还是前端复制链接和分享链接.
都需要对url进行处理,避免一些特殊符号等格式造成加载错误等
base64
url要处理的一般包括中文,+,#等特殊字符,以及回调地址等
在这里使用的是base64编码,使用的为github的第三方库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
