前端 | 浏览器安全：XSS攻击、CSRF攻击、中间人攻击

1. XSS攻击

1.1 什么是XSS攻击

XSS攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗用用户的信息如cookie等

本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨那些脚本是可信的，从而导致了恶意代码的执行

攻击者通过这种攻击方式可以进行一下操作：

• 获取页面的数据，如DOM、cookie、localStorage
• DOS攻击，发送合理请求，占用服务器资源，从而使用户无法访问服务器
• 破坏页面结构
• 流量劫持（将链接指向某网站）

1.2 攻击类型

XSS攻击可以分为三种：存储型、反射型和DOM型

• 存储型指的是恶意脚本会存储在目标服务器上，当浏览器请求数据时，脚本从服务器传回并执行
• 反射型指的是攻击者诱导用户访问一个带有恶意代码的URL后，服务器端接收数据后处理，然后把带有恶意代码的数据发送到浏览器端，浏览器端解析这段带有XSS代码的数据后当作脚本执行，最终完成XSS
• DOM型指的是通过修改页面的DOM节点形成的XSS

1）存储型XSS攻击步骤

1. 攻击者将恶意代码提交到目标网站的数据库中
2. 用户打开目标网站时，网站服务端将恶意代码从数据库中取出，拼接在HTML中返回给浏览器
3. 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行
4. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作

这种攻击常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等

2）反射型XSS攻击步骤

1. 攻击者构造出特殊的 URL，其中包含恶意代码。
2. ⽤户打开带有恶意代码的 URL 时，⽹站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。
3. ⽤户浏览器接收到响应后解析执⾏，混在其中的恶意代码也被执⾏。
4. 恶意代码窃取⽤户数据并发送到攻击者的⽹站，或者冒充⽤户的⾏为，调⽤⽬标⽹站接⼝执⾏攻击者指定的操作。

反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库⾥，反射型 XSS 的恶意代码存在 URL ⾥。

反射型 XSS 漏洞常⻅于通过 URL 传递参数的功能，如⽹站搜索、跳转等。 由于需要⽤户主动打开恶意的 URL 才能⽣效，攻击者往往会结合多种⼿段诱导⽤户点击。

3）DOM型XSS攻击步骤

1. 攻击者构造出特殊的 URL，其中包含恶意代码。
2. ⽤户打开带有恶意代码的 URL。
3. ⽤户浏览器接收到响应后解析执⾏，前端 JavaScript 取出 URL 中的恶意代码并执⾏。
4. 恶意代码窃取⽤户数据并发送到攻击者的⽹站，或者冒充⽤户的⾏为，调⽤⽬标⽹站接⼝执⾏攻击者指定的操作。

DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执⾏恶意代码由浏览器端完成，属于前端JavaScript ⾃身的安全漏洞，⽽其他两种 XSS 都属于服务端的安全漏洞。

1.3 如何防御XSS攻击

• 可以从浏览器的执行来进行预防，一种是使用纯前端的方式，不用服务器端拼接后返回（不使用服务端渲染）。另一种是对需要插入到 HTML 中的代码做好充分的转义。对于 DOM 型的攻击，主要是前端脚本的不可靠而造成的，对于数据获取渲染和字符串拼接的时候应该对可能出现的恶意代码情况进行判断。
• 使用 CSP ，CSP 的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行，从而防止恶意代码的注入攻击。

1. CSP 指的是内容安全策略，它的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截由浏览器自己来实现。
2. 通常有两种方式来开启 CSP，一种是设置 HTTP 首部中的 Content-Security-Policy，一种是设置 meta 标签的方式

• 对一些敏感信息进行保护，比如 cookie 使用 http-only，使得脚本无法获取。也可以使用验证码，避免脚本伪装成用户执行一些操作。

2. CSRF攻击

2.1 什么是CSRF攻击

CSRF攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站被攻击网站发送跨域请求。如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。
CSRF 攻击的本质是利用 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充

2.2 攻击类型

常见的 CSRF 攻击有三种：

1. GET 类型的 CSRF 攻击，比如在网站中的一个 img 标签里构建一个请求，当用户打开这个网站的时候就会自动发起提交。
2. POST 类型的 CSRF 攻击，比如构建一个表单，然后隐藏它，当用户进入页面时，自动提交这个表单。
3. 链接类型的 CSRF 攻击，比如在 a 标签的 href 属性里构建一个请求，然后诱导用户去点击。

2.3 如何防御CSRF攻击

CSRF 攻击可以使用以下方法来防护：

• 进行同源检测，服务器根据 http 请求头中 origin 或者 referer 信息来判断请求是否为允许访问的站点，从而对请求进行过滤。当 origin 或者 referer 信息都不存在的时候，直接阻止请求。这种方式的缺点是有些情况下 referer 可以被伪造，同时还会把搜索引擎的链接也给屏蔽了。所以一般网站会允许搜索引擎的页面请求，但是相应的页面请求这种请求方式也可能被攻击者给利用。（Referer 字段会告诉服务器该网页是从哪个页面链接过来的）
• 使用 CSRF Token 进行验证，服务器向用户返回一个随机数 Token ，当网站再次发起请求时，在请求参数中加入服务器端返回的 token ，然后服务器对这个 token 进行验证。这种方法解决了使用 cookie 单一验证方式时，可能会被冒用的问题，但是这种方法存在一个缺点就是，我们需要给网站中的所有请求都添加上这个 token，操作比较繁琐。还有一个问题是一般不会只有一台网站服务器，如果请求经过负载平衡转移到了其他的服务器，但是这个服务器的 session 中没有保留这个 token 的话，就没有办法验证了。这种情况可以通过改变 token 的构建方式来解决。
• 对Cookie 进行双重验证，服务器在用户访问网站页面时，向请求域名注入一个Cookie，内容为随机字符串，然后当用户再次向服务器发送请求的时候，从 cookie 中取出这个字符串，添加到 URL 参数中，然后服务器通过对 cookie 中的数据和参数中的数据进行比较，来进行验证。使用这种方式是利用了攻击者只能利用 cookie，但是不能访问获取 cookie 的特点。并且这种方法比 CSRF Token 的方法更加方便，并且不涉及到分布式访问的问题。这种方法的缺点是如果网站存在 XSS 漏洞的，那么这种方式会失效。同时这种方式不能做到子域名的隔离。
• 在设置 cookie 属性的时候设置 Samesite ，限制 cookie 不能作为被第三方使用，从而可以避免被攻击者利用。Samesite 一共有两种模式，一种是严格模式，在严格模式下 cookie 在任何情况下都不可能作为第三方 Cookie 使用，在宽松模式下，cookie 可以被请求是 GET 请求，且会发生页面跳转的请求所使用。

3. 中间人攻击

中间⼈ (Man-in-the-middle attack, MITM) 是指攻击者与通讯的两端分别创建独⽴的联系, 并交换其所收到的数据, 使通讯的两端认为他们正在通过⼀个私密的连接与对⽅直接对话, 但事实上整个会话都被攻击者完全控制。在中间⼈攻击中，攻击者可以拦截通讯双⽅的通话并插⼊新的内容。

3.1 攻击过程如下:

• 客户端发送请求到服务端，请求被中间⼈截获
• 服务器向客户端发送公钥
• 中间⼈截获公钥，保留在⾃⼰⼿上。然后⾃⼰⽣成⼀个伪造的公钥，发给客户端
• 客户端收到伪造的公钥后，⽣成加密hash值发给服务器
• 中间⼈获得加密hash值，⽤⾃⼰的私钥解密获得真秘钥,同时⽣成假的加密hash值，发给服务器
• 服务器⽤私钥解密获得假密钥,然后加密数据传输给客户端

3.2 常见攻击场景：

• 公共 Wi-Fi 劫持：在未加密的 Wi-Fi 环境中，攻击者可以拦截用户数据。
• DNS 劫持：将用户重定向到伪造的恶意网站。
• HTTPS 劫持：伪造或篡改 SSL/TLS 证书，使用户误以为与合法服务器通信。
• ARP 欺骗：在局域网中，伪造 ARP 数据包，冒充网关或目标设备。

3.3 如何防范中间人攻击

1）使用HTTPS

目标：确保通信的加密性和完整性，防止攻击者窃取或篡改数据。

原理：HTTPS 基于 TLS 协议，为数据提供加密传输。浏览器通过验证服务器证书，确保通信方的真实性。
实现：

• 确保服务器部署了有效的 SSL/TLS 证书。
• 配置 HSTS（HTTP Strict Transport Security），强制浏览器仅通过 HTTPS 访问网站。
• 定期更新证书，避免过期。

补充：为什么 HTTPS 有用？
即使攻击者拦截数据，也无法解密，因为只有客户端和服务器持有对应的加密密钥。

2）多因素认证（MFA）

目标：即使攻击者窃取了用户的凭证，也难以完成账户登录。

原理：通过额外的验证方式（如短信验证码、手机动态口令）增强安全性。
常见形式：

• 动态口令（如 Google Authenticator）。
• 短信或邮件验证码。
• 硬件安全密钥（如 YubiKey）。

3）检查和验证 SSL/TLS 证书

目标：防止用户误入伪造网站。

验证步骤：

• 确认地址栏显示的“锁”标志，确保 HTTPS 连接有效。
• 检查证书是否由可信的证书颁发机构（CA）签发。
• 确保证书的域名和有效期匹配。

4） 防范 DNS 劫持

目标：防止用户被重定向到伪造网站。

方法：

• 启用 DNSSEC（Domain Name System Security Extensions），确保 DNS 响应未被篡改。
• 使用可信的 DNS 服务提供商（如 Google Public DNS、Cloudflare DNS）。
• 验证重要网站的 IP 地址是否正确。

5）Cookie 安全设置

目标：防止攻击者通过劫持 Cookie 伪装用户。

关键属性：

• HttpOnly：防止 JavaScript 访问 Cookie，避免 XSS 攻击窃取。
• Secure：仅在 HTTPS 连接中传输 Cookie。
• SameSite：防止 CSRF 攻击。
  • Strict：严格限制跨站请求。
  • Lax：适用于 GET 请求。
  • None：允许跨站请求，但需配合 HTTPS。

6）使用虚拟专用网络（VPN）

目标：在不安全的网络环境中（如公共 Wi-Fi），通过加密隧道保护数据传输。

原理：VPN 创建一个加密通道，将数据传输至目标服务器，防止中间人查看通信内容。
使用场景：

• 在咖啡店、机场等公共 Wi-Fi 场景中使用。
• 企业内部网络通信。
  注意事项：使用可靠的 VPN 服务提供商，避免被不可信 VPN 劫持流量。

3.4 总结

中间人攻击防范的核心是确保通信的机密性、完整性和身份认证。使用 HTTPS 和 VPN 是最常用的防范手段，同时配合多因素认证和加密技术，能够大大减少中间人攻击的风险。在面试中，结合实际应用场景，重点提及 HTTPS、证书验证、公共 Wi-Fi 风险以及如何使用加密技术防御攻击，能展现你的网络安全知识深度。