前端XSS和CSRF以及CSP

在前端开发中，防范跨站脚本攻击（XSS）和跨站请求伪造（CSRF）是构建安全Web应用的关键环节。内容安全策略（CSP）则在其中扮演了重要的角色，尤其在XSS防御方面。

一、 跨站脚本攻击（XSS）及其防范

1. 什么是XSS攻击？

XSS（Cross-Site Scripting）是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使这些脚本在用户的浏览器上运行。利用这些恶意脚本，攻击者可以获取用户的敏感信息（如Cookie、SessionID等），甚至冒充用户执行操作，进而危害数据安全。 [1][2]

XSS攻击主要分为三类：

• 存储型XSS（持久型XSS） ：恶意代码被存储在服务器端（如数据库），当用户访问包含恶意代码的页面时，恶意脚本会被从服务器取出并执行。 [1][3]
• 反射型XSS（非持久型XSS） ：恶意代码存在于URL参数中，当用户点击包含恶意代码的URL时，服务器将恶意代码"反射"回浏览器，浏览器执行该脚本。 [1][3]
• DOM型XSS ：恶意代码的执行由浏览器端完成，属于前端JavaScript自身的安全漏洞，通常是由于前端脚本处理用户输入不当导致的。 [1]

2. 前端如何防范XSS攻击？

前端防范XSS攻击的核心思想是对用户输入的数据进行严格处理，并限制浏览器执行不可信的代码。

• 输入/输出检查与编码转义：

  • 对用户输入进行编码、过滤和验证 ：对所有用户输入的数据进行字符实体编码转义，特别是特殊字符如<、>、script等。 [4][5] 移除不合法的HTML属性（如onerror）、style节点、iframe、script节点等。 [4] 限制用户输入的长度，增加攻击难度。 [1][4] 最好采用白名单机制，只允许输入预期的字符类型。 [6][7]
  • 对输出到HTML页面的内容进行编码或转义 ：除了富文本内容，在将变量输出到HTML页面时，应使用编码或转义的方式防御XSS攻击。 [1][4] 例如，使用innerText来显示非富文本内容，避免使用innerHTML或outerHTML直接插入不可信数据。 [1][2]

• 设置HttpOnly Cookie ：将敏感的Cookie设置为HttpOnly属性。这可以禁止JavaScript脚本读取带有此属性的Cookie，即使发生XSS攻击，攻击者也无法通过JavaScript窃取用户的Cookie数据，从而降低攻击影响。 [1][4]

• 使用安全的API和框架：

  • 选择并及时更新具有内置XSS防护机制的现代前端框架（如React、Vue）。 [7][8]
  • 避免将不可信数据拼接到字符串中传递给eval()、setTimeout()、setInterval()、location.href等可能执行代码的API。 [1][3]

• 避免内联脚本和样式 ：尽可能使用外部样式表和脚本文件。如果必须使用内联，确保它们经过适当的编码或过滤。 [8]

• 内容安全策略（CSP） ：作为额外的安全层，CSP可以有效检测并削弱XSS攻击（详见下文）。 [1][4]

• 其他安全实践 ：定期进行代码审查和安全测试，遵循最小权限原则，使用HTTPS确保数据传输安全。 [7][8]

二、 跨站请求伪造（CSRF）及其防范

1. 什么是CSRF攻击？

CSRF（Cross-Site Request Forgery）即跨站请求伪造，是一种劫持受信任用户向服务器发送非预期请求的攻击方式。 [4][9]

CSRF攻击的原理是：攻击者诱导受害者访问一个恶意网站，该恶意网站利用受害者在被攻击网站已登录的凭证（通常是Cookie），向被攻击网站发送伪造的请求。由于浏览器会自动携带目标网站的Cookie，服务器会误以为是用户自己的合法请求，从而执行攻击者指定的操作（如转账、修改密码等）。 [4][10]

CSRF与XSS的区别：

• 本质不同 ：XSS是代码注入问题，CSRF是HTTP请求问题。 [4][10]
• 利用方式 ：XSS利用的是用户对指定网站的信任，通过注入恶意代码在用户浏览器执行。CSRF利用的是网站对用户网页浏览器的信任，通过伪造请求冒充用户操作。 [4][10]
• 攻击目标 ：XSS旨在窃取用户信息、会话劫持或篡改页面内容。CSRF旨在冒充用户执行非预期操作，但不直接窃取数据。 [4][10]

2. 前端如何防范CSRF攻击？

防范CSRF攻击主要通过在请求中加入攻击者无法伪造的信息，或者限制跨站请求的发送。

• CSRF Token：

  • 原理 ：服务器在用户登录后生成一个唯一的、不可预测的CSRF Token，并将其存储在用户会话中。 [9][10]
  • 前端实现 ：前端页面在发起所有可能修改数据的请求（如POST、PUT、DELETE请求）时，将此Token嵌入到表单隐藏字段中或作为HTTP请求头的一部分发送给服务器。 [11]
  • 后端验证 ：服务器接收到请求后，会验证请求中携带的Token与会话中存储的Token是否一致。不一致则拒绝请求。 [9][10]
  • 安全性 ：只要页面没有XSS漏洞导致Token泄露，CSRF Token是目前最有效的CSRF防护方法之一。 [9]

• SameSite Cookie属性：

  • 原理 ：为Set-Cookie响应头新增SameSite属性，用来限制Cookie的发送行为。 [9][10]

  • 属性值：

    • Strict：最严格，Cookie只会在同站请求中发送，完全阻止跨站请求携带Cookie。 [11][12]
    • Lax：默认值，Cookie会在同站请求和部分跨站请求（如顶级导航的GET请求）中发送，但会阻止跨站POST请求携带Cookie。 [11][12]

  • 效果 ：通过限制Cookie在跨站请求中的发送，可以有效阻止大部分CSRF攻击。 [13]

• Referer/Origin Header校验：

  • 原理 ：HTTP请求头中的Origin和Referer字段标识了请求的来源域名。 [9][10]
  • 实现 ：后端可以检查这些头部信息，如果请求来自非预期的域，则拒绝该请求。 [9][10]
  • 局限性 ：虽然作为辅助防御措施，但这些头部信息可能被用户禁用或在某些情况下不发送，因此不作为主要防御手段。 [11][14]

• 双重提交Cookie（Double-Submit Cookie） ：

  • 原理 ：服务器向客户端发送一个包含随机值的Cookie，前端在每次请求时读取该Cookie的值，并将其作为请求参数或自定义请求头再次提交给服务器。 [9][12]
  • 验证 ：服务器比较Cookie中的值和请求中携带的值是否一致。 [9][12]
  • 安全性 ：利用了攻击者无法读取其他域Cookie的特性。 [9] 相对于CSRF Token，实施成本较低，但安全性略逊，且在子域名存在XSS时可能失效。 [9][12]

• 敏感操作使用POST请求 ：避免使用GET请求进行状态修改操作，因为GET请求更容易被伪造（如通过图片<img>标签、<a>链接等）。 [11][15]

• 验证码或二次认证 ：对于涉及资金或敏感信息的关键操作，要求用户输入验证码或进行二次身份验证（如短信验证码、指纹等）。 [4][9]

三、 内容安全策略（CSP）

1. 什么是CSP？

CSP（Content Security Policy）是一种额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本（XSS）和数据注入攻击等。 [1][4]

2. CSP如何工作？

CSP通过HTTP响应头（Content-Security-Policy）或HTML页面的<meta>标签进行配置。 [4][16] 它定义了一系列指令，用于指定浏览器可以为当前页面加载哪些类型的资源（如脚本、样式、图片、字体等）以及这些资源的来源。 [4][17] 浏览器会根据CSP规则，只加载和执行来自白名单源的资源，并阻止所有不在白名单中的资源。 [4][17]

3. 严格CSP（Strict CSP） ：

为了更有效地防范XSS，现代CSP推荐使用"严格CSP"，它通常基于Nonce（一次性随机数）或Hash（哈希值）。 [17]

• Nonce-based CSP ：为每个请求生成一个唯一的随机数（Nonce），并将其包含在CSP头和合法的<script>标签中。只有带有匹配Nonce的脚本才会被执行。 [17]
• Hash-based CSP ：将内联脚本的哈希值添加到CSP策略中。只有哈希值匹配的脚本才会被执行。 [17]
  严格CSP能有效阻止攻击者注入和执行恶意脚本，因为它要求脚本要么具有正确的Nonce，要么其哈希值在策略中被明确允许。 [17]

四、 XSS、CSRF与CSP的关系

• CSP与XSS ：

  CSP是专门为防御XSS攻击而生的"神器"。 [18] 它通过建立资源加载的白名单机制，并限制内联脚本的执行，大大降低了XSS攻击的成功率和影响范围。 [1][4] CSP是一种纵深防御技术，它不能替代对用户输入的严格清理，但作为额外的安全层，可以有效防止恶意脚本的执行。 [17]

• CSP与CSRF ：

  CSP本身不直接防范 CSRF攻击。 [13][19] CSRF关注的是请求的伪造，而CSP关注的是页面内容的加载和脚本的执行。然而，CSP可以通过间接方式对CSRF防御起到辅助作用：

  • 防止XSS绕过CSRF防御 ：如果网站存在XSS漏洞，攻击者可能利用XSS来读取页面中的CSRF Token，或者直接在受害者浏览器中发起合法的跨域请求，从而绕过CSRF防御。CSP通过有效缓解XSS，间接堵塞了这种绕过CSRF防御的路径。 [9][13]

• XSS与CSRF的联系与区别 ：

  虽然XSS和CSRF都是常见的Web安全漏洞，且都属于客户端攻击，但它们在攻击原理、目标和防范策略上存在显著差异。XSS是代码注入，利用浏览器执行恶意代码；CSRF是请求伪造，利用浏览器自动携带Cookie的特性。 [4][10] CSP主要用于防御XSS，而CSRF则需要依赖Token、SameSite Cookie等机制进行防范。

---

好文:

1. 前端安全系列（一）：如何防止XSS攻击？ - 美团技术团队
2. 前端安全-如何防止XSS攻击- sjpqy - 博客园
3. 前端安全：如何防止XSS 攻击和保护用户隐私
4. 前端安全-XSS和CSRF - JackySummer
5. 浅谈网络安全--xss、csrf、csp - 王玉略的网络日志
6. 前端如何防止XSS攻击？ - 王铁柱6 - 博客园
7. 前端安全：XSS攻击与防御策略-云社区 - 华为云
8. 前端安全：XSS攻击与防御策略 - 稀土掘金
9. 前端安全系列（二）：如何防止CSRF攻击？ - 美团技术团队
10. 【前端安全】--CSRF攻防- Leise - 博客园
11. 前端安全：CSRF攻击与防御 - 稀土掘金
12. 前端安全系列：如何防止CSRF攻击？【下】 - XiaoYouShan
13. Same-site cookie，CSRF 的救星？ | Beyond XSS
14. 前端安全系列-csrf攻击 - 稀土掘金
15. CSRF是什么？有效的防御措施有哪些？ - 前端_风雨开发路
16. 内容安全策略（CSP） - HTTP - MDN Web Docs
17. 使用严格的内容安全政策(CSP) 缓解跨站脚本攻击(XSS) | Articles | web.dev
18. 防XSS的利器，什么是内容安全策略(CSP)？ - 腾讯云
19. 防范攻击的常见策略：CSP和Referer Policy - 小高同学1997 - 博客园