前端开发之jsencrypt加密解密的使用方法和使用示例

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

前言

jsencrypt官方文档
公钥私钥生成网址
jsencrypt就是一个基于rsa加解密的js库,常用在向后台发送数据的时候

本文是通过node.js的window.btoa和window.atob配合jsencrypt进行加密

效果图

jsencrypt加密解密,vue组件,前端,javascript,vue.js,typescript,json

一、vue中简单案例

1、安装组件

npm install jsencrypt --dev 

2、创建加密解密的方法文件

jsencrypt加密解密,vue组件,前端,javascript,vue.js,typescript,json文章来源地址https://www.toymoban.com/news/detail-578629.html

3、文件内容

import JSEncrypt from 'jsencrypt'
//去密钥生成网址去生成公钥和密钥 http://tools.jb51.net/password/rsa_encode
const publicKey = '生成的公钥'
const privateKey ='生成的密钥'

/**
 * 最长加密长度
 */
const MAX_ENCRYPT_BLOCK = 117
/**
 * 最长解码长度
 */
const MAX_DECRYPT_BLOCK = 128

/**
 * @description RSA加密(支持长字符加密)
 */
export async function encryptedData (data:any) {
  //创建实例
  const encrypt = new JSEncrypt()
  // 设置公钥
  encrypt.setPublicKey(
    `-----BEGIN PUBLIC KEY-----${publicKey}-----END PUBLIC KEY-----`
  )
  let bufTmp = ''
  let hexTmp:any = ''
  let result = ''
  const buffer = JSON.stringify(data)
  let offSet = 0
  const inputLen = buffer.length
  while (inputLen - offSet > 0) {
    if (inputLen - offSet > MAX_ENCRYPT_BLOCK) {
      bufTmp = buffer.slice(offSet, offSet + MAX_ENCRYPT_BLOCK)
    } else {
      bufTmp = buffer.slice(offSet, inputLen)
    }
    //对数据进行加密
    hexTmp = encrypt.encrypt(bufTmp.toString())
    result += hexTmp
    offSet += MAX_ENCRYPT_BLOCK
  }
  //js可以使用Buffer.from()  ts中使用Buffer.from(),运行后控制台会报错Buffer undefined所以使用替代方案node方法btoa再次加密
  return btoa(result)
}

/**
 * @description RSA解密(支持长字符解密)
 * @param data
 * @returns {PromiseLike<ArrayBuffer>}
 */
export function decryptedData (data) {
  const decrypt = new JSEncrypt()
  //设置私钥
  decrypt.setPrivateKey(
    `-----BEGIN RSA PRIVATE KEY-----${privateKey}-----END RSA PRIVATE KEY-----`
  )
  let bufTmp = ''
  let hexTmp:any = ''
  let result = ''
  //通过使用atob解码数据  如果使用的Buffer.from()使用Buffer.from()解码数据
  const buffer = atob(data)
  let offSet = 0
  const inputLen = buffer.length
  while (inputLen - offSet > 0) {
    if (inputLen - offSet > MAX_DECRYPT_BLOCK) {
      bufTmp = buffer.slice(offSet, offSet + MAX_DECRYPT_BLOCK)
    } else {
      bufTmp = buffer.slice(offSet, inputLen)
    }
    //对数据解码
    hexTmp = decrypt.decrypt(bufTmp)
    result += hexTmp
    offSet += MAX_DECRYPT_BLOCK
  }
  return JSON.parse(result)
}

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

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

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

相关文章

  • 前端使用AES密码加密、解密,使用详细(crypto加密解密,前后端分离,AES加密解密)

    1、 首先安装 crypto-js插件,安装命令如下:    -S等同于--save,保存在package.json文件中,是在dependencies 下, --save安装包信息将加入到dependencies(生产环境)中,生产阶段的依赖,也就是项目运行时的依赖,就是程序上线后仍然需要依赖; -D等同于--save-dev,也保存在package.j

    2024年02月11日
    浏览(48)
  • java和js实现前端加密后端解密,后端加密前端解密(Base64)

    目录 1.前端加密后端解密 2.后端加密前端解密 在前端和后端数据传输时,常常涉及到隐私数据的传输(例如用户名和密码),这时,我们就需要对隐私数据进行加密解密 1.前端加密后端解密         1.1 前端jquery实现         1.2后端 2.后端加密前端解密         2.1后端加密

    2024年02月16日
    浏览(41)
  • 前端AES加密解密

    前端经常会遇到这种接口和参数需要加密的情况,目前用的最多的就是aes加密了。以下就是操作步骤。以下方式适用各个前端框架,请自行根据框架修改对应语法 1.安装 CryptoJS 这个库就是用来加密的核心,直接打开项目终端,输入 npm install crypto-js --save 2. 新建 crypto.js 在 @/

    2024年02月13日
    浏览(44)
  • 使用base64加密解密的多种方法:包含pc端和微信小程序

    1、pc端 Window 对象 Window 对象表示浏览器中打开的窗口。 平常在开发pc端浏览器的时候。如果要加密或者解密成为一个 base-64 编码的字符串。我们都可以使用Window 对象里的对象方法: atob() 解码一个 base-64 编码的字符串。 btoa() 创建一个 base-64 编码的字符串 我们可以直接在浏览

    2024年02月15日
    浏览(39)
  • 前端加密/解密方式

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

    2024年02月04日
    浏览(33)
  • 前端SM4加密解密

    前后端加密一致,如果不一致就是key有问题 调用方法: sm4.js文件

    2024年04月25日
    浏览(34)
  • 使用非对称加密(RSA) 实现前端加密后端解密

    数据加密方式有: 单向加密、对称加密、非对称加密、加密盐、散列函数、数字签名。 1、单向加密 单向加密通过对数据进行摘要计算生成密文,密文不可逆推还原。只能加密,不能解密,常用于提取数据的指纹信息以此来验证数据的完整性。但是会引发雪崩效应(雪崩效应

    2024年02月08日
    浏览(45)
  • AES对称加密实战——前端js加密后端python解密

    高级加密标准(AES, Advanced Encryption Standard),是一种最常见的对称加密算法 。其加密流程如下图所示,发送方通过密钥对明文加密后进行网络传输,接收方用同样的密钥将密文解密。在前后端通讯场景中,可利用AES算法对用户密码进行加密后传输,防止被抓包而造成密码泄露。

    2024年02月04日
    浏览(41)
  • 国密SM2前端加密解密示例

    目录 一、 安装sm2依赖 二、编写代码 1、data中绑定数据 2、公钥加密 3、私钥解密 4、按钮绑定一下,数据可见一下 三、完整代码 要改变的数据phone和过程数据copyphone,公钥publicKey和私钥privateKey 具体生成测试公钥私钥可参照SM2加解密 C1为65字节第1字节为压缩标识,这里固定为

    2024年02月03日
    浏览(41)
  • 前端sm2国密加密解密

    1.下载国密包 2.获取后端的公钥 注sm-crypto使用BC库加解密前端密钥与后端密钥是两队,非常规的base64密钥 前端公钥需要在前面加04占位否则无法解密 3.前端使用公钥进行加密 生成的加密串加04方便后端解密 4.前端使用私钥解密

    2024年02月11日
    浏览(37)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包