前端加密/解密方式

2023-11-07

加密/解密应用场景

  • 前言: 通常在前后端之间数据传输经常会涉及到一些敏感数据、cookie携带的token加密等问题。

  • 提到加密,相对于后台开发来说,遇到最多的需要加密处理的应用场景应该是接口的加密签名校验了。不过这种一般都用于服务端与服务端之间的相互调用。因为没有暴露在外的代码这种加密校验相对比较安全。但javaScript不一样,它是运行在浏览器端的一种脚本语言。基本除了在sojson.v6加密过的js代码,黑客可以通过逆向分析你的js代码来盗取一些数据。

常用的js加密:

  • 对称加密(AES):用的同一个密钥进行加解密的

    优点: 速度快

    缺点: 在传输密钥过程中,这个密钥容易被拦截,导致密钥泄漏,安全性不高

  • 非对称加密(RSA): 生成密钥,分别为公钥和秘钥,公钥对数据进行加密,私钥对数据进行解密

    优点: 只需要服务端把公钥,传递给前端,前端通过公钥进行加密,服务端通过私钥解密,安全性很高

    缺点: 速度慢

1、 js内置api(escape和unescape)

const code = 'hello world';

const _enCode = escape(code); // 加密

const _unescapeCode = unescape(code); // 解密

console.log('加密code前:', code); // 加密code前: hello world

console.log('加密code后:',_enCode); // 加密code后:hello%20world

console.log('解密code后:', _unescapeCode); // 解密code后: hello world

由此可以看到用escape函数加密后,字符变成了%开头形式的特殊编码。需要用unescape反编译回来。escape/unescape通常应用于url中携带数据加密较为多些。

2、md5加密

我这里演示借助了crypto插件(项目里安装了),没有的话可以自行安装一下,安装地址: https://github.com/brix/crypto-js


import Crypto from "crypto";

const user_key = 'md5_121212';

const passWord = Crypto.createHash('md5').update(`${user_key}\n`).digest('hex');

console.log('passWord:', passWord);

MD5码以512位分组来处理输入的信息,且每一分组又被划分为16个32位子分组,经过了一系列的处理后,算法的输出由四个32位分组组成,将这四个32位分组级联后将生成一个128位散列值。md5加密一般用于确保文件和代码的唯一性,可以根据计算代码的md5值来判断代码是否被改变。不过md5属于对称加密范畴。

3、 des/aes加密方式

DES是一种使用密钥加密的块算法,已被美国联邦政府的国家标准局授权在非密级政府通信中使用

我这里演示借助了crypto插件(项目里安装了),没有的话可以自行安装一下,安装地址: https://github.com/brix/crypto-js

import crypto from "crypto";

const message = 'hello des';

const key = 9727;

const keyHex = crypto.enc.Utf8.parse(key);

const encrypted = crypto.DES.encrypt(
    message,
    keyHex,
    {

        mode: crypto.mode.ECB,

        padding: crypto.pad.Pkcs7,

    }
);
// 打印加密结果
console.log(encrypted.toString());
4、 RSA双向加密解密
  • RSA是被研究得最广泛的公钥算法,从提出到现在已近三十年,经历了各种攻击的考验,逐渐为人们接受,普遍认为是目前最优秀的公钥方案之一。

  • 使用:服务端和客户端分别生成自己的RSA密钥,服务端拿客户端的公钥,客户端拿服务端的公钥,彼此的数据都可以加解密,但是缺点很明显,就是加解密数据速度慢。

插件安装地址: https://github.com/rzcoder/node-rsa

import rsa from 'node-rsa';

const key = new rsa({b: 512});

const text = 'hello rsa!';

// 加密

const encrypted = key.encrypt(text, 'base64');
// 打印加密结果

console.log(encrypted);

// 解密

const decrypted = key.decrypt(encrypted, 'utf8');
// 打印解密结果
console.log(decrypted);

以上介绍了几种加密方式,希望可以帮助得到你,有错误也可指出可以互相交流交流。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端加密/解密方式 的相关文章

  • 使用material-ui@next 和 typescript 扩展主题

    创建我的主题时material ui我添加了两个新的调色板选项 为我提供了更好的明暗范围 我已经延长了Theme键入以表明这一点 import Theme from material ui styles import Palette fro
  • 使用正则表达式验证字符串是否安全

    我有一个网站 用户可以在其中选择用户名 目前 他们可以输入几乎任何字符 包括 ETC 我知道我可以使用正则表达式 这可能就是我的选择 我将使用否定集 我认为这是正确的工具 如下所示 那么 我怎样才能知道要放入该集合中的所有非法字符呢 我可以
  • 获取语​​音通道的用户数

    我正在重写我的音乐部分朋友不和谐机器人 https top gg bot 629799045954797609 我试图弄清楚如何获取执行命令的人的语音通道中的用户数量 我到处都找过 但似乎找不到它或它的用法 现在我正在使用以下内容 modu
  • 为什么我无法使用 HTML5 音频标签多次播放声音?

    这就是声音的 存储 方式
  • LeafletJs只显示一个国家

    我使用 Leafletjs 和 D3 来显示地图 我只想在地图上显示英国 Leaflet和D3是否可以只显示英国 这当然是可能的 现在的解决方案取决于您是想使用 D3 绘制英国 还是想从 Tile Server 获取它 在后一种情况下 有一
  • javascript中.match和.test有什么区别[关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 在浏览 JavaScript 时 我刚刚遇到了 match test 和 exec有什么不同 这是最快的 首先 exec and test
  • 在选择下拉列表中选择特定选项时添加输入框

    我需要在选择选项时将输入添加到选择选项中 每当用户选择 其他 时 就会出现一个输入框供用户输入数据 HTML
  • 匹配CSS的正则表达式“<属性>:<值>”

    我从以下位置检索了 CSS 规则document styleSheets现在我正在寻找提取它的属性和值 cssText expl position absolute background color rgb 204 204 204 max
  • console.log 是如何工作的?

    第一个例子 在以下示例中 http jsfiddle net maniator ScTAW 4 http jsfiddle net maniator ScTAW 4 我有这个js var storage function var store
  • 在 forEach() 中使用 `this` [重复]

    这个问题在这里已经有答案了 免责声明 我正在学习 JavaScript 我有一个像这样的对象构造函数 var Palette function this colors red green blue this getColorCombinat
  • d3 序数尺度的映射

    我正在使用 D3 的序数比例将数字映射到颜色 我用过这个 color d3 scale ordinal range 1f77b4 ff7f0e 2ca02c d62728 9467bd 8c564b e377c2 domain 0 6 co
  • 在 Jscript 中实例化 System.Threading.Thread 对象

    我正在尝试使用 Jscript 创建一个新的 System Threading Thread 对象 但我无法让构造函数工作 如果我只是执行以下操作 var thread new Thread threadFunc function thre
  • 使用Doctype让scrollTop返回0,为什么?

    当我将此 Doctype 放入我的文档中时document body scrollTop返回零 这是为什么 当您使用该 Doctype 时 您会将每个当前浏览器放入所谓的几乎标准模式 http hsivonen iki fi doctype
  • 输入号码时自动格式化 SSN

    我有一个文本字段 用户输入 SSN 号码 输入自身时 它应该格式化 就像关于文本字段的更改 它应该格式化999 999 999以这种方式在显示器本身上 kottenator 的脚本几乎已经完成 但它每隔 3 位数字就中断该值 而不是 3 位
  • 如何控制谷歌地图标记的不透明度

    我需要根据时间使一些标记半透明 有什么方法可以控制标记的 CSS 不透明度吗 或者是否可以可靠地找出标记的 DOM 元素 我使用 Google 地图 API v3 标记的不透明度可以设置为marker setOptions opacity
  • 在 Nest.js 中发送之前如何格式化响应?

    我按照文档进行操作 并能够添加用于响应映射的拦截器 我想要一致的 json 格式输出作为响应 我怎样才能用拦截器或其他比这种方法更好的方法来实现这一点 statusCode 201 message Custom Dynamic Messag
  • 在 Mobile Safari 中点击

    敲击
  • 显示对象内容 - JS/jQuery

    With this data events 返回 object Object 我需要看看里面到底发生了什么 我找到了这个 var Finder each this data events function i n Finder Name i
  • JavaScript:如何在 Internet Explorer 中模拟更改事件(委托)

    UPDATE 回顾 小提琴和赏金 这个问题并没有引起太多关注 所以我将花一些时间来解决这个问题 我知道我的答案和问题都过于冗长 这就是为什么我继续设置这把小提琴 http jsfiddle net vVA8N 在我看来 这是我目前必须用来接
  • 使用 Javascript 删除字符串的最后一个字符

    我有一个DIV与一些字符 如何在每次单击时删除文本中的最后一个字符DIV itself 删除第一个字符 div on click function this text function index text return text repl

随机推荐