面试官也在看的前端面试资料

首先，加密的目的，简而言之就是将明文转换为密文、甚至转换为其他的东西，用来隐藏明文内容本身，防止其他人直接获取到敏感明文信息、或者提高其他人获取到明文信息的难度。通常我们提到加密会想到密码加密、HTTPS等关键词，这里从场景和方法分别提一些我的个人见解。

前端密码传输过程中如果不加密，在日志中就可以拿到用户的明文密码，对用户安全不太负责。这种加密其实相对比较简单，可以使用PlanA-前端加密、后端解密后计算密码字符串的MD5/MD6存入数据库；也可以PlanB-直接前端使用一种稳定算法加密成唯一值、后端直接将加密结果进行MD5/MD6，全程密码明文不出现在程序中。

PlanA使用Base64/Unicode+1等方式加密成非明文，后端解开之后再存它的MD5/MD6。

PlanB直接使用MD5/MD6之类的方式取Hash，让后端存Hash的Hash。

应该大家有遇到过：打开一个正经网站，网站底下蹦出个不正经广告——比如X通的流量浮层，X信的插入式广告……（我没有针对谁）但是这几年，我们会发现这种广告逐渐变少了，其原因就是大家都开始采用HTTPS了。被人插入这种广告的方法其实很好理解：你的网页数据包被抓取-在数据包到达你手机之前被篡改-你得到了带网页广告的数据包-渲染到你手机屏幕。而HTTPS进行了包加密，就解决了这个问题。严格来说我认为从手段上来看，它不算是一种前端加密场景；但是从解决问题的角度来看，这确实是前端需要知道的事情。

Plan全面采用HTTPS

经常有人开发网页爬虫爬取大家辛辛苦苦一点一点发布的数据成果，有些会影响你的竞争力，有些会降低你的知名度，甚至有些出于恶意爬取你的公开数据后进行全量公开……比如有些食谱网站被爬掉所有食谱，站点被克隆；有些求职网站被爬掉所有职位，被拿去卖信息；甚至有些小说漫画网站赖以生存的内容也很容易被爬取。

Plan将文本内容进行展示层加密，利用字体的引用特点，把拿给爬虫的数据变成“乱码”。举个栗子：正常来讲，当我们拥有一串数字“”并将其放在网站页面上的时候，其实网站页面上显示的并不是简单的数字，而是数字对应的字体的“”。这时我们打乱一下字体中图形和字码的对应关系，比如我们搞成这样：

图形：

字码：

这时，如果你想让用户看到“”，你在页面中渲染的数字就应该是“”。这种手段也可以算作一种加密。具体的实现方法可以看一下《Web端反爬虫技术方案》：