前端加密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日

相关文章

  • js数组去重常见的方法汇总(7种)

    下面我将详细讲解“js数组去重常见的方法汇总(7种)”。 一、引言 在JavaScript的实际开发中,经常会遇到需要对数组进行去重操作的情况。而JavaScript提供了多种方法来进行数组去重操作,下面将详细介绍七种常见的方法。 二、使用Set Set是ES6新引入的一种集合数据类型,它可以存储任意类型的唯一值。使用Set可以很方便地实现数组去重,只需要将…

    JavaScript 2023年5月27日
    00
  • javascript常用的正则表达式实例

    以下是关于JavaScript常用的正则表达式实例的攻略。 正则表达式的基础知识 正则表达式是一种用于匹配字符串的方法,它基于一些规则来描述匹配模式。在JavaScript中,你可以用正则表达式去匹配一个字符串或者一个字符串数组。 在编写JavaScript中的正则表达式时,你需要使用RegExp对象。这个对象既可以通过字面量语法来创建,也可以从构造函数中实…

    JavaScript 2023年6月10日
    00
  • javascript中有趣的反柯里化深入分析

    反柯里化(uncurrying)是一种将柯里化函数转换为普通函数的过程。JavaScript中的对象方法都是柯里化函数,即将this绑定在对象上来返回一个新函数。 反柯里化的主要目的是为了复用函数,在对象层级比较深的地方使用更为方便。 以下是javascript中有趣的反柯理化深入分析的完整攻略: 什么是反柯里化 1.1 柯里化 在JavaScript中,函…

    JavaScript 2023年6月10日
    00
  • html嵌入javascript代码的三种方式

    HTML嵌入JavaScript代码通常有三种方式:内联(Inline)、内部(Internal)、外部(External)。 Inline(内联) 内联是将JavaScript代码直接写在HTML元素的属性中。由于代码与HTML元素混合在一起,这种方式不易维护和阅读,推荐在特定环境下使用。 以下是内联的示例: <button onclick=&quo…

    JavaScript 2023年5月18日
    00
  • 基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果

    实现倒计时的方式有很多种,下面我将详细讲解一种基于JavaScript代码实现简单易用的倒计时效果的攻略。 步骤一:HTML结构 首先,我们需要在HTML中构建出需要展示倒计时的元素,我们可以使用两个div元素,其中一个用来显示时分秒,另一个用来显示天数。 以下是示例代码: <div id="countdown"> <d…

    JavaScript 2023年5月27日
    00
  • 通过JavaScript下载文件到本地的方法(单文件)

    以下是通过JavaScript下载文件到本地的方法的完整攻略: 标准的下载方法 通过标准的HTML a标签和download属性可以实现文件的下载。该属性用于指定资源的下载地址,将会生成一个下载的链接。 <a href="文件地址" download="文件名">下载文件</a> 其中,href…

    JavaScript 2023年5月27日
    00
  • 在Javascript中 声明时用”var”与不用”var”的区别

    在 JavaScript 中,声明变量时可以使用 var 关键字或省略该关键字。这两种方式在行为上是不同的,以下是它们之间的区别: 使用 var 声明变量 在 JavaScript 中,使用 var 关键字声明变量时,变量会被限制在当前的执行环境中。这意味着,在声明变量的函数内部,使用 var 定义的变量是该函数内部私有的,并且在全局(window)范围之外…

    JavaScript 2023年6月10日
    00
  • 基于 D3.js 绘制动态进度条的实例详解

    这里我将为大家详细讲解“基于 D3.js 绘制动态进度条的实例详解”的完整攻略。 1. D3.js 简介 在开始讲解如何绘制动态进度条之前,先简单介绍一下 D3.js。D3.js 是一个用于操作文档的 JavaScript 库。D3.js 可以帮助开发者使用 HTML、SVG、CSS 和 JavaScript 创建动态交互数据图表和数据可视化效果。 2. 进…

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