为了加强项目的接口安全程度,需求如下

         var options = {
// 前端需要传送的数据加密
data: {
abc: 123,
bcd: 123,
cds: '撒旦教付货款12313',
},
// 模拟后端返回base64码
key: 'NWxCZUZ3YWlE'
}
var test = function (option) {
//定义时添加VAR表示是私有属性 内部使用
var data = option.data; // 前端传送的数据
var key = option.key; // base64
// 前端对数据做ascii码排序
var sort_ASCII = function (obj) {
if (obj == null) return '';
var arr = new Array();
var num = 0;
for (var i in obj) {
arr[num] = i;
num++;
}
var sortArr = arr.sort();
var sortObj = {};
for (var i in sortArr) {
sortObj[sortArr[i]] = obj[sortArr[i]];
}
return sortObj;
}
// 对象封装 将data转译成字符串
var changeUrl = function (obj) {
if (obj == null) return '';
var str = ""
var n = 0;
Object.keys(sort_ASCII(obj)).forEach(key => {
// if (!isNaN(obj[key])) {
// str += (n ? '&' : '') + key + '=' + obj[key];
// n++
// }
if (!/.*[\u4e00-\u9fa5]+.*$/.test(obj[key])) {
str += (n ? '&' : '') + key + '=' + obj[key];
n++
}
})
return str
}
// 字符串与位异或封装
var stringToChars = function (_s, _num) {
var _r = "";
for (var i = 0; i < _s.length; i++) {
_r += String.fromCharCode(_s.charCodeAt(i) ^ _num);
}
return _r.trim().replace(/\s/g, "");
}
// 封装内部计算方式
var remainder = function (str) {
var num = Math.pow(2, str.length % 3 + 1);
return stringToChars(changeUrl(data), num)
}
// 方法前加this表示公共方法 可以在外部访问
// 获取前后端密钥
this.getSignature = function () {
var code = stringToChars(key, 2)
var n = Math.pow(2, code.length % 3);
code = stringToChars(md5(code), n)
// md5加密前后密钥
return md5(remainder(changeUrl(data)) + code)
}
}
var t = new test(options);
// 生成最后的签名
console.log(t.getSignature());
版权声明:本文为小乐9924的原创文章,转载请附上原文出处链接及本声明。

10. Javascript 前后端数据加密的更多相关文章

  1. 前后端数据加密传输 RSA非对称加密

    任务需求:要求登陆时将密码加密之后再进行传输到后端. 经过半天查询摸索折腾,于是有了如下成果: 加密方式:RSA非对称加密.实现方式:公钥加密,私钥解密.研究进度:javascript与java端皆已 ...

  2. 前后端API交互数据加密——AES与RSA混合加密完整实例

    前言 前段时间看到一篇文章讲如何保证API调用时数据的安全性(传送门:https://blog.csdn.net/ityouknow/article/details/80603617),文中讲到利用R ...

  3. app开发中,前后端使用AES进行数据加密传输

    问题:当数据调用没有使用https加密时,app被抓包,接口暴露,此时可能导致被刷等安全问题 解决:1. 使用https传输 2. 在进行数据传输时进行手动加密(app端和后端定义统一的加密方式),这 ...

  4. Keycloak快速上手指南,只需10分钟即可接入Spring Boot/Vue前后端分离应用实现SSO单点登录

    登录及身份认证是现代web应用最基本的功能之一,对于企业内部的系统,多个系统往往希望有一套SSO服务对企业用户的登录及身份认证进行统一的管理,提升用户同时使用多个系统的体验,Keycloak正是为此种 ...

  5. JavaScript数据类型BigInt实践之id数值太大,导致前后端交互异常

    项目开发中前后端数据交互常会使用id作为主键索引,通常id数值都不大,使用number类型就可以表示处理,但对于一些分布式id或其他情况,id数值太大且超过了JS的最大处理数(Math.pow(2,  ...

  6. ABP开发框架前后端开发系列---(10)Web API调用类的简化处理

    在较早期的随笔<ABP开发框架前后端开发系列---(5)Web API调用类在Winform项目中的使用>已经介绍了Web API调用类的封装处理,虽然这些调用类我们可以使用代码生成工具快 ...

  7. 学习加密(四)spring boot 使用RSA+AES混合加密,前后端传递参数加解密

      学习加密(四)spring boot 使用RSA+AES混合加密,前后端传递参数加解密 技术标签: RSA  AES  RSA AES  混合加密  整合   前言:   为了提高安全性采用了RS ...

  8. Web系统开发构架再思考-前后端的完全分离

    前言 前后端完全分离其实一直是Web开发人员的梦想,也一直是我的梦想,遥想当年,无论是直接在代码里面输出HTML,还是在HTML里面嵌入各种代码,都不能让人感到满意.期间的痛苦和纠结,我想所有Web开 ...

  9. 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍

    webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...

随机推荐

  1. lf 前后端分离 (5) 优惠券

    关于优惠券 优惠券主要通过前端传回来的course_id_list 创建数据结构 首先清空操作,将所有的优惠券清空, 并将所有优惠劵放到redis中的过程 import datetime import ...

  2. MP的自动填充功能

    用来进行自动填充时间. 使用注解@TableTield(fill=FieldFill.insert)插入时进行性填充 使用注解@TableTield(fill=FieldFill.Update)更新时 ...

  3. USACO Telephone Lines

    洛谷 P1948 [USACO08JAN]电话线Telephone Lines https://www.luogu.org/problem/P1948 JDOJ 2556: USACO 2008 Ja ...

  4. Burst Balloons(leetcode戳气球,困难)从指数级时间复杂度到多项式级时间复杂度的超详细优化思路(回溯到分治到动态规划)

    这道题目做了两个晚上,发现解题思路的优化过程非常有代表性.文章详细说明了如何从回溯解法改造为分治解法,以及如何由分治解法过渡到动态规划解法.解法的用时从 超时 到 超过 95.6% 提交者,到超过 9 ...

  5. <Tree.PreOrder> DFS 113, 129

    113. Path Sum II 利用DFS的三要素, 出口1,出口2,拆解,记得回溯的时候要回退一位path. class Solution { public List<List<Int ...

  6. Signal ()函数用法和总结

    void(* signal(int sig,void(* func)(int)))(int); 设置处理信号的功能 指定使用sig指定的信号编号处理信号的方法. 参数func指定程序可以处理信号的三种 ...

  7. 树的遍历 | 1079 理解题意+DFS

    这题如果读懂了题意,就很好做,一波操作就结束了.不过题目有点难读,考验耐心和读题的细致. AC代码: #include <stdio.h> #include <memory.h> ...

  8. cd1101d 树形dp

    cd1101d 简单dp 链接 codeforces 思路 所有数的质因数存下来,最多6个. 然后\(f[i][j][0/1]\)表示i子树内链gcd为j的i是否为链头. 暴力转移就行了 代码 #in ...

  9. MySQL实战45讲学习笔记:第二十一讲

    一.引子 在上一篇文章中,我和你介绍了间隙锁和 next-key lock 的概念,但是并没有说明加锁规则.间隙锁的概念理解起来确实有点儿难,尤其在配合上行锁以后,很容易在判断是否会出现锁等待的问题上 ...

  10. 来吧!一文彻底搞定Vue组件!

    作者 | Jeskson 来源 | 达达前端小酒馆 Vue组件的概述 组件是什么呢,了解组件对象的分析,Vue组件中的data属性,props传递数据的原理到底是什么. 事件通信的那些事 如何了解父子 ...