前端常用加密方式及使用

这篇具有很好参考价值的文章主要介绍了前端常用加密方式及使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端常用加密方式有RSA加密、AES加密、MD5加密、SHA256加密以及国密:

/ 生成随机字符串 
function randomString(len) {
    len = len || 16;
    const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
    const maxPos = $chars.length;
    let pwd = '';
    for (let i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
}
const aesKey = randomString(16);

一、AES加密:安全性

  • AES加密:对称性加密(密钥1个,加解密都用这个密钥)
  • AES为一次一密,每次加密都会生成新的密钥
  • AES加密为了增加报文安全性

1.1 'crypto-js'库中加解密示例

  • npm: crypto-js

1.1.1 纯文本加密

/ 加密
var ciphertext = CryptoJS.AES.encrypt('my message', 'secret key 123').toString();

// 解密
var bytes  = CryptoJS.AES.decrypt(ciphertext, 'secret key 123');
var originalText = bytes.toString(CryptoJS.enc.Utf8);

console.log(originalText); // 'my message'

1.1.2 对象加密

var data = [{id: 1}, {id: 2}]

// 加密
var ciphertext = CryptoJS.AES.encrypt(JSON.stringify(data), 'secret key 123').toString();

// 解密
var bytes  = CryptoJS.AES.decrypt(ciphertext, 'secret key 123');
var decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));

console.log(decryptedData); // [{id: 1}, {id: 2}]

1.2 项目中使用

// 引入crypto-js库
import * as CryptoJS from 'crypto-js';
import getSha256 from 'crypto-js/sha256';
/**
* @param {string} data - 需要加密的数据, 传过来前先进行 JSON.stringify(data);
* @param {string} key - 加密使用的 key
* CipherOption, 加密的一些选项:
* mode: 加密模式, 可取值(CBC, CFB, CTR, CTRGladman, OFB, ECB), 都在 CryptoJS.mode 对象下
* padding: 填充方式, 可取值(Pkcs7, AnsiX923, Iso10126, Iso97971, ZeroPadding, NoPadding), 都在 CryptoJS.pad 对象下
* iv: 偏移量, mode === ECB 时, 不需要 iv
* 返回的是一个加密对象
*/
const key = CryptoJS.enc.Utf8.parse(aesKey);
let data = JSON.stringify(data);
const AESData = CryptoJS.AES.encrypt(data, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
});
// AESData 传给后台

二、RSA加密:安全性

  • 使用jsencrypt.js:就是一个基于rsa加解密的js库
  • RSA加密:非对称性加密(有一对公约和私钥,一个公钥对应一个私钥)
  • 加密原理来自于大数的质因数分解
  • 前端用公钥加密 后端用私钥解密
  • AES加密为了增加报文安全性

2.1 项目中使用

const JSEncrypt = require("jsencrypt"); // 引入模块
const encrypt = new JSEncrypt.JSEncrypt(); // 实例化加密对象
encrypt.setPublicKey(公钥); // 设置公钥
const RSAData = encrypt.encrypt(aesKey); // 要加密的内容
// RSAData 传给后台

三、SHA256加密:防篡改

  • sha256加密,类似于MD5加密,把一个字符串按照一个规则转换一下
  • 该加密过程不可逆(即由A可加密成B,但无法由B解密出A)
  • 文章摘要(防篡改):一般用SHA256加密或MD5加密进行文章摘要,即前端把需要传给后端的报文用SHA256加密后,把加密后的字符串传给后端,后端收到后,会先把解密后的明文再次进行SHA256加密,然后和前端传来的SHA256密文进行对比,如果一致,证明数据未被篡改
// 字符串简单加密
const encryptData = CryptoJS.SHA256(‘待加密字符串’).toString();

3.1 项目中使用

import getSha256 from 'crypto-js/sha256'; 
const sha256Encrypt = getSha256(data).toString(); // data - 需要加密的数据
const encryptedHexStr = CryptoJS.enc.Hex.parse(sha256Encrypt);
const mic = CryptoJS.enc.Base64.stringify(encryptedHexStr); // base64加密
// mic 传给后台

四、其他加密

4.1 ECC加密

  • 非对称加密,和RSA类似
  • 有一对公钥和私钥
  • 加密原理来自于椭圆双曲线

4.2 MD5加密

  • 类似于SHA256加密(SHA256就是高级版的MD5)

4.3 国密

npm地址:sm-crypto文章来源地址https://www.toymoban.com/news/detail-417842.html

  • 中国独有的一套加密算法,有SM1,SM2,SM3,SM4
  • SM1 - 类似于AES加密,对称加密,该算法不公开
  • SM2 - 基于ECC,非对称加密
  • SM3 - 类似于MD5或SHA256,用于文章摘要
  • SM4 - 类似于AES加密,对称加密

五、AES解密

项目中使用

// 引入crypto-js库
import * as CryptoJS from 'crypto-js';
import getSha256 from 'crypto-js/sha256';
function decryption(res) {
    /**
    * @param {object} res - 响应报文
    * 响应报文格式: {data: 'QukvMrekoCs7xnvqVDorjD4x6YMJx52HOqYM76YSDeOdwhGEGJvRp5aUZnR', mic: 'YrPA7gr8PgqvR7MKCueWX9LB88vkhadK0Ktg='}
    */
    let decryptedData = CryptoJS.AES.decrypt(res.data, key, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
    });
    var decryptedStr = decryptedData.toString(CryptoJS.enc.Utf8); // 解密后明文

    // 对响应报文进行SH256加密
    const sha256Decode = getSha256(decryptedStr).toString();
    var encryptedHexStr = CryptoJS.enc.Hex.parse(sha256Decode);
    var sha256Result = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    
    // 将响应报文前端与后端加密后的密文进行比对,比对一致则说明数据未被篡改
    if (sha256Result === res.mic) {
        return JSON.parse(decryptedStr)
    } else {
        Toast.info('解密失败')
    }
}

到了这里,关于前端常用加密方式及使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 常用的加密方式有哪些

    一、密钥散列 采用MD5或者SHA1等散列算法,对明文进行加密。严格来说,MD5不算一种加密算法,而是一种摘要算法。无论多长的输入,MD5都会输出一个128位(16字节)的散列值。而SHA1也是流行的消息摘要算法,它可以生成一个被称为消息摘要的160位(20字节)散列值。MD5相对

    2024年01月21日
    浏览(36)
  • 前端加密/解密方式

    前言: 通常在前后端之间数据传输经常会涉及到一些敏感数据、cookie携带的token加密等问题。 提到加密,相对于后台开发来说,遇到最多的需要加密处理的应用场景应该是接口的加密签名校验了。不过这种一般都用于服务端与服务端之间的相互调用。因为没有暴露在外的代码

    2024年02月04日
    浏览(42)
  • html前端的几种加密/解密方式

    一、base64加密 Base64编码:Base64是一种将二进制数据转换为可打印字符的编码方式。在前端,可以使用JavaScript的 btoa() 函数进行Base64编码,使用 atob() 函数进行解码。 二、MD5加密(不可逆)  MD5散列:MD5是一种广泛使用的散列算法,可以将输入转换为固定长度的散列值。在前端,

    2024年04月09日
    浏览(58)
  • JS---浅谈前端数据加密的不同方式

    在前端开发中我们经常会遇到对数据 加密 or 解密 的场景,着重介绍下常用的几种加密方式 一、sha1加密 二、AES加解密 三、base64加密 四、MD5加密 四、编码/解码字符串

    2024年02月20日
    浏览(42)
  • 前端如何加密数据--五种方式(base64加密、md5加密、sha1加密、字符串方法加密、AES加密)

    1.base64加密(包括小写字母a-z、大写字母A-Z、数字0-9、符号\\\"+\\\"、\\\"/\\\"一共64个字符的字符集,另加一个“=”,实际是65个字符) 字符串转换为base64:str64 = window.btoa(str) base64转换为字符串:str=window.atob(str64) 2.md5加密 3.sha1加密   4.字符串的编码和解码(JS函数的escape()和unescape())

    2024年02月16日
    浏览(60)
  • 常用的前端4种请求方式

    第一种情形: 前端发送get请求,使用data方式传递参数。 后端使用@GetMapping注解,不使用@RequestBody接收参数 这种方法实际接收不到前端传递来的参数,因为get请求参数传递不能是data,而应该是params。 如果把后端接收参数方式改为@RequestBody,前端不作改动,则请求会报400错误

    2024年02月16日
    浏览(34)
  • 【前端】CSS(引入方式+选择器+常用元素属性+盒模型+弹性布局)

    层叠样式表(Cascading Style Sheets) 对元素位置的排版进行精确控制,实现结构和样式的分离 CSS 控制页面的展示效果 HTML决定页面的结构 选择器+{一条/N条声明} 选择器:要修改谁 声明:具体要修改什么内容。声明的属性是键值对,用分号区分,键和值用: 通常情况下,把style放

    2024年04月15日
    浏览(53)
  • JS使用RSA非对称加密方式加密传输数据

    场景:出于安全考虑,要求对页面提交的关键信息进行加密,在网络传输过程中使用密文传递,在服务器端解密后使用。这样不管在浏览器端还是网络传输中截获了数据,都无法获取实际的信息。 方法:使用非对称加密算法,在前端页面使用公钥进行加密,在后端服务使用密

    2023年04月08日
    浏览(38)
  • 前端使用RSA加密

    2024年01月25日
    浏览(45)
  • Spring Boot接收从前端传过来的数据常用方式以及处理的技巧

    前端传递过来的数据类型,老师这里会把它分为两个主要的方向: 第1个方向:非json格式的数据 第2个方向:json格式的数据 非json格式的数据 方式1 :直接可以将控制层方法的参数名称和请求的参数名称保持一致来进行接收。 场景:数据量(参数个数)比较小,=3个参数 优点

    2024年02月01日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包