当前位置:网站首页 > 技术博客 > 正文

网页数据加密



小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

目前在前端开发中基本都会用到加密,最常见的就是登录密码的加密。接下来会为大家介绍几种加密方法。

MD5 加密后的位数有两种:16 位与 32 位。默认使用32位。 (16 位实际上是从 32 位字符串中取中间的第 9 位到第 24 位的部分)为提高安全性。根据业务需求,可以对md5 添加偏移量。如对原有字符拼接指定位数的字符串。

 
  

md5 支持算法 

 
  
 
  

前端 js 库:jsencrypt.js   github 地址: github.com/travist/jse…

背景:前端数据加密传到后台,后台经过解密,进行数据处理。 在项目开发过程中,为了保证数据的安全性,在进行前端后端数据传输的过程中,需要对数据进行加密解密。

现在比较安全且流行的加密方式是非对称加密(RSA)。其加密方式需要两个秘钥:私钥(私有秘钥)和公钥(公开秘钥)。公钥加密,私钥解密。

公钥(publicKey)加密、私钥(privateKey)解密。不能逆向,私钥(privateKey)加密、公钥(publicKey)解密。说白了就是前后端都需要用公钥(publicKey)进行加密,用私钥(privateKey)进行解密。

为啥不可逆呢?前端代码的安全性差,是总所周知的。之所以称为私钥(privateKey),就是因为是私密的,不可公开的,需要确保 key 的安全。若前端私钥(privateKey)加密,就意味着需要将私钥放到前端保存,这是不安全的,也违背了确保数据安全的初衷。

在开发过程中遇到这样一个问题:前端不光要加密数据传到后端,也需要将后端的传回来的加密数据解密。所以定义了两个方法,进行数据的加密解密。

引入前端 JS 库:jsencrypt.js

 
  
 
  

相信大家已经发现问题了,我们将私钥(privateKey)、公钥(publicKey)全部都放到了前端代码中,前端的安全性差,可以很轻松的拿到秘钥对,RSA 加密解密也失去了价值。那该如何解决这个问题?

通过前后端的沟通,我们采用双向加密解密,就是使用两套秘钥来解决这个问题。何为双向加密?

后端定义两对秘钥:秘钥对A、秘钥对B。

秘钥对 公钥 私钥 A publicKeyA privateKeyA B publicKeyB privateKeyB

后端拿着:私钥A(privateKeyA)、公钥B(publicKeyB),前端拿着:公钥A(publicKeyA)、私钥B(privateKeyB)。

  • 秘钥对A -- 前端加密,后端解密

    前端使用公钥A(publicA)对数据进行加密,后端通过公钥A(publicKeyA)对应的私钥A(privateKeyA)进行解密。

  • 秘钥对B -- 前端解密,后端加密

    后端使用公钥B(publicKeyB)进行加密,前端通过公钥B(publicKeyB)对应的私钥A(privateKeyA)进行解密。

这样就能保证,虽然私钥(privateKeyB)和公钥(publicKeyA)都在前端代码中,但是这两个并不是一对,就算是全部拿到,也无法成功解密。也符合公钥(publicKey)加密、私钥(privateKey)解密的规则。完美解决!

注意事项   这个插件对res加密的字符串最长是 117字符,

有时加密时,会遇到加密参数过长而无法加密的现象在源码中加入以下代码,通过调用encryptLong方法,重新定义加密函数即可。

 
  

点赞支持、手留余香、与有荣焉,动动你发财的小手哟,感谢各位大佬能留下您的足迹。

11.png

canvas 爬坑路【方法篇】

不懂 seo 优化?一篇文章帮你了解如何去做 seo 优化

canvas 爬坑路【属性篇】

【实战篇】微信小程序开发指南和优化实践

聊一聊移动端适配

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

我在工作中是如何使用 git 的

面试相关推荐

前端万字面经——基础篇

前端万字面积——进阶篇

更多精彩详见:个人主页

  • 上一篇: java nio网络编程
  • 下一篇: 运维工具大全
  • 版权声明


    相关文章:

  • java nio网络编程2025-07-27 18:01:05
  • 137 139端口2025-07-27 18:01:05
  • c语言中的getchar2025-07-27 18:01:05
  • xss基础2025-07-27 18:01:05
  • window运行python2025-07-27 18:01:05
  • 运维工具大全2025-07-27 18:01:05
  • stm32和arm的有必要一起学吗2025-07-27 18:01:05
  • 指针数组与数组指针详解2025-07-27 18:01:05
  • 拷贝构造函数和赋值构造函数的区别2025-07-27 18:01:05
  • 服务器监控可视化工具2025-07-27 18:01:05