前端加密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前端开发之实现二进制读写操作

    JavaScript前端开发之实现二进制读写操作 在JavaScript中,读取和操作二进制数据是一个非常实用的技能。以下是实现二进制读写操作的完整攻略。 使用ArrayBuffer 在JavaScript中实现二进制读写操作的最常用的方法是使用ArrayBuffer对象。ArrayBuffer在内部表示二进制数据,可以直接快速读取和操作。以下是创建和初始化…

    JavaScript 2023年5月19日
    00
  • 梳理总结JavaScript的23个String方法

    下面是一份详细的攻略,可能会有点长,请您慢慢阅读。 梳理总结JavaScript的23个String方法 String.prototype.charAt() 此方法用于返回指定位置的字符。下面是一个示例: const str = "hello"; const char = str.charAt(2); // ‘l’ 这个示例中,我们从字符…

    JavaScript 2023年5月19日
    00
  • Ajax 数据请求的简单分析

    下面我将为你详细讲解“Ajax 数据请求的简单分析”的完整攻略。 什么是Ajax Ajax即Asynchronous JavaScript and XML。它是利用JS和XML进行异步通信技术的一种方法。 当我们在浏览器中访问网页时,通常情况下需要向服务器请求数据,服务器通过传统的方式返回数据并展示在浏览器上。而使用Ajax技术,可以在不重新加载整个网页的情…

    JavaScript 2023年6月11日
    00
  • Asp.Net中避免重复提交和弹出提示框的实例代码

    在ASP.NET中避免重复提交和弹出提示框是开发Web应用程序时很重要的一部分。下面是一个实例代码,用于防止重复提交表单,并弹出异常提示框。 避免表单重复提交 在ASP.NET中,为了防止表单重复提交,我们可以使用以下两种方式: 1. 禁用页面上提交按钮 在单击按钮时,将其设置为禁用状态。在以前无法恢复之前,可以使其显示Progress GIF图像,以便用户…

    JavaScript 2023年6月11日
    00
  • 让div运动起来 js实现缓动效果

    让div运动起来并实现缓动效果是Web开发中常见的需求之一。JS可以实现动态控制DOM节点的属性值,通过操作CSS属性的变化来实现节点的平移、缩放、旋转等动画效果,同时还可以结合缓动算法,使得CSS属性的变化更加平滑、自然。以下是一些实现div缓动效果的攻略和示例: 1.缓动算法介绍 在实现缓动效果时,使用缓动算法可以让CSS属性的变化更加自然、平缓,提升动…

    JavaScript 2023年6月11日
    00
  • JavaScript正则表达式(总结篇)

    JavaScript正则表达式(总结篇) 什么是正则表达式 正则表达式是一种描述字符模式的工具,它提供了一种灵活的方式来匹配、查找、替换字符串中的文本。 在JavaScript中,正则表达式通常使用RegExp对象创建,它可以表示一个字符串的模式。 创建正则表达式 有两种方式可以创建正则表达式: 字面量方式,使用斜杠/../../来创建正则表达式。 java…

    JavaScript 2023年5月28日
    00
  • JS数据类型STRING使用实例解析

    关于“JS数据类型STRING使用实例解析”的攻略,我可以为你提供以下内容。 什么是JS中的字符串(STRING)类型? 字符串是JS中最常用的一种数据类型,用于表示文本,由一系列Unicode字符组成。在JS中,字符串以单引号、双引号或反引号 包裹起来,这三种方式是等价的。 比如: // 使用单引号包括字符串 let str1 = ‘Hello World…

    JavaScript 2023年5月28日
    00
  • 23个Javascript弹出窗口特效整理

    这篇文章是对23个Javascript弹出窗口特效的整理,其中包含了不同类型的弹窗特效,包括提示框、模态框、响应式弹窗等。本文将对这些弹窗特效进行详细讲解,帮助读者更好地理解和使用这些特效。 1. 弹出提示框 提示框可以用来展示简单的信息,并通知用户进行确认或取消操作。下面是一个例子: <button onclick="alert(‘Hell…

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