前端加密方式

最新推荐文章于 2024-02-25 10:00:00 发布

原创最新推荐文章于 2024-02-25 10:00:00 发布

· 493 阅读

0 ·

版权

文章标签：

#javascript

js 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了前端加密的重要性，纠正了Base64编码并非加密的误解，并详细阐述了URI编码的用途。重点讲解了RSA加密算法，包括其原理、生成密钥对的方法以及在Mac和Windows上的操作步骤。此外，还演示了如何使用jsencrypt.js库在JavaScript中实现RSA加密和解密，以及在用户注册和登录场景中的应用。最后提到了其他加密方式如MD5和AES/DES。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端加密

前言：很长一段一直吧base64当作前端加密的一种解决方案，直到最近看一本书中提到它只是编码使用方法。

base 64对字符串进行编码解码大部分场景是为了避免浏览器异常解析导致产生BUG，
例如：避免服务器收到不可预知的请求，对任何用户输入的作为URI部分的内容你都需要用encodeURIComponent进行转义再用decodeURIComponent进行解析。

encodeURIComponent与encodeURI的区别:
encodeURIComponent('https://editor.youkuaiyun.com/md/wd/ not_checkout=1'):
// 结果：'https%3A%2F%2Feditor.youkuaiyun.com%2Fmd%2Fwd%2F%20not_checkout%3D1'
encodeURI('https://editor.youkuaiyun.com/md/wd/ not_checkout=1')
// 结果：'https://editor.youkuaiyun.com/md/wd/%20not_checkout=1'

使用encodeURI()编码后的结果是除了空格之外的其他字符都原封不动，只有空格被替换成了%20。而encodeURIComponent()方法则会使用对应的编码替换所有非字母数字字符。这也正是可以对整个URI使用encodeURI()，而只能对附加在现有URI后面的字符串使用encodeURIComponent()的原因所在。一般来说,我们使用encodeURIComponent()方法的时候要比使用encodeURI()更多,因为在实践中更常见的是对查询字符串参数而不是对基础URL进行编码.

那前端如何加密

前端利用jsencrypt.js进行RSA加密

对于加密的学习一直很迷茫，但是今天看到博主的这篇文章感觉非常的通俗易懂，为了方便以后查阅，所以就保存下来，在此附上博主文章的地址

什么是RSA加密

RSA加密算法是一种非对称加密算法，RSA加密使用了"一对"密钥.分别是公钥和私钥,这个公钥和私钥其实就是一组数字!其二进制位长度可以是1024位或者2048位.长度越长其加密强度越大,目前为止公之于众的能破解的最大长度为768位密钥,只要高于768位,相对就比较安全.所以目前为止,这种加密算法一直被广泛使用.

RSA加密与解密

使用公钥加密的数据,利用私钥进行解密
使用私钥加密的数据,利用公钥进行解密

RSA秘钥生成方式

Mac系统内置OpenSSL(开源加密库),所以可以直接在终端上使用命令。

Windows系统可以使用git命令行工具

单击鼠标右键——git bash here 调出git bash
生成私钥，密钥长度为1024bit

flutter-mobile % openssl genrsa -out private.pem 1024
Generating RSA private key, 1024 bit long modulus
.............++++++
.++++++
e is 65537 (0x10001)

从私钥中提取公钥

$ openssl rsa -in private.pem -pubout -out public.pem
writing RSA key

这样就生成了private.pem 和 public.pem两个文件，可以利用终端进行查看


flutter-mobile % cat private.pem
-----BEGIN RSA PRIVATE KEY-----
MIICXQIBAAKBgQDP36MfM1ia+gadivXXEZ/EqKkpf7pkHNkeP4E3DAFgs+RkC34Z
P+KbnwZhbY4yUkQorRux9rpJA0VRvqkADwhCpLCzpy3Spf7azNoQl6RQuYsWoZUv
mH8i4dIjsm3PXqd4aajgErbobmk4uWwfwFag2t0fynyk+yv5AJQDe9tKHQIDAQAB
AoGAEKfHhyFzEP/FdewDZJcJ6RTmcOfGBG13TAAkl0eD+L6RJx7wnI9M1dE5Dqdb0rLcBqvsBiHe7u5VQRMZyicva8cApS96wH0B73cSp6ZvULUCQQDsGpZvyXKc8kTq
MBqGWHfuisEhjW0yZtUlFvfVMce35h2qrHza5Hgo1eHW4QP1z4rvTsRj5lipQnNU
PDS9TAB+E99UZn1VTPI/RBg0QVdjAgBbfwJBAMisGGzO1WFb8QLy+7hv/Q98U4ZH
BCawjDzH9sD3XH6LUW+8xynswcxDbX4LJiiIy9d2JSmboIPL/OYkZa40W20CQAQO
5RWp7KFO7ERal5dOYodg4gK6FvpZCifF5fgLQ8dmieF2pesRe+kJmg7wQ1TgRIjD
4PFNu03ika5LgIDcuMkCQQDoz6DJGFZ0w7105nVsjdZIbuXHPp0KLQxcZKlkNgmg
KVFxvau/zqcWWY7md9s+qHsc/8IOOEGi5mlwSe5uWwAr
-----END RSA PRIVATE KEY-----

flutter-mobile % cat public.pem
-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDNNorgFngK1zjHOnQlIUh5NjOx
ZIiEPZ8Knu6B/IyY0LBRToo1TZC7/nK6j8on/2sBdv5nFuTwlOpW9UL8C4yZJdjT
wYXn5X+wZZsz1RXNI5zjhSXuGeYzF7WhxusKo6zrR6b0IMNg2W016PWU3UkjOXxo
aIGkMN77oIorPP5bHQIDAQAB
-----END PUBLIC KEY-----

jsencrypt介绍

jsencrypt就是一个基于rsa加解密的js库

使用方法

安装

  npm install jsencrypt

引入

  import JSEncrypt from 'jsencrypt'

RSA加密

  var encryptor = new JSEncrypt()  // 创建加密对象实例
  //之前ssl生成的公钥，复制的时候要小心不要有空格
  var pubKey = '-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC1QQRl0HlrVv6kGqhgonD6A9SU6ZJpnEN+Q0blT/ue6Ndt97WRfxtSAs0QoquTreaDtfC4RRX4o+CU6BTuHLUm+eSvxZS9TzbwoYZq7ObbQAZAY+SYDgAA5PHf1wNN20dGMFFgVS/y0ZWvv1UNa2laEz0I8Vmr5ZlzIn88GkmSiQIDAQAB-----END PUBLIC KEY-----'
  encryptor.setPublicKey(pubKey)//设置公钥
  var rsaPassWord = encryptor.encrypt('要加密的内容')  // 对内容进行加密

RSA解密

  var decrypt = new JSEncrypt()//创建解密对象实例
  //之前ssl生成的秘钥
  var priKey  = '-----BEGIN RSA PRIVATE KEY-----MIICXAIBAAKBgQC1QQRl0HlrVv6kGqhgonD6A9SU6ZJpnEN+Q0blT/ue6Ndt97WRfxtSAs0QoquTreaDtfC4RRX4o+CU6BTuHLUm+eSvxZS9TzbwoYZq7ObbQAZAY+SYDgAA5PHf1wNN20dGMFFgVS/y0ZWvv1UNa2laEz0I8Vmr5ZlzIn88GkmSiQIDAQABAoGBAKYDKP4AFlXkVlMEP5hS8FtuSrUhwgKNJ5xsDnFV8sc3yKlmKp1a6DETc7N66t/Wdb3JVPPSAy+7GaYJc7IsBRZgVqhrjiYiTO3ZvJv3nwAT5snCoZrDqlFzNhR8zvUiyAfGD1pExBKLZKNH826dpfoKD2fYlBVOjz6i6dTKBvCJAkEA/GtL6q1JgGhGLOUenFveqOHJKUydBAk/3jLZksQqIaVxoB+jRQNOZjeSO9er0fxgI2kh0NnfXEvH+v326WxjBwJBALfTRar040v71GJq1m8eFxADIiPDNh5JD2yb71FtYzH9J5/d8SUHI/CUFoROOhxr3DpagmrnTn28H0088vubKe8CQDKMOhOwx/tS5lqvN0YQj7I6JNKEaR0ZzRRuEmv1pIpAW1S5gTScyOJnVn1tXxcZ9xagQwlT2ArfkhiNKxjrf5kCQAwBSDN5+r4jnCMxRv/Kv0bUbY5YWVhw/QjixiZTNn81QTk3jWAVr0su4KmTUkg44xEMiCfjI0Ui3Ah3SocUAxECQAmHCjy8WPjhJN8y0MXSX05OyPTtysrdFzm1pwZNm/tWnhW7GvYQpvE/iAcNrNNb5k17fCImJLH5gbdvJJmCWRk=-----END RSA PRIVATE KEY----'
  decrypt.setPrivateKey(priKey)//设置秘钥
  var uncrypted = decrypt.decrypt(encrypted)//解密之前拿公钥加密的内容