整体的 XSS 防范是非常复杂和繁琐的，不仅需要在全部需要转义的位置，对数据进行对应的转义。而且要防止多余和错误的转义，避免正常的用户输入出现乱码。
虽然很难通过技术手段完全避免 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 漏洞。
Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。
为了和 CSS 区分，这里把攻击的第一个字母改成了 X，于是叫做 XSS。
XSS 的本质是：恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。
而由于直接在用户的终端执行，恶意代码能够直接获取用户的信息，或者利用这些信息冒充用户向网站发起攻击者定义的请求。
在部分情况下，由于输入的限制，注入的恶意脚本比较短。但可以通过引入外部的脚本，并由浏览器执行，来完成比较复杂的攻击策略。
XSS 有哪些注入的方法：
- 在 HTML 中内嵌的文本中，恶意内容以 script 标签形成注入。
- 在内联的 JavaScript 中，拼接的数据突破了原本的限制（字符串，变量，方法名等）。
- 在标签属性中，恶意内容包含引号，从而突破属性值的限制，注入其他属性或者标签。
- 在标签的 href、src 等属性中，包含
javascript:等可执行代码。 - 在 onload、onerror、onclick 等事件中，注入不受控制代码。
- 在 style 属性和标签中，包含类似
background-image:url("javascript:...");的代码（新版本浏览器已经可以防范）。 - 在 style 属性和标签中，包含类似
expression(...)的 CSS 表达式代码（新版本浏览器已经可以防范）。
总之，如果开发者没有将用户输入的文本进行合适的过滤，就贸然插入到 HTML 中，这很容易造成注入漏洞。攻击者可以利用漏洞，构造出恶意的代码指令，进而利用恶意代码危害数据安全。
详情请查看:https://segmentfault.com/a/1190000016551188#articleHeader4