前端安全系列：如何防止XSS攻击？

既然输入过滤并非完全可靠，我们就要通过“防止浏览器执行恶意代码”来防范 XSS。这部分分为两类：

1.  防止 HTML 中出现注入。
2.  防止 JavaScript 执行时，执行恶意代码。

预防存储型和反射型 XSS 攻击

存储型和反射型 XSS 都是在服务端取出恶意代码后，插入到响应 HTML 里的，攻击者刻意编写的“数据”被内嵌到“代码”中，被浏览器所执行。

预防这两种漏洞，有两种常见做法：

•  改成纯前端渲染，把代码和数据分隔开。
•  对 HTML 做充分转义。

纯前端渲染

纯前端渲染的过程：

1.  浏览器先加载一个静态 HTML，此 HTML 中不包含任何跟业务相关的数据。
2.  然后浏览器执行 HTML 中的 JavaScript。
3.  JavaScript 通过 Ajax 加载业务数据，调用 DOM API 更新到页面上。

在纯前端渲染中，我们会明确的告诉浏览器：下面要设置的内容是文本（.innerText），还是属性（.setAttribute），还是样式（.style）等等。浏览器不会被轻易的被欺骗，执行预期外的代码了。

但纯前端渲染还需注意避免 DOM 型 XSS 漏洞（例如 onload 事件和 href 中的 javascript:xxx 等，请参考下文”预防 DOM 型 XSS 攻击“部分）。

在很多内部、管理系统中，采用纯前端渲染是非常合适的。但对于性能要求高，或有 SEO 需求的页面，我们仍然要面对拼接 HTML 的问题。

转义 HTML

如果拼接 HTML 是必要的，就需要采用合适的转义库，对 HTML 模板各处插入点进行充分的转义。

常用的模板引擎，如 doT.js、ejs、FreeMarker 等，对于 HTML 转义通常只有一个规则，就是把 & < > " ' / 这几个字符转义掉，确实能起到一定的 XSS 防护作用，但并不完善：

所以要完善 XSS 防护措施，我们要使用更完善更细致的转义策略。

例如 Java 工程里，常用的转义库为 org.owasp.encoder。以下代码引用自 org.owasp.encoder 的官方说明。

<!-- HTML 标签内文字内容 -->  
<div><%= Encode.forHtml(UNTRUSTED) %></div>  
<!-- HTML 标签属性值 -->  
<input value="<%= Encode.forHtml(UNTRUSTED) %>" />  
<!-- CSS 属性值 -->  
<div style="width:<= Encode.forCssString(UNTRUSTED) %>">  
<!-- CSS URL -->  
<div style="background:<= Encode.forCssUrl(UNTRUSTED) %>">  
<!-- JavaScript 内联代码块 -->  
<script>  
  var msg = "<%= Encode.forJavaScript(UNTRUSTED) %>";  
  alert(msg);  
</script>  
<!-- JavaScript 内联代码块内嵌 JSON -->  
<script>  
var __INITIAL_STATE__ = JSON.parse('<%= Encoder.forJavaScript(data.to_json) %>');  
</script>  
<!-- HTML 标签内联监听器 -->  
<button  
  onclick="alert('<%= Encode.forJavaScript(UNTRUSTED) %>');">  
  click me  
</button>  
<!-- URL 参数 -->  
<a href="/search?value=<%= Encode.forUriComponent(UNTRUSTED) %>&order=1#top">  
<!-- URL 路径 -->  
<a href="/page/<%= Encode.forUriComponent(UNTRUSTED) %>">  
<!--  
  URL.  
  注意：要根据项目情况进行过滤，禁止掉 "javascript:" 链接、非法 scheme 等  
-->  
<a href='<%=  
  urlValidator.isValid(UNTRUSTED) ?  
    Encode.forHtml(UNTRUSTED) :  
    "/404"  
%>'>  
  link  
</a> 

可见，HTML 的编码是十分复杂的，在不同的上下文里要使用相应的转义规则。

预防 DOM 型 XSS 攻击

DOM 型 XSS 攻击，实际上就是网站前端 JavaScript 代码本身不够严谨，把不可信的数据当作代码执行了。

在使用 .innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 .textContent、.setAttribute() 等。

如果用 Vue/React 技术栈，并且不使用 v-html/dangerouslySetInnerHTML 功能，就在前端 render 阶段避免 innerHTML、outerHTML 的 XSS 隐患。

（编辑：PHP编程网 - 湛江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!