什么是XSS攻击

XSS（Cross-Site Scripting，跨站脚本攻击）是一种常见的网络安全漏洞，它允许攻击者在受害者的浏览器上执行恶意脚本。这种攻击通常发生在 web 应用程序中，攻击者通过注入恶意脚本来利用用户对网站的信任，从而在用户的浏览器上执行恶意操作。

XSS 攻击可以分为三种主要类型：

Stored (持久型) XSS 攻击： 攻击者将恶意脚本存储在服务器上，然后这些脚本被返回给用户，被用户浏览器解释并执行。常见的场景是在用户评论、留言板等地方注入恶意脚本，一旦其他用户访问这些内容，就可能受到攻击。

Reflected (反射型) XSS 攻击： 攻击者将恶意脚本注入到一个 URL 中，当用户访问带有恶意脚本的 URL 时，脚本会被解释并执行。这种攻击方式通常需要用户点击一个恶意链接才能生效。

DOM-based XSS 攻击： 这种攻击是基于文档对象模型（DOM）的，攻击者通过修改页面的 DOM 结构来注入恶意脚本，当页面解析并执行这些脚本时，就会导致攻击。

XSS 攻击可能导致的后果包括但不限于：

盗取用户的敏感信息，如登录凭据、个人信息等。
在用户账户下执行未授权的操作。
重定向用户到恶意站点。
传播恶意链接和脚本，影响其他用户。
篡改网页内容，伪造虚假信息。

原理

XSS 攻击的原理是利用了网页应用中未正确处理用户输入数据的漏洞，通过注入恶意脚本使得攻击者可以在用户浏览器中执行恶意代码。攻击者通过将恶意脚本注入到网页的输出内容中，当其他用户访问这些受到注入影响的内容时，浏览器会解释并执行这些恶意脚本。

XSS 攻击通常基于以下几个步骤：

1. 注入恶意脚本： 攻击者在 web 应用的输入字段、评论框、搜索框等用户可以输入内容的地方，注入恶意脚本。这些恶意脚本可以是 JavaScript 代码，但也可以是其他的客户端脚本语言。

2. 服务器输出受影响的内容： 被攻击的网站在没有对用户输入的内容进行适当处理的情况下，将带有恶意脚本的内容保存到数据库或直接返回给其他用户。

3. 受害者浏览器解释并执行脚本： 当其他用户访问包含恶意脚本的页面时，他们的浏览器会解释并执行这些恶意脚本。这可能导致恶意脚本在用户的浏览器中执行各种操作，如盗取用户的信息、篡改页面内容、执行未授权操作等。

前端如何预防XSS攻击

1. 输入验证和过滤： 对于用户输入的数据，进行严格的验证和过滤，确保只接受预期的数据类型和格式。使用正则表达式、白名单过滤等方法来限制输入的内容。

2. 对输出进行编码： 在将数据输出到页面上时，使用适当的编码方式，如 HTML 实体编码，以防止恶意脚本的执行。这可以通过相关的库或函数来实现。

3. 不信任用户输入： 不要相信用户的输入，即使是看似无害的输入也可能包含恶意代码。一定要进行适当的验证和过滤，不要直接将用户输入作为页面内容输出。

4. 使用安全框架和库： 使用像 React、Angular、Vue 等安全框架和库，它们在渲染页面时通常会自动处理编码和防护，从而减轻了 XSS 攻击的风险。

5. 设置 Content Security Policy（CSP）： CSP 是一种在浏览器中设置的安全政策，它限制了允许加载和执行的资源，从而减少了攻击者注入恶意脚本的可能性。

6. 避免使用内联脚本和样式： 尽量避免在 HTML 中使用内联脚本和样式，因为这会增加 XSS 攻击的风险。而是应该将脚本和样式集中放在外部文件中。

7. 定期更新依赖库： 使用的依赖库可能存在安全漏洞，定期更新这些库以获取最新的安全修复。

8. 安全域设置： 在一些情况下，可以通过设置 document.domain 来减轻 XSS 攻击的风险，但需要谨慎使用。

9. 教育用户： 教育用户在不信任的网站上不要点击不明链接，不要下载不明文件，以减少他们受到恶意攻击的可能性。

CSRF攻击

CSRF（Cross-Site Request Forgery，跨站请求伪造）攻击是一种网络安全漏洞，它利用用户已经认证过的会话信息来伪造用户的请求，从而在用户不知情的情况下执行恶意操作。这种攻击可能导致用户在未经授权的情况下执行操作，比如更改账户设置、发布内容等。

CSRF 攻击通常涉及以下步骤：

1. 用户已登录认证： 用户在一个网站（例如网银、社交媒体等）上已经登录并获得了有效的会话。

2. 攻击者构建恶意页面： 攻击者构建一个恶意网页，其中包含触发恶意操作的请求。这个请求可能是一个图片加载、链接点击等。

3. 受害者访问恶意页面： 当受害者在已登录的状态下访问了恶意网页，网页中的恶意请求也会被发送。

4. 受害者的会话被利用： 因为受害者已经登录并有有效的会话，恶意请求中会携带受害者的认证信息，导致服务器误以为这个请求是合法的。

5. 恶意操作执行： 服务器接收到恶意请求后，会执行其中包含的操作，可能包括修改账户信息、发布内容等。

如何预防CSRF攻击

可以采取以下措施来预防 CSRF攻击：

1. 使用 CSRF Token： 在每个请求中包含一个随机生成的 CSRF Token，并将该 Token 存储在用户的会话中或者在 Cookie 中。服务器在接收到请求时会验证请求中的 Token 是否与用户会话中的 Token 匹配，从而确保请求的合法性。

2. SameSite Cookie 属性： 将敏感操作所需的会话 Cookie 设置为 SameSite=Strict 或 SameSite=Lax。这可以限制 Cookie 的跨站发送，从而减少 CSRF 攻击的风险。

3. 添加自定义请求头： 在请求头中添加自定义的标识，比如自定义的请求头字段，以便服务器验证请求的合法性。

4. 不使用默认身份验证凭证： 不要使用浏览器的默认身份验证凭证（如 HTTP 基本认证或 Digest 认证）来进行敏感操作，因为这些凭证在每个请求中都会自动发送，容易被利用。

5. 要求用户再次认证敏感操作： 对于敏感操作，比如修改账户信息或进行支付，要求用户再次输入密码或进行其他的认证，即使用户已经登录。

6. 设置请求头： 在前端设置自定义请求头来表明这个请求是用户意愿的操作，服务器可以根据这个请求头来判断请求的合法性。

7. 限制跨域请求： 使用 CORS（Cross-Origin Resource Sharing）策略来限制跨域请求，确保只有特定的域名可以发送请求。

8. 禁止自动登录： 避免在用户退出登录后自动登录，以减少 CSRF 攻击的影响。