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

这里的“并不确定内容要输出到那边”有两层寄义：

1.  用户的输入内容也许同时提供应前端和客户端，而一旦颠末尾 escapeHTML()，客户端表现的内容就酿成了乱码( 5 < 7 )。
2.  在前端中，差异的位置所需的编码也差异。

•   当 5 < 7 作为 HTML 拼接页面时，可以正常表现：     

<div title="comment">5 &lt; 7</div> 

•   当 5 < 7 通过 Ajax 返回，然后赋值给 JavaScript 的变量时，前端获得的字符串就是转义后的字符。这个内容不能直接用于 Vue 等模板的展示，也不能直接用于内容长度计较。不能用于问题、alert 等。

以是，输入侧过滤可以或许在某些环境下办理特定的 XSS 题目，但会引入很大的不确定性和乱码题目。在防御 XSS 进攻时应停止此类要领。

虽然，对付明晰的输入范例，譬喻数字、URL、电话号码、邮件地点等等内容，举办输入过滤照旧须要的。

既然输入过滤并非完端赖得住，我们就要通过“防备赏识器执行恶意代码”来防御 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 隐患。

（编辑：湖南网）

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