学习前端的过程中我以前对安全知识一直停留在死记硬背的阶段只知道 XSS、CSRF 是攻击方式却始终不懂底层逻辑、不知道开发中该如何规避。直到把前端安全纳入整体知识体系后我才真正明白前端安全不是晦涩的理论而是写在每一行代码里的开发习惯核心原则就是永远不要信任任何外部数据提前规避风险、配合后端做好双层防护。XSS 跨站脚本攻击是前端最常见的安全风险本质就是攻击者将恶意脚本伪装成普通文本数据让我们的网页在用户浏览器中错误解析并执行。大多出现在评论区、留言板、富文本提交等用户可自定义输入的场景看似正常的内容实则暗藏恶意代码。我整理出了XSS 攻击完整流程在 Vue 开发中框架自带安全机制同时也存在明确的风险漏洞两种渲染方式的安全性有着天壤之别也是日常开发最需要注意的细节。下面是 Vue 中安全与危险的渲染写法对比!-- 绝对安全{{}} 自动转义所有内容只作为纯文本展示 -- div{{ commentContent }}/div !-- 高危风险v-html 直接解析 HTML可执行恶意脚本 -- div v-htmlcommentContent/div双大括号插值是 Vue 默认的安全方案会强制转义特殊字符无论内容包含何种脚本都只会渲染为普通文字从根源杜绝 XSS 风险。而 v-html 会完全信任数据内容交给浏览器解析执行一旦接收不可信数据就会直接触发攻击。但在富文本编辑器、博客正文、文章详情等场景v-html 是刚需无法完全舍弃。这种场景不能直接放弃功能而是要遵循先清洗、后渲染的安全原则。必须使用 v-html 时的标准安全流程我也明确了「外部不可信数据」的范围不止用户手动输入的内容后端接口返回数据、第三方接口数据、URL 地址参数、localStorage 缓存数据、富文本内容全部属于不可信数据源都需要保持安全警惕。如果说 XSS 是“执行了不该执行的代码”那 CSRF 跨站请求伪造就是“冒用身份发送用户未授权的请求”。它不会窃取用户数据、不会执行脚本而是利用浏览器的特性盗用用户的登录状态伪造操作。CSRF 完整攻击流程1. 用户正常登录 A 网站浏览器保存 A 网站 Cookie 2. 用户未退出登录保持登录状态 3. 用户访问恶意 B 网站 4. B 网站诱导浏览器发起 A 网站请求 5. 浏览器自动携带 A 网站 Cookie 6. A 服务器校验通过判定为用户本人操作 7. 伪造操作生效改信息、删内容、提交订单等CSRF 最隐蔽的点在于攻击者不需要知道用户密码、不需要窃取 Token仅仅依靠浏览器自动携带 Cookie的机制就能完成攻击非常容易被忽略。目前行业主流的三种防护方案各有作用我也理清了各自的使用场景同时明确了前端需要负责的工作。为了彻底区分两者我整理了核心对比表格方便长期记忆对比项XSS跨站脚本攻击CSRF跨站请求伪造核心本质恶意代码被浏览器执行利用登录身份伪造用户请求风险源头不可信的 HTML/脚本数据浏览器自动携带 Cookie 机制前端关注点v-html 慎用、数据转义、内容清洗Token 携带、请求校验、Cookie 配置核心防护默认插值渲染、富文本清洗过滤SameSite、CSRF Token、校验请求源最后总结我的学习认知前端安全从来不是单一的理论知识点而是一套落地的开发规范。XSS 教会我不信任所有外部输入严格区分渲染方式CSRF 教会我重视请求身份校验配合后端完善防护。真正的安全永远是前端规避 后端校验的双重保障。