XSS 跨站脚本攻击
XSS 核心原理：恶意脚本注入页面并被浏览器执行，根据触发方式分为三类：
- 存储型 XSS（持久型）
恶意代码提交到服务端数据库/文件，其他用户访问页面时自动加载执行。
典型场景是评论区、留言板、帖子、个人简介等公共输入模块，这种危害范围最广。
- 反射型 XSS（非持久型）
恶意代码拼接在 URL 中，诱导用户点击链接，参数直接被页面解析执行，不会存入服务端。
典型场景：搜索栏、跳转链接、页面传参、广告链接。
- DOM 型 XSS
纯前端漏洞，不经过服务端，靠前端 JS 直接操作 DOM 解析恶意内容。
典型场景：innerHTML、document.write、eval、location.href 直接解析用户输入、URL 参数、本地存储内容。
这种 XSS 攻击都会窃取 Cookie、劫持会话、钓鱼诱导、篡改页面、植入木马、盗取本地数据。
XSS 前端防护方案
输入过滤与输出转义（最基础）
对用户输入特殊字符转义（< > & " ' /），框架层面优先使用 Vue/React 原生插值语法，框架自带转义，天然防御 XSS；禁止直接使用 innerHTML/outerHTML。
安全渲染策略
如果需要富文本、动态 HTML等，建议使用成熟富文本库（如 Quill、DOMPurify）清洗标签，杜绝自定义脚本、onclick/onload 事件、javascript: 伪协议。
Cookie 安全配置
给 Cookie 开启 HttpOnly + Secure：HttpOnly 禁止 JS 读取 Cookie，从根源阻止会话劫持；Secure 仅 HTTPS 下传输。
CSP 内容安全策略（强防御）
通过 meta 标签或响应头设置 CSP，限制脚本加载源、禁止内联脚本/eval、禁止未知域名资源加载，是 XSS 终极防御手段。
禁止危险 API
业务代码完全禁用 eval、new Function、setTimeout(字符串) 等可执行字符串的 API。
URL 与跳转校验
框架层面增加跳转逻辑校验目标域名白名单，禁止直接使用用户输入拼接跳转地址。
CSRF 跨站请求伪造
CSRF的核心原理是利用用户已登录的身份，诱导在第三方页面发起非法请求。
浏览器会自动带上当前站点 Cookie/身份凭证，服务端无法区分请求是用户主动操作还是伪造请求。
最典型的就是诱导点击恶意图片/链接/表单，发起增删改接口请求（改密码、转账、发布内容、退出登录）。
基于 <img>、<iframe>、隐藏表单自动提交实现静默攻击。
但是这种攻击仅针对有状态接口（依赖 Cookie/Session 鉴权），纯前端静态页面无风险。
CSRF前端防护方案
前端无法单独根治 CSRF，需前后端配合，前端主要做请求层、页面层防护：
使用 Token 验证（主流方案）
服务端下发 CSRF Token，前端每次 POST/PUT/DELETE 等危险请求。
主动在请求头/表单携带 Token；攻击者无法获取 Token，请求直接拦截。
SameSite Cookie 属性
服务端设置 Cookie SameSite=Strict/Lax：
- Strict：跨站请求完全不携带 Cookie；
- Lax：常规跨站 GET 允许、表单 POST 禁止携带，兼顾体验与安全，目前最常用。
前端无需额外编码，属于浏览器+服务端配置。
请求方式与接口规范约束
敏感操作完全禁止使用 GET 请求（极易被图片、链接利用伪造）。
全局统一使用 POST/PUT 提交敏感数据，接口增加请求头校验（如 X-Requested-With）。
页面风险拦截
拦截站内页面加载未知第三方 iframe、恶意外链，减少被诱导攻击的入口。
区别
-
XSS：偷取用户权限、执行恶意代码，主动攻击用户浏览器。
-
CSRF：冒用用户身份发起请求，借用用户身份攻击服务端。
前端还需联动防御 点击劫持（iframe 嵌套）、URL 劫持、本地存储（LocalStorage/SessionStorage）数据泄露，敏感数据绝不存前端本地。
1分钟面试简洁版
我简单说下 XSS 和 CSRF 的攻击面与前端防护：
首先是 XSS，分存储型、反射型、DOM 型三类，前两类会经过服务端，DOM 型是纯前端漏洞，都是注入恶意脚本执行，会窃取数据、劫持账号。
前端防护主要做：输入输出转义，优先用框架原生语法，避免 innerHTML、eval 等危险 API。
富文本用 DOMPurify 清洗。
给 Cookie 开 HttpOnly；配置 CSP 内容安全策略做强制拦截。
然后是 CSRF，原理是冒用用户登录状态伪造请求，利用浏览器自动带 Cookie 的特性篡改数据。
前端配合服务端防护：接口请求携带 CSRF 令牌，敏感操作不用 GET。
配合服务端设置 Cookie 的 SameSite 属性，从浏览器层面阻断跨站伪造请求。
简单区分的花：XSS 是跑恶意代码，CSRF 是借身份发请求，日常开发会结合规范、框架、浏览器特性多层防御。
