> For the complete documentation index, see [llms.txt](https://1425816423.gitbook.io/my-knowledge-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1425816423.gitbook.io/my-knowledge-base/qian-duan-an-quan-yu-xing-neng-you-hua/qian-duan-an-quan/kua-zhan-jiao-ben-gong-ji-xss.md). # 跨站脚本攻击(XSS) ## XSS跨站脚本攻击跨站脚本攻击通常是通过非法注入HTML代码或JavaScript代码来操控用户浏览器的。跨站脚本攻击主要分三种 * DOM型：DOM可以通过操作JavaScript脚本动态的改变文档结构、样式和行为，它不需要服务器的参与，是属于前端的安全漏洞。 * 反射性（又称非持久性）：攻击者将恶意代码注入到URL中，然后提交到服务器，服务器解析后将这段恶意代码返回给浏览器，然后浏览器解析。 * 存储性（持久性）：攻击者将恶意代码发送给服务器，服务器保存到数据库中，当浏览器请求此数据时就会被攻击。我们讨论一下上面三种类型的XSS攻击场景。 ### DOM型。 DOM型是纯粹的前端漏洞，一定不能将用户输入的内容直接通过`v-html`、`outnerHTML`或`innerHTML`渲染，否则很容易受到DOM型XSS攻击。请看下面这种代码： ```html

``` 入侵者可以很容易通过输入框入侵，通过`

// 这时HTML变为了

``` 通过`

`和`<\p>`来闭合原本的标签，然后注入恶意代码。防御反射型XSS攻击的方式和防止DOM型类似，可以通过验证参数格式，避免使用`innerHTML`和`v-html`和对关键字符转义等方式防御此类攻击。 ### 存储型存储型是危害最大的一种XSS攻击方式，攻击者将恶意代码发送给服务器，并长久地保存在服务器中，当浏览器请求此数据时就会被攻击。一旦攻击者成功将恶意代码注入到服务器中，那么任何加载这段恶意代码的用户都会受到攻击。试想一下，在一个说说社区，一个用户将恶意代码作为说说发布，如果前端和后端都没做任何防御措施，后端会将其当做普通说说存储到数据库中，而所有用户一旦打开说说社区加载到了这条说说，那么就有可能被入侵。存储型和反射型类似，但是不同的是存储型XSS攻击会将恶意代码存入到数据库中，实现长久攻击，因此存储型XSS攻击也被称为长期型XSS攻击。防御的手段有 1. 进行数据验证，避免输入非法字符，严格规定输入数据的格式，从根本上阻止恶意代码被注入到数据库中，后端也应该做此限制，因为攻击者可能会绕开前端直接发送http请求。 2. 转义特殊字符，原理同上。 ### 总结 XSS攻击本质上是通过注入非法的HTML代码来实现入侵，因此只要针对它的攻击特点做出针对性的防御措施，就能抵御攻击。总结针对XSS攻击最有效的防御手段有 * 尽量避免直接使用`v-html`、`innerHTML`和`outerHTML`，特别是要避免将用户的输入直接渲染，最好是使用vue的模板语法或v-text，如果要使用v-html，必须要确保内容的来源是可信的，并使用dompurify这类工具进行处理。 * 对用户输入的表单格式进行验证，严格限制用户输入的格式，比如注册时手机号必需要是11位的纯数字。不仅前端需要验证，后端也需要验证。 * 对特殊字符转义常用的转义字符 * `<` * `>` * `"` * `'` * `&` * `/` 除此之外还有 1. 使用在响应头`Set-Cookie`加上`httpOnly`,这样可以避免js访问此cookie，这并不能阻止XSS，但是可以减少损失。