xss · 前端技术总结

## 一、什么是XSS Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。 ## 二、XSS 分类 | 类型 | 存储区* | 插入点* | |---|---|---| | 存储型 XSS | 后端数据库 | HTML | | 反射型 XSS | URL | HTML | | DOM 型 XSS | 后端数据库/前端存储/URL | 前端 JavaScript | * 存储区：恶意代码存放的位置。 * 插入点：由谁取得恶意代码，并插入到网页上。 ## 三、XSS 攻击的介绍 1、链接script ``` http://xxx/search?keyword="><script>alert('XSS');</script> ``` 2、input注入 ``` <input type="text" value=""><script>alert('XSS');</script>"> ``` 3、链接javascript ``` http://xxx/?redirect_to=javascript:alert('XSS') http://xxx/?redirect_to=jAvascRipt:alert('XSS') ``` 4、针对cookie ``` http://m.exmail.qq.com/cgi-bin/login?uin=aaaa&domain=bbbb%26quot%3B%3Breturn+false%3B%26quot%3B%26lt%3B%2Fscript%26gt%3B%26lt%3Bscript%26gt%3Balert(document.cookie)%26lt%3B%2Fscript%26gt%3B ``` ## 四、XSS预防 * 利用模板引擎开启模板引擎自带的 HTML 转义功能。例如：在 ejs 中，尽量使用 <%= data %> 而不是 <%- data %>；在 doT.js 中，尽量使用 {{! data } 而不是 {{= data }；在 FreeMarker 中，确保引擎版本高于 2.3.24，并且选择正确的 freemarker.core.OutputFormat。 * 避免内联事件尽量不要使用 onLoad="onload('{{data}}')"、onClick="go('{{action}}')" 这种拼接内联事件的写法。在 JavaScript 中通过 .addEventlistener() 事件绑定会更安全。 * 避免拼接 HTML 前端采用拼接 HTML 的方法比较危险，如果框架允许，使用 createElement、setAttribute 之类的方法实现。或者采用比较成熟的渲染框架，如 Vue/React 等。 * 时刻保持警惕在插入位置为 DOM 属性、链接等位置时，要打起精神，严加防范。 * 增加攻击难度，降低攻击后果通过 CSP、输入长度配置、接口安全措施等方法，增加攻击的难度，降低攻击的后果。 * 主动检测和发现可使用 XSS 攻击字符串和自动扫描工具寻找潜在的 XSS 漏洞。参考： https://segmentfault.com/a/1190000016551188