前端必知必会的网络知识之网络安全

Kira2023/3/15...大约 7 分钟

在之前，我有写过关于前端安全的一篇文章。不过时隔一年去看，还是过于幼稚了，很多地方的表述都有问题，所以我删了，在这篇新的文章里重新对这部分的内容进行整理。当然，这篇文章仅仅涵盖网络安全和前端有关系的部分，所以东西也不多。

几种常见的攻击

XSS攻击

xss跨站脚本攻击指的是攻击者利用Web应用程序中的漏洞，向网站注入恶意脚本，使得在用户浏览网站时，恶意脚本被执行，从而导致攻击者能够获取用户的敏感信息或者进行一些恶意操作。

既然其执行机理是在被攻击者的浏览器中执行脚本，那么我们就要关心一下攻击者是如何注入脚本的。从这个点出发去思考，如果对XSS攻击来源进行分类，有以下几种：

存储型XSS：攻击者通过将恶意脚本注入数据库，当被攻击者访问网站时恶意脚本被读取执行。这种攻击常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等。
反射型XSS：攻击者通过URL携带恶意脚本，被攻击者点击URL访问网站就中招了。这种攻击常见于通过 URL 传递参数的功能，如网站搜索、跳转等。由于需要用户主动打开恶意的 URL 才能生效，攻击者往往会结合多种手段诱导用户点击（比如一刀999真传奇、澳门皇家xx性感xx在线发牌等）。
DOM型XSS：区别于反射型XSS，这种攻击方式不是利用服务端漏洞进行攻击，而是利用前端代码的漏洞来攻击的。前端代码去解析URL传递的参数导致误执行恶意脚本，从而使攻击者得逞。

预防手段也是有的，不过这里只聊聊前端的注意事项：

在前端如果要请求后端的html字符串进行展示（比如富文本展示的情景），可以使用xss库对后端返回的数据进行过滤，见：聊一聊这个总下载量3603w的xss库，是如何工作的？ - Tz一号 - 博客园。
前端编码时如果要获取URL数据去做一些渲染数据的工作，一定要进行过滤处理，防止出现DOM型XSS漏洞

CSRF攻击

csrf跨站请求伪造指的是攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。通过这种方式，攻击者可以利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

举个例子，假设a.com是被攻击者经常访问的正常网站，b.com 是攻击者架设的恶意站点，在b.com中会有如下恶意代码：

<form action="http://a.com/withdraw" method=POST>
    <input type="hidden" name="account" value="xiaoming" />
    <input type="hidden" name="amount" value="10000" />
    <input type="hidden" name="for" value="hacker" />
</form>
<script> document.forms[0].submit(); </script>

被攻击者如果打开b.com，会自动对a.com发请求，浏览器会默认携带a.com的Cookie，也就是被攻击者之前保留的登陆凭证。这样一次csrf攻击就完成了。

防范csrf攻击可以有以下几个思路：

使用随机令牌：在每个表单提交中，生成一个随机令牌，并将该令牌存储在用户的会话中。在表单提交时，验证该令牌是否与会话中的令牌匹配。这样可以确保提交表单的用户是在您的应用程序中进行操作的真正用户。
检查来源头：在服务器端，检查每个请求的来源头，确保它来自您的应用程序，而不是其他网站。这可以通过验证来源头中的域名来实现。Chrome 51开始，浏览器的 Cookie新增加了一个SameSite属性，主要用于防止CSRF攻击和用户追踪。更加详尽的解析可以看Cookie Samesite简析 - 知乎。
在敏感操作（如更改密码、删除帐户等）之前，要求用户输入验证码。这可以确保只有真正的用户才能执行这些操作。
避免使用GET请求：GET请求可以轻松地被劫持并被篡改，因此避免使用它们来执行敏感操作。
使用HTTPS可以确保请求和响应在传输过程中得到加密，从而防止被劫持。

中间人攻击

这个和前端其实没啥关系，不过还是提一下。

简单理解，就是两人发信息，信息传输的过程有内鬼，然后两端的人都不知道。具体过程看下面的图就知道了（图是百度上随便偷的，不过基本都是那么回事）：

HTTPS协议采用证书验证机制规避中间人攻击。原理也很简单，受到证书的客户端可使用数字证书认证机构的公开密钥（安装在用户本地），对那张证书上的数字签名进行验证。（当然，这种机制架不住用户安装来历不明的证书）

HTTPS

现在来聊聊上面中间人攻击提到的HTTPS。

HTTP传递信息是以明文的形式发送内容，不安全，所以有了HTTPS。HTTP的默认端口号是80，而HTTPS是443。

HTTPS主要由两部分组成：HTTP + SSL / TLS，也就是在HTTP上又加了一层处理加密信息的模块。服务端和客户端的信息传输都会通过TLS进行加密，所以传输的数据都是加密后的数据。

提示

SSL(Secure Sockets Layer)：安全套接字协议
TLS(Transport Layer Security)：传输层安全，是为网络通信提供安全及数据完整性的一种安全协议。

HTTPS的主要优点有三个，分别是：信息加密、完整性校验、身份验证。下面围绕这三个点展开聊聊。

信息加密

首先介绍下对称加密和非对称加密。对称加密指的是加密和解密使用的秘钥都是同一个，是对称的。而非对称加密则存在两个不同的秘钥，一个叫公钥，一个叫私钥。公钥可以公开给任何人使用，私钥则需要保密；公钥加密后只能用私钥解密，反过来，私钥加密后也只能用公钥解密。

HTTPS采用对称加密+非对称加密传输数据，也就是常说的混合加密。先用非对称加密进行对称加密密钥的传输，再用这个对称加密密钥进行对称加密传输数据。

不过在网络传输过程中，数据有可能被篡改，并且黑客可以伪造身份发布公钥。所以HTTPS传输还需要保证数据不被篡改。

完整性校验

HTTPS实现保障数据完整不被篡改的方式是使用摘要算法。简单理解的话，摘要算法是一种特殊的压缩算法，它能够把任意长度的数据“压缩”成固定长度、而且独一无二的字符串。在原文附上摘要后，接收端只需要用同样的方式对接收到的原文生成摘要，与传送过来的摘要进行对比，就可以知道数据有没有被篡改了。

身份认证

如果公钥真实性得不到保证，上面做的几件事情其实都没啥用。这时候我们需要客户端和服务端双方都信赖的数字证书认证机构（CA）来担保公钥的真实性。服务器的公钥在登录至数字认证机构之后，数字证书认证机构为服务器颁发证书（服务器的公开密钥+CA的数字签名）；当客户端收到服务端发来的数字证书时，可以通过CA的公开密钥（浏览器内置）来验证公钥是否真实。