当前位置：首页 > news >正文

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

news 2025/9/6 13:29:54

在 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（内容安全策略）：限制能执行脚本的来源，禁止内联脚本
敏感接口要校验：防止恶意脚本调用重要脚本

1.1. Token vs HttpOnly Cookie

在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。