前端安全常常被开发者忽视，但一旦出问题后果严重。本文用通俗的语言讲解两种最常见的前端攻击方式：XSS 和 CSRF 的原理，以及对应的防护方案，看完就能落地到项目中。
很多前端开发者觉得安全是后端的事，实际上前端是安全的第一道防线。了解常见攻击方式，在开发时做好防护，能大幅提升网站的安全性。
XSS 全称跨站脚本攻击，本质是攻击者往页面里注入了恶意脚本，用户访问时脚本执行，就能窃取 Cookie、伪造操作等。最常见的是存储型 XSS，比如用户发表评论时提交了一段 script 标签，后端没有过滤直接存入数据库，其他用户浏览时脚本就会执行。
防护 XSS 的核心原则是：永远不要相信用户输入。所有用户提交的内容，输出到页面时都要做转义，把尖括号、引号等特殊字符转成实体。现代前端框架默认都会做转义，正常使用下不容易出问题，但如果使用 v-html、innerHTML 等直接插入 HTML 的方式，就必须格外小心，确保内容是可信的，或者经过严格的消毒处理。另外给 Cookie 设置 HttpOnly 属性，即使被注入脚本也无法读取 Cookie，降低损失。
CSRF 全称跨站请求伪造，原理是攻击者诱导用户登录状态下访问恶意网站，利用用户的登录态，偷偷向目标网站发起请求。防护方法主要有三种：关键接口验证验证码；验证请求来源 Referer；使用 Token 机制，每次请求携带服务端下发的随机令牌，后端校验通过才处理。其中 Token 方案应用最广泛，也是目前的主流做法。