前端加密cryptojs与JSEncrypt使实例详解

前端加密 cryptojs 与 JSEncrypt 的使用攻略

什么是前端加密

前端加密,指的是在前端代码中使用加密算法对用户输入的敏感信息进行加密,从而保证信息在传输过程中不会被轻易地窃取。前端加密通常采用一些常见的加密算法,如 AES、RSA 等。

加密库

前端加密需要使用到一些加密库,比如 cryptojsJSEncrypt

  • cryptojs:提供常见的对称加密算法,比如 AES、DES 等
  • JSEncrypt:提供非对称加密算法,比如 RSA 等

cryptojs 的使用方法

安装

通过 npm 安装:

npm install crypto-js

常见加密算法

AES 加密

const CryptoJS = require('crypto-js')

const plaintext = 'hello world'
const key = '123456'

const ciphertext = CryptoJS.AES.encrypt(plaintext, key).toString()
console.log(ciphertext) // U2FsdGVkX1/ze0ney1Ct1g+L+0zSJYZAAOraUcKKGcQ=

MD5 加密

const CryptoJS = require('crypto-js')

const plaintext = 'hello world'

const hashed = CryptoJS.MD5(plaintext).toString()
console.log(hashed) // 5eb63bbbe01eeed093cb22bb8f5acdc3

更多使用方法请参考官方文档:https://github.com/brix/crypto-js

JSEncrypt 的使用方法

安装

通过 npm 安装:

npm install jsencrypt

生成密钥对

import JSEncrypt from 'jsencrypt'

const key = new JSEncrypt({ default_key_size: 2048 })
key.getKey()

const publicKey = key.getPublicKey()
const privateKey = key.getPrivateKey()

加密/解密

import JSEncrypt from 'jsencrypt'

const plaintext = 'hello world'

const publicKey = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDoZb/mPrXk8c+LJ0wmJ+oJWf6xm1T3IiqLl+94M1Vq+6dBKP5iDsr5+pk9cMAeeBtEBdHia1Tyb8WR3eeoGiOgQzPe4iwFLjHSqH8WBLwOapo9lJ/0ZkcmXo5a+wA+Q4JbOGTEz0UZhj0z6NzTpi9xZuvvMvYXzEnFTcL4wIDAQAB'
const privateKey = 'MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAOhlv+Y+teTxz4snTCYn6gld/rGbxPciKouX73gzVWr7p0Eo/mIOyvn6mT1wwB54G0QF0eJrVPJvxZHdr3qgaI6BDM97iLAsuMdKofxYEvA5qmj2Un/RmRyZejlr7AD5Dgls4ZMTPRRmGPTPo3NOmL3Fm6+8y9hfMScVNwvjAgMBAAECgYAKH/1FXV1kbdxZDi3vBqCfm9LrSlaZ51aGKsp4N1sJz/DezSx4/R+4MQ4ywdq5sJkN7p5wBeo8S9Qq0aTnWXYdBlegLnn5Ak8JgJnRrunmepJFllY6Bd/GWm1PJzJ94XJsyze0ex/pgf+UHnvebIYCO7cCfZVE2kEB779DfCwQJBANcjEdSXFFx0vDOyQftnxQ9WjxP7Df4bktvixNpIXeOYaXxn5ZNVT+BAteLPG6Udrpf5FAqVwL1ZwVl+IdgsNM8CQQCmOiFpFX9C0Z/7PlvXbbEoyGmQYjzXMZxYv24nP7d8GX6FnZJSROeJ//XOMCNKckxMm5Jr0zwRgi9qX/rxc8FzAkBhM6tZnDwaI/+Ixfrsu4sOLRm9B2UPtkcBAhP5dT2jrM5kmBBQBJ/geuIlRQ5FHYvlQAa4iG4sC4ZJZS1eXODZAkAW/w8YXvenLDNVmKoXtTCkN+ADsu7J8xSCKt42w8BibKZmkhSR+9mQzWYqNTrme7Dj7mRdAnaniosfIh+4c7lAkEAzCSYej55AbDDW2lkwmHkEwghJXiPm/Q6Ck4AKpIUZrGn2aW9SfjvwP4Qn+7XZL9Q0hse1bnrrs+CmpL+C1u5w=='

const encrypt = new JSEncrypt()
encrypt.setPublicKey(publicKey)
const ciphertext = encrypt.encrypt(plaintext)

const decrypt = new JSEncrypt()
decrypt.setPrivateKey(privateKey)
const decrypted = decrypt.decrypt(ciphertext)

console.log(ciphertext)
console.log(decrypted)

更多使用方法请参考官方文档:https://github.com/travist/jsencrypt

示例

使用 cryptojs 对用户密码进行加密

import CryptoJS from 'crypto-js'

const plaintext = 'password'
const salt = 'abcdefg'
const key = CryptoJS.PBKDF2(plaintext, salt, { keySize: 256 / 32, iterations: 1000 })
const ciphertext = CryptoJS.AES.encrypt(plaintext, key)
const encoded = encodeURIComponent(ciphertext.toString())

console.log(key) // c8ae8ca23c2fdef3d0778183fac4ae31a4f529bbb6f75655e0517a16760c0c7c
console.log(encoded) // U2FsdGVkX1+xWwWlK2BCo0TJmgjOVWBVzSjIE6fUboY%3D

使用 JSEncrypt 对用户信息进行加密

import JSEncrypt from 'jsencrypt'

const key = new JSEncrypt({ default_key_size: 2048, default_public_exponent: '010001' })
key.getKey()

const publicKey = key.getPublicKey()

const plaintext = {
  username: 'example',
  password: 'password123'
}

const encrypt = new JSEncrypt()
encrypt.setPublicKey(publicKey)
const ciphertext = encrypt.encrypt(JSON.stringify(plaintext))
const encoded = encodeURIComponent(ciphertext)

console.log(publicKey) // -----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDO9vcPyBa1fhPpM6F3MkbBVRaZM0Q8qAL7Lc2VusqWIYC/FTxSOJHb+UETKYowm+tn/H81RttnPYnPIW2YZRkTuO0IqxNS7LgB7w/LaDTQh4RpL/5YQrLpaFqdp/mZnGSDMIFtHL6AHlX7e41vIQBwILdnnk1fqRV6Wi0bX5MvzwQIDAQAB-----END PUBLIC KEY-----
console.log(encoded) // zUTaHJrOq0o9o8C9lo8V4kfEu0E2Cf9w%2BMGxEflk0X3VWOrnN8v0L4MPyuUlNLix0aJkuREJeb7hk9Z9Nw9UEFcafJLW2Lx7roT9tO4vZdaw1LSpvwD0g4gm5hd0zibJkqX4vT4ivX5NeAE0k/+zAQWARpkl8Dz45gr1AYSw8z8%3D

结语

以上是关于前端加密的一些介绍和实例,希望对大家的学习有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:前端加密cryptojs与JSEncrypt使实例详解 - Python技术站

(0)
上一篇 2023年5月19日
下一篇 2023年5月19日

相关文章

  • JavaScript使用push方法添加一个元素到数组末尾用法实例

    让我们来解析一下“JavaScript使用push方法添加一个元素到数组末尾用法实例”。 什么是JavaScript的push方法 在JavaScript中,push()方法可以向数组的末尾添加一个或多个元素,并返回该数组的新长度。这个方法的语法是: array.push(item1, item2, …, itemX) 参数: item1, item2,…

    JavaScript 2023年5月27日
    00
  • jquery内置验证(validate)使用方法示例(表单验证)

    下面我来详细讲解”jquery内置验证(validate)使用方法示例(表单验证)”。 1. 简介 jquery.validate是一款jquery表单验证插件,它可以实现对表单的各种验证功能,包括必填、数字验证、邮箱验证、电话验证、正则验证等。使用jquery.validate插件可以方便地对表单数据进行验证,从而提高用户体验和数据安全性。 2. 使用方法…

    JavaScript 2023年6月10日
    00
  • C#中对象与JSON字符串互相转换的三种方式

    当我们在C#中处理JSON格式的数据时,我们通常需要将JSON字符串转换为C#对象或者将C#对象序列化为JSON字符串。以下是三种在C#中实现对象与JSON字符串互相转换的方法: 方法一:使用JavaScriptSerializer类 .NET框架提供的JavaScriptSerializer类可以将.NET对象与JSON字符串相互转换。 示例代码如下: u…

    JavaScript 2023年5月27日
    00
  • JS实现添加缓动画的方法

    下面是JS实现添加缓动动画的方法的完整攻略: 什么是缓动动画? 缓动动画指的是在动画过程中,物体的速度从快到慢,或者从慢到快,而不是始终以相同的速度运动。缓动动画通常可以提高用户体验,使动画看起来更平滑、自然。 实现缓动动画的方法 使用JS实现缓动动画可以有多种方法,下面介绍其中两种。 方法一:简单的缓动动画实现 简单的缓动动画实现方法比较容易理解,下面的代…

    JavaScript 2023年6月10日
    00
  • JS使用jsBarcode生成条形码(一维码)简单实例

    下面我将为你详细讲解“JS使用jsBarcode生成条形码(一维码)简单实例”的完整攻略。 什么是jsBarcode? jsBarcode是一个生成条形码(一维码)的JavaScript库,它可以在网页上直接使用JS代码生成条形码。 安装jsBarcode 如果你想在项目中使用jsBarcode,需要先安装它。可以通过npm安装,也可以手动下载源代码并引入。…

    JavaScript 2023年5月19日
    00
  • 详解微信小程序中var、let、const用法与区别

    详解微信小程序中var、let、const用法与区别 在微信小程序的开发中,我们常常会使用到JS语言中的变量。而在ES6中,我们可以通过var、let、const来声明变量。这三个关键字有什么区别呢?下面就来详细讲解一下。 var var是ES5中定义的声明变量的关键字。它有以下特点: var声明的变量作用域为函数体内,如果不在函数内则为全局变量。 var声…

    JavaScript 2023年6月11日
    00
  • JS操作JSON常用方法(10w阅读)

    JS操作JSON常用方法攻略 什么是JSON? JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,其基于JavaScript语言的子集,易于人阅读和编写,同时也易于机器解析和生成。 JSON格式的数据由键值对组成,键值对之间使用英文半角逗号(,)分隔,最外层用一对大括号({})包裹,每个键值对由一个键和一个值组成,键…

    JavaScript 2023年5月27日
    00
  • IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别实例分析

    针对“IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别实例分析”,我们可以从以下几个方面进行讲解: URL编码的区别 在使用Ajax传递参数时,中文参数需要进行URL编码,然后再进行发送。而IE浏览器和FF浏览器对URL编码的处理是不同的: IE浏览器:使用escape()函数对中文参数进行编码。 FF浏览器:使用encodeURIComponen…

    JavaScript 2023年5月19日
    00
合作推广
合作推广
分享本页
返回顶部