(四)前后端分离模式下的安全解决方案.pdfVIP

（四）前后端分离模式下的安全解决⽅案 原⽂：http://ued .taobao .org/blog/20 14/05/midway-security/ 作者：lorrylockie 前⾔ 在前后端分离的开发模式中，从开发的⾓⾊和职能上来讲，⼀个最明 的变化就是：以往传统中，只负责浏览器环境中开发的前端同学，需要 涉猎到服务端层⾯，编写服务端代码。⽽摆在⾯前的⼀个基础性问题就 是如何保障Web安全？ 本⽂就在前后端分离模式的架构下，针对前端在Web开发中，所遇到的安全问题以及 应对措施和注意事项，并提出解决⽅案。 跨站脚本攻击(XSS) 的防御 问题及解决思 跨站脚本攻击 （XSS ， ross-site scripting ）是最常见和基本的攻击Web ⽹站的⽅法。 攻击者可以在⽹页上发布包含攻击性代码的数据，当浏览者看到此⽹页时，特定的脚 本就会以浏览者⽤户的⾝份和权限来执⾏。通过XSS可以⽐较容易地修改⽤户数据、 窃取⽤户信息以及造成其它类型的攻击，例如： SRF攻击。 预防XSS攻击的基本⽅法是：确保任何被输出到HTML页⾯中的数据以HTML 的⽅式 进⾏转义 （HTML escape ）。例如下⾯的模板代码： textarea name=description$description/textarea 这段代码中的$description为模板的变量 （不同模板中定义的变量语法不同，这⾥ 只是⽰意⼀下），由⽤户提交的数据，那么攻击者可以输⼊⼀段包含”JavaScript”的代 码，使得上述模板语句的结果变成如下的结果： textarea name=description /textareascriptalert(hello)/script /textarea 上述代码，在浏览器中渲染，将会执⾏JavaScript代码并在屏幕上alert hello 。当然这个 代码是⽆害的，但攻击者完全可以创建⼀个JavaScript来修改⽤户资料或者窃取cookie 数据。 解决⽅法很简单，就是将$description的值进⾏html escape ，转义后的输出代码如 下 textarea name=description lt;/textareagt;lt;scriptgt;alert(quot;hello!quot;)lt;/scrip /textarea 以上经过转义后的HTML代码是没有任何危害的。 Midway 的解决⽅案 转义页⾯中所有⽤户输出的数据 对数据进⾏转义有以下⼏种情况和⽅法： 1. 使⽤模板内部提供的机制进⾏转义 中途岛内部使⽤KISSY xtemplate作为模板语⾔。 在xtemplate实现中，语法上使⽤两个中括号 （ val}}）解析模板数据， ，默认既 是对数据进⾏HTML转义的，所以开发者可以这样写模板： textarea name=description description}}/textarea 在xtemplate 中，如果不希望输出的数据被转义，需要使⽤三个中括号 （{{{val}}}）。 2. 在Midway中明确的调⽤转义函数 开发者可以在Node .j s程序或者模板中，直接调⽤Midway提供的HTML转义⽅法， ⽰ 的对数据进⾏转义，如下： ⽅法1 ：在Node .j s程序中对数据进⾏HTML转义 var Security= require(midway-security ); //data from server，eg html:/textarea，other:} data.html =Security .escapeHtml(data.html); xtpl = xtpl.render(data); ⽅法2 ：在模板中对HTML数据进⾏HTML转义 textarea name=descriptionSecurity .escapeHtml( description}}} 注意：只有当模板内部没有对数据进⾏转义的时候才使⽤Security .escapeHtml进⾏转 义。 否则，模板内部和程序会两次转义叠加，导致不符合预期的输出。 推荐：如果使⽤xtemplate ，建议直接使⽤模板内置的 }}进⾏转义； 如果使⽤其他 模板，建议使⽤Security .escapeHtml进⾏转义。 过滤页⾯中⽤户输出的富⽂本 你可能会想到：“其实我就是想输出富⽂本，⽐如⼀些留⾔板、论坛给⽤户提供⼀些 简单