前端面试查漏补缺--(八) 前端加密

11,405 阅读14分钟

前言

本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家.

为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏,关注我!谢谢!

文章链接

合集篇:

前端面试查漏补缺--Index篇(12万字符合集) 包含目前已写好的系列其他十几篇文章.后续新增值文章不会再在每篇添加链接,强烈建议议点赞,关注合集篇!!!!,谢谢!~

前端加密的意义

这是一个绕不开的话题,肯定有很多看法.但我看来:前端加密看起来有意义,但有时候看起来并没有"意义". 但总体来看是有意义的,打个比喻:既然市面上大部分锁都可以在20分钟内撬开,那门上装锁是否还有意义?

有意义: 在 HTTP 协议下,数据是明文传输,传输过程中网络嗅探可直接获取其中的数据。 如用户的密码和信用卡相关的资料,一旦被中间人获取,会给用户带来极大的安全隐患。另一方面在非加密的传输过程中,攻击者可更改数据或插入恶意的代码等。那么前端加密的意义: 即在数据发送前将数据进行哈希或使用公钥加密。如果数据被中间人获取,拿到的则不再是明文。

当然还有其他一些优点:例如避免后端等打印日志直接暴露明文密码,还可以避免明文撞库等.

没有"意义": 前端加密,其实只能防君子不能防小人。 前端系统的控制权是完全在用户手里的,也就是说,前端做什么事情,用户有完全的控制权。即使前端加密不可以防范中间人攻击,包括HTTPS,因为中间还是存在着各种代理,客户端代理,服务端代理.是很难做到不被劫持的.

这里简单说下:

  • 加密了也无法解决重放的问题,你发给服务器端的虽然是加密后的数据,但是黑客拦截之后,把加密之后的数据重发一遍,依然是验证通过的。直接监听到你所谓的密文,然后用脚本发起一个http请求就可以登录上去了。 http在网络上是明文传输的,代理和网关都能够看到所有的数据,在同一局域网内也可以被嗅探到。加密也没有提高什么攻击难度,因为攻击者就没必要去解密原始密码,能登录上去就表示目标已经实现了,所以,难度没有提高。
  • 既然是加密,那么加密用的密钥和算法肯定是保存在前端的,攻击者通过查看源码就能得到算法和密钥。除非你是通过做浏览器插件,将算法和密钥封装在插件中,然后加密的时候明文混淆上时间戳,这样即使黑客拦截到了请求数据,进行重放过程时,也会很快失效。

总结一下:

  • 1,安全是前后端都需要做的事,不能前端加密了,后端就不管了.
  • 2,HTTPS还是有必要的,只要正确使用了HTTPS连接和服务器端安全的哈希算法,密码系统都可以是很安全的。

这里我只是简单梳理下,如果还有疑惑想深入探(si)讨(bi)的,可以看下逼乎上的这篇文章

前端加密的几种做法

• JavaScript 加密后传输(具体可以参考后面的常见加密方法)

• 浏览器插件内进行加密传输 (这个用得不是很多,这里暂不细究)

• Https 传输

加密算法

不同于哈希(后面会提到),加密(Encrypt)是将目标文本转换成具有不同长度的、可逆的密文。也就是说加密算法是可逆的,而且其加密后生成的密文长度和明文本身的长度有关。所以如果被保护数据在以后需要被还原成明文,则需要使用加密。

在加密算法中又分为对称加密(symmetric encryption)和非对称加密(asymmetric encryption)。

对称加密

对称加密采用了对称密码编码技术,它的特点是文件加密和解密使用相同的密钥加密.也就是加密和解密都是用同一个密钥,这种方法在密码学中叫做对称加密算法.

对称加密算法使用起来简单快捷,密钥较短,且破译困难,除了数据加密标准(DES),另一个对称密钥加密系统是国际数据加密算法(IDEA),它比DES的加密性好,而且对计算机功能要求也没有那么高.

常见的对称加密算法有DES、3DES、Blowfish、IDEA、RC4、RC5、RC6和AES

注意: 因为前端的透明性,对于登录密码等敏感信息,就不要使用JavaScript来进行对称加密. 因为别人可以从前端得到密匙后,可以直接对信息进行解密!

非对称加密

非对称加密算法需要两个密钥:公钥(publickey)和私钥(privatekey)。 公钥与私钥是一对,如果用公钥对数据进行加密,只有用对应的私钥才能解密;如果用私钥对数据进行加密,那么只有用对应的公钥才能解密。 因为加密和解密使用的是两个不同的密钥,所以这种算法叫作非对称加密算法。

非对称加密算法实现机密信息交换的基本过程是:甲方生成一对密钥并将其中的一把作为公钥向其它方公开;得到该公钥的乙方使用该密钥对机密信息进行加密后再发送给甲方;甲方再用自己保存的另一把专用密钥对加密后的信息进行解密。甲方只能用其专用密钥解密由其公钥加密后的任何信息。

常见的非对称加密算法有:RSA、ECC(移动设备用)、Diffie-Hellman、El Gamal、DSA(数字签名用)

哈希加密算法

哈希算法(Hash)

哈希(Hash)是将目标文本转换成具有固定长度的字符串(或叫做消息摘要)。 当输入发生改变时,产生的哈希值也是完全不同的。从数学角度上讲,一个哈希算法是一个多对一的映射关系,对于目标文本 T,算法 H 可以将其唯一映射为 R,并且对于所有的 T,R 具有相同的长度,所以 H 不存在逆映射,也就是说哈希算法是不可逆的。

基于哈希算法的特性,其适用于该场景:被保护数据仅仅用作比较验证且不需要还原成明文形式。比较常用的哈希算法是 MD5 和 SHA1 。

我们比较熟悉的使用哈希存储数据的例子是:当我们登录某个已注册网站时,在忘记密码的情况下需要重置密码,此时网站会给你发一个随机的密码或者一个邮箱激活链接,而不是将之前的密码发给你,这就是因为哈希算法是不可逆的。

需要注意的是:在 Web 应用中,在浏览器中使用哈希加密的同时也要在服务端上进行哈希加密。

服务端哈希加密原因: 一方面因为不需要将密文解密成明文来比对密码,另一方面是一旦加密算法和密钥泄露,那么整个用户资料库就相当于明文存储了。如果前端传过来的是明文,那么在注册时将其哈希,存入数据库。登录时,将密码哈希和数据库对应的数据比对,若一致则说明密码正确。

现在,对于简单的哈希算法的攻击方法主要有:寻找碰撞法和穷举法。所以,为了保证数据的安全,可以在哈希算法的基础上进一步的加密,常见的方法有:加盐、慢哈希、密钥哈希、XOR 等。

加盐(Adding Salt)

加盐加密是一种对系统登录口令的加密方式,它实现的方式是将每一个口令同一个叫做“盐”(salt)的 n 位随机数相关联。

为了方便理解:这里引用这位同学的文章进行说明:

使用salt加密,它的基本想法是这样的:

  • 1.用户注册时,在密码上撒一些盐。生成一种味道,记住味道。
  • 2.用户再次登陆时,在输入的密码上撒盐,闻一闻,判断是否和原来的味道相同,相同就让你吃饭。

由于验证密码时和最初散列密码时使用相同的盐值,所以salt的存储在数据库。并且这个值是由系统随机产生的,而非硬编码。这就保证了所要保护对象的机密性。

注册时:

  • 1.用户注册,系统随机产生salt值。
  • 2.将salt值和密码连接起来,生产Hash值。
  • 3.将Hash值和salt值分别存储在数据库中。

登陆时:

  • 1.系统根据用户名找到与之对应的密码Hash。
  • 2.将用户输入密码和salt值进行散列。
  • 3.判断生成的Hash值是否和数据库中Hash相同。

PS: 其实图中的这种登录也是不安全的. 原因是后面要提到的盐值复用

使用加盐加密时需要注意以下两点:

  • 短盐值(Short Slat)

如果盐值太短,攻击者可以预先制作针对所有可能的盐值的查询表。例如,如果盐值只有三个 ASCII 字符,那么只有 95x95x95=857,375 种可能性,加大了被攻击的可能性。还有,不要使用可预测的盐值,比如用户名,因为针对某系统用户名是唯一的且被经常用于其他服务。

  • 盐值复用(Salt Reuse)

在项目开发中,有时会遇到将盐值写死在程序里或者只有第一次是随机生成的,之后都会被重复使用,这种加盐方法是不起作用的。以登录密码为例,如果两个用户有相同的密码,那么他们就会有相同的哈希值,攻击者就可以使用反向查表法对每个哈希值进行字典攻击,使得该哈希值更容易被破解。

所以正确的加盐方法如下:

(1)盐值应该使用加密的安全伪随机数生成器( Cryptographically Secure Pseudo-Random Number Generator,CSPRNG )产生,比如 C 语言的 rand() 函数,这样生成的随机数高度随机、完全不可预测;

(2)盐值混入目标文本中,一起使用标准的加密函数进行加密;

(3)盐值要足够长(经验表明:盐值至少要跟哈希函数的输出一样长)且永不重复;

(4)盐值最好由服务端提供,前端取值使用。

慢哈希函数(Slow Hash Function)

顾名思义,慢哈希函数是将哈希函数变得非常慢,使得攻击方法也变得很慢,慢到足以令攻击者放弃,而往往由此带来的延迟也不会引起用户的注意。降低攻击效率用到了密钥扩展( key stretching)的技术,而密钥扩展的实现使用了一种 CPU 密集型哈希函数( CPU-intensive hash function)。看起来有点晕~还是关注下该函数怎么用吧!

如果想在一个 Web 应用中使用密钥扩展,则需要设定较低的迭代次数来降低额外的计算成本。我们一般直接选择使用标准的算法来完成,比如 PBKDF2 或 bcrypt 。PHP、斯坦福大学的 JavaScript 加密库都包含了 PBKDF2 的实现,浏览器中则可以考虑使用 JavaScript 完成,否则这部分工作应该由服务端进行计算。

密钥哈希

密钥哈希是将密钥添加到哈希加密,这样只有知道密钥的人才可以进行验证。目前有两种实现方式:使用 ASE 算法对哈希值加密、使用密钥哈希算法 HMAC 将密钥包含到哈希字符串中。为了保证密钥的安全,需要将其存储在外部系统(比如一个物理上隔离的服务端)。

即使选择了密钥哈希,在其基础上进行加盐或者密钥扩展处理也是很有必要。目前密钥哈希用于服务端比较多,例如来应对常见的 SQL 注入攻击。

XOR

XOR 大家都不陌生,它指的是逻辑运算中的 “异或运算”。两个值相同时,返回 false,否则返回 true,用来判断两个值是否不同。

JavaScript 语言的二进制运算,有一个专门的 XOR 运算符,写作^。


1 ^ 1 // 0

0 ^ 0 // 0

1 ^ 0 // 1

0 ^ 1 // 1

XOR 运算有一个特性:如果对一个值连续做两次 XOR,会返回这个值本身。这也是其可以用于信息加密的根本。


message XOR key // cipherText

cipherText XOR key // message

目标文本 message,key 是密钥,第一次执行 XOR 会得到加密文本;在加密文本上再用 key 做一次 XOR 就会还原目标文本 message。为了保证 XOR 的安全,需要满足以下两点:

(1)key 的长度大于等于 message ;

(2)key 必须是一次性的,且每次都要随机产生。

下面以登录密码加密为例介绍下 XOR 的使用:

第一步:使用 MD5 算法,计算密码的哈希;


const message = md5(password);

第二步:生成一个随机 key 值;

第三步:进行 XOR 运算,求出加密后的 message。


function getXOR(message, key) 

const arr = [];

//假设 key 是32位的

for (let i = 0; i < 32; i++) {
  const  m = parseInt(message.substr(i, 1), 16);
  const k = parseInt(key.substr(i, 1), 16);
  arr.push((m ^ k).toString(16));
}

return arr.join('');

}

如上所示,使用 XOR 和一次性的密钥 key 对密码进行加密处理,只要 key 没有泄露,目标文本就不会被破解。

上面说了那么多,问题就来了:我们应该使用什么样的哈希算法呢?

(1)选择经过验证的成熟算法,如 PBKDF2 等 ;

(2)crypt 的安全版本;

(3)避免使用自己设计的加密算法。

HMAC

对于HMAC算法,我也不是太了解.看了几篇文章,感觉和加盐很像,就是salt换成后端随机生成的(好像可以防止重放攻击).然后再通过HMAC算法,得到摘要.

关于HMAC算法部分可以详细看这篇文章,我是学渣,看了半天也不是太懂.=.=

大概过程如下:

  • 1.客户端发出登录请求
  • 2.服务器返回一个随机值,在会话记录中保存这个随机值
  • 3.客户端将该随机值作为密钥,用户密码进行 hmac 运算,递交给服务器
  • 4.服务器读取数据库中的用户密码,利用密钥做和客户端一样的 hmac运算,然后与用户发送的结果比较,如果一致,则用户身份合法。

好处:

  • 与自定义的加salt算法不同,Hmac算法针对所有哈希算法都通用,无论是MD5还是SHA-1。采用Hmac替代我们自己的salt算法,可以使程序算法更标准化,也更安全。(摘自雪峰大佬的这篇文章)
  • 另外一个就是密码的安全性,由于不知道密钥,所以不可能获取到用户密码

补充1: 结合验证码进行前端加密 (其实就是一种动态加盐哈希)

前端先将密码哈希,然后和用户输入的验证码进行哈希,得到的结果作为密码字段发送给服务器。服务器先确认验证码正确,然后再进行密码验证,否则直接返回验证码错误信息。

这种实践保证了密码在传输过程中的资料安全,即使攻击者拿到了数据也无法重放。图形化验证码更是增加了难度。另一方面该实践大大增加了撞库的成本。

前端加密一定程度保障了传输过程中的资料安全,那么会不会有对两端(客户端和服务器)有安全帮助呢?

有帮助,使用一些前端加密手段,可以增加拖库后的数据破解难度。但是验证码方法不具有这样的功能,因为数据库存的仍是明文密码哈希后的结果,那么攻击者可以绕过前端加密,可以直接暴力破解。

补充2: Base64 编码

大家经常说的是 Base64 加密,有 Base64 加密吗?真木有,只有 Base64 编码。

Base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法。常用于在通常处理文本数据的场合,表示、传输、存储一些二进制数据,包括 MIME 的 email,email via MIME,在 XML 中存储复杂数据;主要用来解决把不可打印的内容塞进可打印内容的需求。js中 base64 方法使用如下:

//1.编码
var result = Base.encode('shotCat好帅!');  //--> "c2hvdENhdOWlveW4hSE="

//2.解码
var result2 = Base.decode(result); //--> 'shotCat好帅!' 没错,我就是这么不要脸!!!

因此,Base64 适用于小段内容的编码,比如数字证书签名、Cookie的内容等;而且 Base64 也是一种通过查表的编码方法,不能用于加密,如果需要加密,请使用专业的加密算法。

PS: 对于前端来说,base64用得最多的也就是图片转码吧.

补充3: 数字签名

数字签名主要用于:确认信息来源于特定的主体且信息完整、未被篡改,发送方生成签名,接收方验证签名。

发送方: 首先计算目标文本的摘要(哈希值),通过私钥对摘要进行签名,将目标文本和电子签名发送给接收方。

接收方: 验证签名的步骤如下:

  • 1,通过公钥破解电子签名,得到摘要 D1 (如果失败,则信息来源主体校验失败);
  • 2,计算目标文本摘要 D2;
  • 3,若 D1 === D2,则说明目标文本完整、未被篡改。

数字签名与非对称加密区别:

  • 非对称加密(加密/解密):公钥加密,私钥解密。
  • 数字签名(签名/验证):私钥签名,公钥验证。

HTTPS加密

为了避免重复,这部分内容在本系列-HTTP与HTTPS有详细介绍

感谢及参考

求内推

如果有好的前端岗位,欢迎内推我,谢谢。

本科,三年运维,五年前端。 base 武汉 邮箱 bupabuku@foxmail.com