完整阅读本文大约需要5分钟。在开始这篇文章之前，想问一下面试时被问到的两个问题：为了防止XSS攻击，我们会对用户的输入内容进行过滤，转义的时机应该是a。输入时的前端处理b．存储后端处理c.什么时候拼接HTML？XSS攻击的防范需要在前端做还是后端做？什么是XSS攻击XSS攻击是Cross-SiteScripting的缩写。说白了就是页面被注入了恶意代码——用户输入的内容跳出了文本限制，变成了可执行代码。XSS攻击的分类根据入侵代码的来源，XSS攻击通常分为三类：存储型XSS攻击特点：恶意代码已落库，拼接成HTML返回。攻击者通过论坛评论区向数据库提交恶意代码；其他用户打开论坛，服务器取出恶意代码，拼接成HTML返回；恶意代码在用户的浏览器上运行；除论坛外，此类攻击还常见于用户发送私信。例如，用户向网站数据库提交评论。
评论内容：<%=getContent("comment")%>
后台拼接：评论内容：
当其他用户访问该页面时，会弹出一个带有“XSS”的对话框。反射型XSS攻击特点：恶意代码拼接成URL，拼接成HTML返回。攻击者拼接包含恶意代码的受害网站URL，诱导用户点击；当用户点击该URL时，目标网站的服务器取出恶意代码，拼接成HTML返回；恶意代码运行在其他用户的浏览器上；此类攻击需要用户主动点击受害网站的URL，攻击者会通过QQ群或邮件等方式诱导点击。例如，恶意URL可能如下所示：http://xxx/search?keyword="Hello<%=getParameter("keyword")%>>
后台拼接后：Hello
点击后页面弹出“XSS”对话框DOM类型XSS攻击特点：恶意代码拼接到URL中，由前端JavaScript代码执行，攻击者拼接出包含恶意代码的受害网站URL，诱导用户点击；用户点击URL;前端JavaScript提取URL中的恶意代码，恶意代码在用户的浏览器中运行；DOM型和反射型的区别在于，在DOM型XSS攻击中，恶意代码的去除和执行代码由浏览器完成，是前端JavaScript本身的安全漏洞，另外两类XSS属于服务端安全漏洞。三种XSS攻击都是一样的：恶意代码在浏览器端运行后，窃取用户本地存储的数据：通过document.cookie获取用户的身份凭证，然后通过网络请求将数据发送给恶意服务器。然后就可以进行下一步：冒充用户向受害网站发起请求，完成指定的操作，比如向攻击者账户转账等。如何防范XSS攻击实施XSS攻击需要两个必要条件：攻击者输入恶意代码；服务器执行恶意代码；我们先来看第一点，是否可以防止攻击者输入恶意代码，先进行HTML转义？如果我们在前端对输入的内容进行转义和过滤，那么攻击者只需要模拟一个请求绕过前端，攻击还是可以成功的。如果在存库的时候在后台进行escape过滤，我们会发现如果内容要提供给多个终端，只有在前台才能正常显示，而在终端上会变成乱码iOS/安卓；return到前端的方式不同，可能无法正常显示。比如普通用户输入内容5<7，在写入数据库之前，先进行转义，变成5<7；用作HTML拼接页面时，可正常显示；当通过Ajax返回然后赋值给一个JavaScript变量时，前端得到的字符串就是转义字符。该内容不能直接用于显示Vue等模板，会像iOS/Android一样变成乱码5<7。所以我们需要通过“防止浏览器执行恶意代码”来防止XSS攻击。纯前端渲染纯前端渲染是指浏览器先加载一个空白的HTML，然后执行HTML导入的JS文件。JS通过AJAX获取业务数据，调用DOMAPI，在页面进行更新。因为在前端，我们可以很明确的告诉浏览器：这是text.innerText，而不是HTML.innerHTML。这样浏览器就不会执行意外的代码。纯前端渲染可以避免存储和反射攻击，但是无法避免DOM攻击。攻击者可以通过在onload事件和href中嵌入javascript:...进行攻击。EscapingHTML对于需要考虑SEO的SSR项目，HTML文件不得不在服务端进行拼接。那么你必须使用HTML转义库。基本规则是转义几个字符&<>"'/。前端渲染时注意高危API，直接使用.innerHTML、.outerHTML、document.write()等插入对于HTMLAPI，其来源必须是可信的。另外标签的location、onclick、onerror、onload、onmouseover、href都可以将字符串作为代码执行。其他常用的策略使用CSP：CSP是ContentSecurityPolicy内容安全策略，限制加载其他域下的资源，即使黑客插入Javascript文件也无法加载；启用HTTPonly：禁止JavaScript读取某些敏感cookie，攻击者将无法完成XSS注入这个cookie不能被盗；验证码：防止脚本冒充用户提交危险操作；结论看完这篇文章，回到前两个问题，库的预处理会导致iOS/Android出现乱码;XSS攻击的防范需要和RD一起完成，存储类和反射类攻击是后端负责，DOM类型是前端负责；