在当下国内大环境不景气的时候，怎么走出自己的路，肯定会有人说，我特别精通 React 或者 Vue，这个肯定是一个优点，但是在前端领域，需要学习的技能是很多的，再加上近些年各种造轮子，是的现在市面上技术点越来越多，例如：

• 框架有 React，vue，Angular, Solid，Ember, Svelte, pReact 等等
• 状态管理 Redux, MobX, Vuex, pinia, Jotai, Zustand, Recoil 等等
• UI 框架 Antd, Element UI 等等
• CSS 有 Less，Sass, css in Js, Tailwind css, Unocss 等等
• 跨端 Uniapp, Taro
• 桌面端 Electron, Tauri
• 打包 webpacck, vite, Turbopack, Rspack 等等
• 微信小程序
• React Native
• 等等诸多技术，简直卷出了天际。。。

上面罗列的基本都是前端技术相关的东西，全栈顾名思义就是要【全部照顾】，前端后端都做，也就是客户端，服务端都做。

栈 本来就是技术的集合，包括了很多需要掌握，使用的技术，框架，工具，还有软件，数据。

后端在 JS 中，最常用的应该就是 Nodejs，常用的 node 框架也有很多，express，koa，nest 等等，偶然中还看到过一个词 MEAN，代表 MongoDB、Express、React、Node。可以说是比较流行的 JS 栈了。

后端一般都会涉及到数据库，那常用的数据库有 MongoDB，MySQL，PostgreSQL 等等，分别代表的 关系型数据库和非关系型数据库。

作为全栈工程师，那必须要知道怎么去从头到尾构建一个 web 应用，包括前端后端所有基础设施。

为了更好的直面寒冬，应对现在大环境，是时候好好准备一下了。

一、简历​

找工作，那肯定不能少了简历，敲门砖嘛！一份好的简历可以让你轻松通过初筛，拿到面试的机会

总结几点

• 简历内容简洁明了，简历模板不需要太花哨
• 内容块要有明确（个人信息，工作经历，项目经历，专业技能，社区blog等模块）
  • 最重要的应该是表现出自己的优势在哪里，比如在项目中，做了哪些难点工作，工作职责内容等
  • 个人在项目中的参与度，是什么角色
  • 个人基本信息
  • 加分项 github（要有内容） blog 网站 有自己的东西
• 专业技能，写那么4-5点就OK，太基础的就不需要写了，两个关键词 『精通』『熟练』要区分

2023年2月的某一天，冷清的工作群里，发来了一条这样的信息：

【因为公司经营XXX，现决定告知上海办公室所有员工，公司员工与公司之间的劳动合同及劳动关系于2023年2月xx日依法终止。。。。。。。。。】

虽然是意料之中的事情，但是还是心里多少有点不安，在当下大环境不好的情况下，这就是一道晴天霹雳！裁员的过程就不多赘述了，过程跌宕起伏（被恶心坏了），结果意料之中吧，拿了 N + 1 主要入职时间很短，没有什么可纠结的点。

前言​

作为一名前端开发工程师，最近在做一款应用，涉及到了前端的数据加密需要研究下。

数据泄露​

插件​

现在有很多的插件，类似于 google 插件这种，可以捕获到前端发送的请求数据，所以如果涉及到了用户信息的，还是得对数据进行特殊处理。

中间人攻击​

中间人攻击是常见的攻击方式。过程就是 中间人通过 DNS 欺骗等手段劫持了客户端与服务端的会话。客户端、服务端之间的信息都会经过中间人，中间人可以获取和转发两者的信息。在 HTTP 下，前端数据加密还是避免不了数据泄露，因为中间人可以伪造密钥。为了避免中间人攻击，一般采用 HTTPS 的形式传输。

加密算法​

对称加密​

也可称为共享密钥加密。意思就是在加密解密都是公用一个密钥，发送和接收双方均使用这个密钥进行数据的加密和解密。这就要求在加密解密前必须知道密钥，对前端来说，势必需要从后端获取密钥，这样也不是太安全。

对称加密常用的算法有：

• AES
• 3DES

非对称加密​

也称为公开密钥加密算法。它需要两个密钥，一个称为公开密钥，也就是常说的公钥，另外一个称为私有密钥，常叫私钥。两者是配对生成的，就像钥匙和锁的关系。

因为加密和解密使用的是两个不用的密钥，所以叫做非对称加密。

• 优点：算法强度复杂，安全性高
• 缺点：没有对称算法快

常见的算法主要有：

• RSA
• Elgamal

散列算法​

也成为哈希函数，散列函数。是把数据压缩称为摘要，从而使数据量变小，将数据的格式固定成特定长度的值。 一般用于校验数据的完整性，下载文件就可以校验 MD5 来判断下载数据是否完整。

常见的算法主要有：

• MD4
• MD5
• SHA

方案​

上面介绍了常见的加密解密算法，下面就需要选择使用哪一种了。

1. 上面也提到了，对称加密由于需要后端返回密钥，反而降低了安全系数，所以是行不通的。
2. 非对称加密，前端用公钥加密，服务端用私钥解密，看起来没什么问题，但是如果到客户端接收数据时，需要服务端用公钥加密，然后客户端用私钥解密。这样的话，不管是客户端还是服务端，都需要生成自己的公钥私钥。
3. 两者结合，第一点中提到了，需要后端返回密钥。

• 客户端生成一个对称加密的 密钥 ①
• 传输内容通过 密钥 ① 进行对称加密传输给服务端
• 同时要把 密钥 ① 利用公钥进行非对称加密给到服务端
• 服务端通过 私钥 把对称加密的 密钥 ① 解密出来，然后用过改密钥 ① 解密出内容 上面是服务端接收，如果是客户算接收的话，就是
• 响应数据跟对称加密的 密钥 ① 进行加密
• 然后客户端接收到密文，通过客户端的 密钥 ① 进行解密

4. 上面三种方案，第二种最简单，但是需要维护两套公钥私钥，公钥变化，就必须通知对方有变化，不够灵活。方案三应该最理想，密钥 ① 更加灵活，而且只需要在客户端维护，也不需要通知服务端，而且如果数据量很大，对称加密又要比非对称快速。

所以最终选用方案三 来实现。

实现​

实现的话，我们选用 AES 对称加密，RSA 非对称加密，

利用 crypto-js 来进行 AES 加密 利用 JSEncrypt RSA 加密

RSA 生成密钥​

import JSEncrypt from "jsencrypt";

// 初始化
const keyPair = new JSEncrypt();

const genKeyPair = () => {
  const genKeyPair = {};
  genKeyPair.privateKey = rsaUtil.keyPair.getPrivateKey(); // 生成RSA密钥
  genKeyPair.publicKey = rsaUtil.keyPair.getPublicKey(); // 生成RSA公钥
  return genKeyPair;
};

RSA 公钥加密​

/**
 * rsa公钥加密
 * @param {*} content 需要加密内容
 * @param {*} publicKey 服务端的公钥
 * @returns
 */
const encryptByRsa = (content, publicKey) => {
  const newValue = typeof content === 'string' ? content : content.toString();

  keyPair.setPublicKey(publicKey);

  return keyPair.encryptLong(newValue); // 注意：加密类型为string
},

RSA 私钥解密​

/**
 * rsa私钥解密
 * @param {*} content 解密的内容
 * @param {*} privateKey 解密私钥
 * @returns
 */
const decryptByRsa = (content, privateKey) => {
  keyPair.setPrivateKey(privateKey);
  return keyPair.decryptLong(content);
};

AES 加密​

import CryptoJS from "crypto-js";

/**
 * data 加密内容
 * key AES密钥
 */
const cryptoData = (data, key) => {
  const aesKey = CryptoJS.enc.Utf8.parse(key);
  const newValue = typeof data === "string" ? cipherContent : JSON.stringify(data);

  const encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(newValue), aesKey, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7,
  });
  return encrypted.toString();
};

AES 解密​

import CryptoJS from "crypto-js";

/**
 * data 解密内容 string
 * key AES密钥
 */
const deCryptoData = (data, key) => {
  const aesKey = CryptoJS.enc.Utf8.parse(key);

  const decrypt = CryptoJS.AES.decrypt(data, aesKey, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });

  const decString = CryptoJS.enc.Utf8.stringify(decrypt).toString();

  return decString instanceof Object ? decString : JSON.parse(decString);
};

总结​

上面的内容，主要介绍了针对当前需求，需要对信息加密及解密，保护客户的隐私数据，虽然会有一点点的性能损失，但是数据安全更重要吧，也为了给破解的人增加一些攻击难度。

欢迎来到 Torli 的 Blogs，在这里，我会分享一些自己平时的工作项目中用到的新奇、好玩的东西，还会分享一些比较新的技术的看法等等。

Blog posts support Docusaurus Markdown features, such as MDX.

<button onClick={() => alert('button clicked!')}>Click me!</button>