JS---浅谈前端数据加密的不同方式

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

在前端开发中我们经常会遇到对数据 加密 or 解密 的场景,着重介绍下常用的几种加密方式文章来源地址https://www.toymoban.com/news/detail-828195.html

一、sha1加密

const CryptoJS = require('crypto-js') // 引入AES

function sha1(params) {
  return CryptoJS.SHA1(params).toString()
}

二、AES加解密

const CryptoJS = require('crypto-js') // 引入AES
/**
 * @param data 明文/密文
 * @param key  密钥
 * @param iv   偏移量
 */
// key: '1qa2ws3ed4rf5tg122s'
// iv:  'test1234567890IV'

// 加密
function aesEncrypt(data, key, iv) {
  let _key = CryptoJS.enc.Utf8.parse(key)
  let _iv = CryptoJS.enc.Utf8.parse(iv)
  // 或 let _iv = CryptoJS.lib.WordArray.random(16)
  let encrypted = CryptoJS.AES.encrypt(_data, _key, {
    iv: _iv, // 偏移量(初始向量), CBC/CFB模式需加偏移量
    mode: CryptoJS.mode.CBC, // CBC/CFB/ECB模式
    padding: CryptoJS.pad.Pkcs7 // padding处理,Pkcs5/Pkcs7/NoPadding
  })
  return encrypted.toString()
}

// 解密
function aesDecrypt(data, key, iv) {
  let _key = CryptoJS.enc.Utf8.parse(key);
  let _iv = CryptoJS.enc.Utf8.parse(iv);
  let decrypt = CryptoJS.AES.decrypt(data, _key , {
    iv: _iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  return decrypt.toString(CryptoJS.enc.Utf8)
}

【注】:加密时必须使用toString转成字符串,解密时必须使用utf8格式

三、base64加密

// 加密
let encryptData = btoa('Hello World!');
console.log(encryptData); // "SGVsbG8gV29ybGQh"

// 解密
let decryptData = atob(encryptData)
console.log(decodedString); // "Hello World!"

四、MD5加密

const CryptoJS = require('crypto-js') // 引入AES

function md5(params) {
  return CryptoJS.MD5(params).toString()
}

四、编码/解码字符串

// 编码
escape(str)
encodeURI(str)
encodeURIComponent(str)

// 解码
unescape(str)
decodeURI(str)
decodeURIComponent(str)

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

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

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

相关文章

  • js 实现纯前端将数据导出excel两种方式

    将table标签,包括tr、td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文件形式上还是html,代码如下 通过将json遍历进行字符串拼接,将字符串输出到csv文件,代码如下

    2024年02月15日
    浏览(28)
  • 前端js使用AES加密

    我是在uniapp项目里使用,AES加密也分几种模式,我这里有CBC和ECB模式,ECB模式安全性差些但快 加密文件下载 下载好和封装引用

    2024年02月16日
    浏览(39)
  • 前端(js)md5加密

    1、引入md5源文件,代码如下,直接复制。 2、在页面引入md5文件。 3、使用md5加密。

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

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

    2024年02月04日
    浏览(59)
  • JS - 生成随机数的方法汇总(不同范围、类型的随机数)

    (1)使用 random() 方法可以返回一个介于 0 ~ 1 之间的伪随机数(包括 0,不包括 1)。 (2)下面是一个测试样例 (1)这种最简单,因为和 random 的特点保持一致。只需使用如下公式即可: (2)比如下面生成 [10,15) 范围内的随机浮点数。 因为 random 的特点,要取得这几个区间

    2023年04月08日
    浏览(49)
  • java和js实现前端加密后端解密,后端加密前端解密(Base64)

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

    2024年02月16日
    浏览(56)
  • encrypt-js 前端 的加密解密

    1.    跟后端人员约定好偏移量 encrypt是 加密的方法 decrypt是解密的方法 定义一个 工具包 import {encrypt} from \\\"./aes.js\\\";  引入方法 直接使用 let data=encrypt(加密的内容)

    2024年04月17日
    浏览(38)
  • 前端js加密库的简单使用——crypto-js、jsrsasign、jsencrypt

    个人经验,这三个加密库的组合是最佳解决方案 crypto-js、jsrsasign、jsencrypt crypto-js 进行 AES 对称加密 jsrsasign 生成 RSA 密钥对 jsencrypt 进行 RSA 加解密

    2024年02月11日
    浏览(41)
  • Vue中的加密方式(js-base64、crypto-js、jsencrypt、bcryptjs)

    1.安装js-base64库  2. 在Vue组件中引入js-base64库 3.使用js-base64库进行加密 4.Vue中其他加密方式  1.crypto-js 2.jsencrypt 3.bcryptjs 使用 Base64.encode() 方法对字符串进行加密,并使用 Base64.decode() 方法对加密后的字符串进行解密。您可以根据需要使用这些方法来加密和解密字符串。请注意

    2024年02月08日
    浏览(36)
  • uniapp引入全局js,vue2/vue3不同方式引入

    Hi I’m Shendi uniapp引入全局js,vue2/vue3不同方式引入 最近写小程序,个人开发,选用了 uni-app 进行开发 选用的 vue3 版本 因为我用的 vue3 版本,在这里踩了没学过vue3的坑,用vue2引入全局js的方式使用,导致undefined… Vue2 版引入全局js的方法如下 将js放到项目内,一般放到自建的

    2024年02月03日
    浏览(55)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包