路由转码与字符串加密

路由转码的两组方法

encodeURIdecodeURI

encodeURIComponentdecodeURIComponent

这两组方法都可以用来对路由进行转码处理,掌握它们的细微差别,在面对不同的需求时合理取舍。

encodeURI('http://jb51.net/my test.asp/中文词组?name=stle&car=saab')

上面代码的转码结果:http://jb51.net/my%20test.asp/%E4%B8%AD%E6%96%87%E8%AF%8D%E7%BB%84?name=stle&car=saab

对应的decodeURI用于将encodeURI转码的结果还原,使用方法与encodeURI相同

encodeURIComponent('http://jb51.net/my test.asp/中文词组?name=stle&car=saab')

上面代码的转码结果:
http%3A%2F%2Fjb51.net%2Fmy%20test.asp%2F%E4%B8%AD%E6%96%87%E8%AF%8D%E7%BB%84%3Fname%3Dstle%26car%3Dsaab

对应的decodeURIComponent用于将encodeURIComponent转码的结果还原,使用方法与encodeURIComponent相同。

对两种方式的转码结果进行对比,不难发现差别:
encodeURIComponent比encodeURI转码更加彻底,encodeURIComponent将路由字符串中的保留字符也进行转码。
保留字符用于分割URI中的各个部分。这些字符是:";" | “/” | “?” | “:” | “@” | “&” | “=” | “+” | “$” | “,”

字符串的加密与解密

1.base64加密与解密
现在原生的js支持base64 (IE10,主流浏览器)
使用方法也很简单
加密 window.btoa(decodeData)
解密 window.atob(encodeData)

如果加密内容中含有中文字符需要先转码

加密 window.btoa(encodeURIComponent('中文词组'))
解密decodeURIComponent(window.atob('JUU0JUI4JUFEJUU2JTk2JTg3JUU4JUFGJThEJUU3JUJCJTg0'))

2.md5加密
md5加密算法采用密码散列函数算法,从根本意义上讲md5只能加密不能解密。
无法支持解密的原因类似于
10除以3余数为1,4除以3余数也为1,但余数为一的就不知道这个数是哪个了。
当解密后字符串中出现1时,无法知道它原本对应的数字是多少。
但相同的字符串在加密后,结果一定唯一。所以,md5加密经常用于密码加密。
登录密码用md5加密后,数据库保存的是唯一加密后的字符串,前端登录必须输入密码,通过MD5加密后(相同的字符串在加密后,结果一定唯一)与数据库保存的md5字符串比对。

因为MD5加密的特性,解密无法实现,当忘记密码时,只能选择重置密码而不是找回密码。

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>

<script>
  md5('fgdsagjufg')
<script>

除了引用MD5js以外还可以下载MD5.js插件。

现在网上存在很多所谓的md5在线加密与解密的工具,不过是将加密后的MD5字符串保存起来,如果复杂的字符串或者从未出现过得字符串是无法被解密的。

3.sha1加密
与MD5类似,只能加密不能解密,采用哈希算法。

 <script type="text/ecmascript" src="sha1.js"></script>

var sha = hex_sha1('mima123465');
console.log(sha);

除了引用sha1js以外还可以下载sha1.js插件。

4.RSA公钥加密私钥解密
先引入相关配置文件

<script src="js/jsencrypt.js"></script>

前端在向后台发起登录请求之前,先请求后台获取公钥的方法

var publicKey = null;
$.ajax({
     
            url: "xxx",
            type: "post",
            dataType: "text",
            success: function(data) {
     
                var encrypt = new JSEncrypt();
                if(data){
     
                    publicKey = data;
				};
            }
        });

通过公钥对用户名和密码加密

encrypt.setPublicKey(publicKey);
 var username;
var password;
username = encrypt.encrypt(vm.username.trim());
password = encrypt.encrypt(vm.password.trim());

接下来就是用加密后的用户名密码请求后台,用户名密码传输时千万不要字符串拼接方式传输

$.ajax({
     
type: "POST",
 url: "xxxxxx",
 data: {
     
       "username":username,
		"password":password,
},
 dataType: "json",
 success: function (result) {
     
        if (result.code == 0) {
     //登录成功
         parent.location.href = 'index.html';
        } else {
     
            vm.error = true;
           vm.errorMsg = result.msg;
            vm.refreshCode();
      }
    }
 });

5.ASE加密与解密
github地址 https://github.com/brix/crypto-js

浏览器端加密

import CryptoJS from 'crypto-js';
const AES_KEY = "qq3217834abcdefg"; //16位
const AES_IV = "1234567890123456";  //16位

function aes_encrypt(plainText) {
     
    var encrypted = CryptoJS.AES.encrypt(plainText, CryptoJS.enc.Utf8.parse(AES_KEY), {
     iv:  CryptoJS.enc.Utf8.parse(AES_IV)});
    return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
}


data = 'my message';
encrypt_data = aes_encrypt(data);
console.log(encrypt_data);

node服务器端解密

function aes_decrypt(ciphertext) {
     
    var decrypted = CryptoJS.AES.decrypt(ciphertext, CryptoJS.enc.Utf8.parse(AES_KEY), {
     iv: CryptoJS.enc.Utf8.parse(AES_IV)});
    return decrypted.toString(CryptoJS.enc.Utf8);
}

const encrypt_data = ctx.cookie('data');
cibst decrypt_data = aes_decrypt(encrypt_data);
console.log(decrypt_data);

ASE的安全性
由于ASE加密与解密的过程中,前后端都采用统一的key和iv来进行处理,key和iv都会在前端被暴露,安全性不如RSA公钥加密私钥解密的方式。

你可能感兴趣的:(前端逻辑基础,路由转码,字符串加密解密,md5,base64,RSA)