js常用的加密/解密方法

news2025/2/25 18:19:25
1.前言(老司机直接跳过) 为什么js需要加密

谈到加密,大多数人应用场景都在于后端接口的加密签名校验。这种一般都用于服务端与服务端之间的相互调用,避免第三方使用你的接口做违法违规的事情,这种加密校验比较安全,因为没有暴露在外的代码。

但是前端运行的JavaScript代码不一样,它是运行在浏览器的一种轻量级即时编译型的脚本语言。它是直接运行在用户电脑上的代码,除了在sojson.v6加密过的js代码,普通的js代码对于使用者来说是公开透明的,对于想要非法获取你的数据的人也是公开透明的,那么对于那些想要通过分析你的js代码来盗取你服务器数据的人来说,就是一件十分简单没难度的事情。

2.常用的js加密有哪些

JavaScript的原生函数escape()和unescape()

var code = 'console.log("hello")';
var en = escape(code); // console.log%28%22hello%22%29
var de = unescape(en); // console.log("hello")
document.write(en, '     ', de)

用escape函数加密后,字符变成了%开头形式的特殊编码。

我们也可以用unescape把加密后的js解密回来

md5

https://github.com/blueimp/JavaScript-MD5

var hash = md5('value') // "2063c1608d6e0baf80249c42e2be5804"

MD5算法的原理可简要的叙述为:MD5码以512位分组来处理输入的信息,且每一分组又被划分为16个32位子分组,经过了一系列的处理后,算法的输出由四个32位分组组成,将这四个32位分组级联后将生成一个128位散列值。

md5加密一般用于确保文件和代码的唯一性,可以根据计算代码的md5值来判断代码是否被改变。

des/aes

https://github.com/brix/crypto-js

DES是一种使用密钥加密的块算法,1977年被美国联邦政府的国家标准局确定为联邦资料处理标准(FIPS),并授权在非密级政府通信中使用

1. 在utils/common.js中 写入公用的方法
	eg:
	// 公用方法
    import CryptoJS from "../common/crypto-js/crypto-js.js" // 加密
	// 在main.js中引入
	export default {
	  // 加密
	  encryptByDES(message, key) {
	  	const keyHex = CryptoJS.enc.Utf8.parse(key);
	  	const encrypted = CryptoJS.DES.encrypt(message, keyHex, {
	  		mode: CryptoJS.mode.ECB,
	  		padding: CryptoJS.pad.Pkcs7,
	  	});
	  	return encrypted.toString();
	  }
	}
2. 在main.js中引入
	import commonFun from './utils/common.js'
	//在 vue 的原型链 (prototype) 中注册
	Vue.prototype.$commonFun = commonFun
3. 页面中使用
	this.$commonFun.encryptByDES(参数1, 参数2);
	//参数1:需要加密的数据
	//参数2:加密key

rsa

https://github.com/rzcoder/node-rsa

RSA是被研究得最广泛的公钥算法,从提出到现在已近三十年,经历了各种攻击的考验,逐渐为人们接受,普遍认为是目前最优秀的公钥方案之一。

const NodeRSA = require('node-rsa');
const key = new NodeRSA({b: 512});

const text = 'Hello RSA!';
const encrypted = key.encrypt(text, 'base64');
console.log('encrypted: ', encrypted);
const decrypted = key.decrypt(encrypted, 'utf8');
console.log('decrypted: ', decrypted);

base64

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法

浏览器的window对象默认就有base64的加解密函数

const code = '(function(){ alert(\'hello\') }())'
const en = window.btoa(code); // 加密
const de = window.atob(en); // 解密

sha1

https://github.com/emn178/js-sha1

SHA1是一种密码散列函数,美国国家安全局设计,并由美国国家标准技术研究所(NIST)发布为联邦数据处理标准(FIPS)。SHA-1可以生成一个被称为消息摘要的160位(20字节)散列值,散列值通常的呈现形式为40个十六进制数。

sha1('Message to hash');
var hash = sha1.create();
hash.update('Message to hash');
hash.hex();

sha256

https://github.com/emn178/js-sha256

SHA256是一种散列函数算法标准,由美国国家安全局研发,由美国国家标准与技术研究院(NIST)在2001年发布,属于SHA算法之一。和SHA1属于不同算法标准

sha256('Message to hash');
sha224('Message to hash');

var hash = sha256.create();
hash.update('Message to hash');
hash.hex();

var hash2 = sha256.update('Message to hash');
hash2.update('Message2 to hash');
hash2.array();

// HMAC
sha256.hmac('key', 'Message to hash');
sha224.hmac('key', 'Message to hash');

var hash = sha256.hmac.create('key');
hash.update('Message to hash');
hash.hex();

var hash2 = sha256.hmac.update('key', 'Message to hash');
hash2.update('Message2 to hash');
hash2.array();

如果觉得上边这些加密方式还不够安全,无法达到你的预期,可以使用sojson.v6加密,加密强度在国内排名第一,作者每年都会更新加密算法,不停增加加密强度,既保证了js的运行速度又保证了js的安全性。

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405507.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

React中使用Redux (一) - 在React中直接使用Redux

React中使用Redux 开始之前需要强调一下,redux和react没有直接的关系,你完全可以在React, Angular, Ember, jQuery, or vanilla JavaScript中使用Redux。 尽管这样说,redux依然是和React库结合的更好,因为他们是通过state函数来描…

Vue3中Vuex的使用

Vuex是做什么的? Vue官方:状态管理工具 状态管理是什么? 需要在多个组件中共享的状态、且是响应式的、一个变,全都改变。 例如一些全局要用的的状态信息:用户登录状态、用户名称、地理位置信息、购物车中商品、等等 这时候我…

el-input无法输入的问题和表单验证失败问题

1.el-input无法输入的问题原因1、el-input组件没有绑定双向响应式数据(v-model)解决方案:在data中定义一个变量,然后在el-input组件中使用v-model进行双向数据绑定,这样子就会解决el-input组件无法输入的问题了。原因2、组件嵌套太深还是该组件是一个坑(…

【node】升级 Node 版本教程

文章目录Window 系统Mac 或 Linux系统Window 系统 window系统升级node只能到node官网下载window安装包来覆盖之前的node。node 安装教程附下载地址:https://blog.csdn.net/qq_45677671/article/details/114535955因为 n 模块是不支持window系统: PS C:…

el-table表格动态合并行、合并行列及详解

📝 个人简介 ⭐ 个人主页:我是段段🙋‍ 🍊 博客领域:编程基础、前端💻 🍅 写作风格:干货!干货!都是干货! 🍑 精选专栏:Vue…

解决Vuex刷新页面数据丢失的问题

一:数据丢失的原因 vuex存储的数据只是在页面中,相当于全局变量,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例&#…

Nuxt3项目搭建(Nuxt3+element-plus+scss详细步骤)

小聊: 本次记录一次使用Nuxt3搭建前端项目的过程,内容包含Nuxt3的安装,基于Vite脚手架(默认)构建的vue3项目,element-plus的安装配置(可选),scss的安装(可选&…

HTML的基本标签及属性

HTML1. 标题与段落标签2. 文本修饰标签3. 图片标签4. 链接标签5. 无序、有序列表与定义列表6. 表格、表单标签7. div与span标签1. 标题与段落标签 (1) 标题标签是一对双标签&#xff1a;<h1></h1>&#xff0c;<h2></h2>&#xff0c;<h3></h3&…

Layui表格可编辑 可动态新增一行 删除当前行

Layui 表格 可编辑&#xff1a;点击表格实现可编辑 cols: [[ //表头 {type: numbers, title: ID, width: 80, align: "center", sort: true} , {field: project, title: 项目, minWidth: 80, align: "center", edit: text} ]] 在表头的对象中增加 edit: …

前端必学的CSS3波浪效果演示

目录 文章目录 前言 CSS3波浪效果 1.Html构建 2.CSS编写 3.完整代码 index.html文件 style.css文件 总结 前言 随着前端技术的不断发展与进步&#xff0c;界面交互的样式要求和美感也越来越高&#xff0c;很多网页的交互都加上了css3动画,这里作者给大家分享一个前端开…

vue路由配置

1、路由的使用 一、安装路由 npm i vue-router 二、配置路由 在根目录下创建文件夹router&#xff0c;在router文件夹下创建index.js文件&#xff0c;如下图所示 在index.js文件中写入如下代码&#xff0c;实现创建一个路由器 import VueRouter from "vue-router&qu…

Object.defineproperty方法(详解)

Object.defineproperty 的作用就是直接在一个对象上定义一个新属性&#xff0c;或者修改一个已经存在的属性 Object.defineproperty可以接收三个参数 Object.defineproperty(obj, prop, desc) obj : 第一个参数就是要在哪个对象身上添加或者修改属性 prop : 第二个参数就是…

HTML网站导航栏的制作

一、导航条的制作 &#xff08;1&#xff09;代码图 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport…

photo-sphere-viewer中文文档

photo-sphere-viewer中文文档安装插件Configuration 配置项Standard options 常规配置container (required)adapter 适配器panorama (required)plugins 插件caption 标题size 全景图宽度高度markers 标注navbar 导航栏minFovmaxFovdefaultZoomLvlfisheyedefaultLongdefaultLatl…

vue+element-ui前端使用print-js实现打印,可自定义样式(横纵向,缩放比,字体大小,背景色)

vueelement-ui前端使用print-js实现打印下载依赖使用print-js实现打印功能需要打印的内容按钮调用打印函数打印函数设置默认打印横纵向&#xff08;IE不生效&#xff09;设置默认打印缩放比调整打印字体大小自定义字体大小生效自定义背景颜色生效参数print-js官网链接: https:/…

vue 3 项目实战一(绘制登录界面)

目录 一、概述 二、创建vue项目 三、需求分析 四、构建组件 五、vue组件之间的通信 一、概述 本文记录了项目实现的详细步骤以及原理&#xff0c;十分适合初学vue的萌新练手&#xff0c;也是阶段性学习的一个总结&#xff0c;可能会有些啰嗦&#xff0c;勿怪~。 先从登录…

PostMan——安装使用教程(图文详解)

为了验证接口能否被正常访问&#xff0c;我们常常需要使用测试工具&#xff0c;来对数据接口进行检测。 好处&#xff1a;接口测试工具能让我们在不写任何代码的情况下&#xff0c;对接口进行调用和调试。 下载并安装PostMan 首先&#xff0c;下载并安装PostMan&#xff0c;请…

若依管理系统RuoYi-Vue(前后端分离版)项目启动教程

RuoYi-Vue 是一个 Java EE 企业级快速开发平台&#xff0c;基于经典技术组合&#xff08;Spring Boot、Spring Security、MyBatis、Jwt、Vue&#xff09;&#xff0c;内置模块如&#xff1a;部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在…

【Vue】Axios详解

文章目录1 Axios简介1.1 什么是Axios?1.2 Axios的特性2 Axios的使用2.1 Axios的安装2.2 Axios的创建2.2.1 Proxy配置代理2.2.1.1 核心代码2.2.1.2 代码解释2.2.1.3 多个跨域2.2.2 Axios的二次封装2.2.2.1 为什么要二次封装2.2.2.2 Axios实例化2.2.2.2.1 引入2.2.2.2.2 创建axi…

前端面试题八股文汇总(最新)

文章目录一 、第一回合1.开发中遇到的困难&#xff1f;2. Css的盒子模型3. Pull和fetch的区别4. SPA单页面项目5.SEO优化6.BOM浏览器对象模型7.数组、对象、字符串中的一些方法8.解构赋值9...args剩余参数(扩展运算符)10.arguments 对象11. Promise以及底层封装12.浅拷贝深拷贝…