在前后端分离的开发模式中，从开发的角色和职能上来讲，一个最明显的变化就是：以往传统中，只负责浏览器环境中开发的前端同学，需要涉猎到服务端层面，编写服务端代码。而摆在面前的一个基础性问题就是如何保障Web安全？
本文就在前后端分离模式的架构下，针对前端在Web开发中，所遇到的安全问题以及应对措施和注意事项，并提出解决方案。
跨站脚本攻击(XSS)的防御
问题及解决思路
跨站脚本攻击（XSS，Cross-site scripting）是最常见和基本的攻击Web网站的方法。攻击者可以在网页上发布包含攻击性代码的数据，当浏览者看到此网页时，特定的脚本就会以浏览者用户的身份和权限来执行。通过XSS可以比较容易地修改用户数据、窃取用户信息以及造成其它类型的攻击，例如：CSRF攻击。
预防XSS攻击的基本方法是：确保任何被输出到HTML页面中的数据以HTML的方式进行转义（HTML escape）。例如下面的模板代码：
代码如下:
这段代码中的$description为模板的变量（不同模板中定义的变量语法不同，这里只是示意一下），由用户提交的数据，那么攻击者可以输入一段包含”JavaScript”的代码，使得上述模板语句的结果变成如下的结果：
代码如下:
上述代码，在浏览器中渲染，将会执行JavaScript代码并在屏幕上alert hello。当然这个代码是无害的，但攻击者完全可以创建一个JavaScript来修改用户资料或者窃取cookie数据。
解决方法很简单，就是将$description的值进行html escape，转义后的输出代码如下
代码如下:
以上经过转义后的HTML代码是没有任何危害的。
Midway的解决方案
转义页面中所有用户输出的数据
对数据进行转义有以下几种情况和方法：
1. 使用模板内部提供的机制进行转义
中途岛内部使用KISSY xtemplate作为模板语言。
在xtemplate实现中，语法上使用两个中括号（ {{val}}）解析模板数据， ，默认既是对数据进行HTML转义的，所以开发者可以这样写模板：
代码如下:
在xtemplate中，如果不希望输出的数据被转义，需要使用三个中括号（{{{val}}}）。
2. 在Midway中明确的调用转义函数
开发者可以在Node.js程序或者模板中，直接调用Midway提供的HTML转义方法，显示的对数据进行转义，如下：
方法1：在Node.js程序中对数据进行HTML转义
代码如下:
var Security= require('midway-security');
//data from server，eg {html:''，other:""}
data.html =Security.escapeHtml(data.html);
xtpl = xtpl.render(data);
方法2：在模板中对HTML数据进行HTML转义
代码如下:
注意：只有当模板内部没有对数据进行转义的时候才使用Security.escapeHtml进行转义。 否则，模板内部和程序会两次转义叠加，导致不符合预期的输出。
推荐：如果使用xtemplate，建议直接使用模板内置的{{}}进行转义； 如果使用其他模板，建议使用Security.escapeHtml进行转义。
过滤页面中用户输出的富文本
你可能会想到：“其实我就是想输出富文本，比如一些留言板、论坛给用户提供一些简单的字体大小、颜色、背景等功能，那么我该如何处理这样的富文本来防止XSS呢？”
1. 使用Midway中Security提供的richText函数
Midway中提供了richText方法，专门用来过滤富文本，防止XSS、钓鱼、cookie窃取等漏洞。
有一个留言板，模板代码可能如下：
代码如下:
{{{message}}}
因为message是用户的输入数据，其留言板的内容，包含了富文本信息，所以这里在xtemplate中，使用了三个大括号，默认不进行HTML转义；那么用户输入的数据假如如下：
代码如下:
后续：在Midway中，Node.js和淘宝的分布式session对接后，可以考虑在Midway这一层自动进行token校验；毕竟安全校验越早进行，成本也会更低。
建议：在Midway中，可以判断是否request中有token的值，如果一个修改操作，没有token，可以直接在Midway层认为是不安全的，将请求丢弃掉。
其他安全问题
关于常见的Web安全问题，还有如下几种，这里只做一些简介，后续会持续继承到Midway framework中。
HTTP Headers安全
CRLF Injection 攻击者想办法在响应头中注入两个CRLF特殊字符，导致响应数据格式异常，从而注入script等
拒绝访问攻击 每个请求因为都会默认带上cookie，而服务器一般都会限制cookie的大小，这就导致了，如果用户客户端cookie被设置成了超过某个阀值，那么用户就再也无法访问网站了
cookie防窃取 一般cookie窃取都是通过JavaScript(XSS漏洞)获取到的，所以尽量将cookie设置成http only，并且加上cookie过期时间
关于cookie的安全问题，之前WebX已经有较好的解决方案；此次Midway不负责cookie的设置和校验等工作，只负责转发到WebX层面进行check
关于Node.js
XSS等注入性漏洞是所有漏洞中最容易被忽略，占互联网总攻击的70%以上；开发者编写Node.js代码时，要时刻提醒自己，永远不要相信用户的输入。
比如如下几个例子。
var mod = fs.readFileSync('path'); 如果path来源于用户输入，那么假设用户输入/etc/password，则会读取到不应该读取的内容，造成密码泄漏风险
var result = eval(jsonVal); 一定要确保jsonVal是json，而不是用户的输入
…… 其他可能包含用户输入的地方，一定要确认用户的输入是我们期望的值
总结
前后端分离模式下，可以让传统的前端开发人员开始编写后端代码，虽然从架构上讲，只负责模板这一层，但也会接触大量的后端代码；所以安全对于前端来说，这是一个不小的挑战。
京公网安备 11010802040832号 | 京ICP备19059560号-6 