前后端分离是如何防止xss_前后端分离的弊端

文章目录：

• 1、XSS攻击的定义，类型以及防御方法？
• 2、解析如何防止XSS跨站脚本攻击
• 3、如何评价淘宝 UED 的 Midway Framework 前后端分离

XSS攻击的定义，类型以及防御方法？

XXS攻击全称跨站脚本攻击，是一种在Web应用中的计算机安全漏洞，它允许恶意Web用户将代码植入到提供给其他使用的页面中。

XSS攻击有哪几种类型?下面就由锐速云的小编为大家介绍一下

经常见到XSS攻击有三种：反射XSS攻击、DOM-based型XSS攻击以及储存型XSS攻击。

[if !supportLists]1、[endif]反射型XSS攻击

反射性XSS一般是攻击者通过特定手法(如电子邮件)，诱使用户去访问一个包含恶意代码的URL，当受害者点击这些专门设计链接的时候，恶意代码会直接在受害主机上的浏览器上执行，反射型XSS通常出现在网站搜索栏，用户登入口等地方，常用来窃取客户端或进行钓鱼欺骗。

[if !supportLists]2、[endif]存储型XSS攻击

存储型XSS攻击也叫持久型XSS，主要将XSS代码提交储存在服务器端(数据库，内存，文件系统等)下次请求目标页面时不用在提交XSS代码。当目标用户访问该页面获取数据时，XSS代码会从服务器解析之后加载出来，返回到浏览器做正常的HTML和JS解析执行，XSS攻击就发生了。储存型XSS一般出现在网站留言，评论，博客日志等交互处，恶意脚本储存到客户端或者服务端的数据库中。

[if !supportLists]3、[endif]DOM-based型XSS攻击

DOM-based型XSS攻击它是基于DOM的XSS攻击是指通过恶意脚本修改页面的DOM结构，是纯粹发生在客户端的攻击。DOM型XSS攻击中，取出和执行恶意代码由浏览器端完成，属于前端JavaScript自身的安全漏洞。

如何防御XSS攻击?

[if !supportLists]1、[endif]对输入内容的特定字符进行编码，列如表示html标记等符号。

[if !supportLists]2、[endif]对重要的cookie设置httpOnly，防止客户端通过document。cookie读取cookie，此HTTP开头由服务端设置。

[if !supportLists]3、[endif]将不可信的输出URT参数之前，进行URLEncode操作，而对于从URL参数中获取值一定要进行格式检查

[if !supportLists]4、[endif]不要使用Eval来解析并运行不确定的数据或代码，对于JSON解析请使用JSON。Parse()方法

[if !supportLists]5、[endif]后端接口也应该要做到关键字符过滤的问题。

解析如何防止XSS跨站脚本攻击

不可信数据 不可信数据通常是来自HTTP请求的数据，以URL参数、表单字段、标头或者Cookie的形式。不过从安全角度来看，来自数据库、网络服务器和其他来源的数据往往也是不可信的，也就是说，这些数据可能没有完全通过验证。 应该始终对不可信数据保持警惕，将其视为包含攻击，这意味着在发送不可信数据之前，应该采取措施确定没有攻击再发送。由于应用程序之间的关联不断深化，下游直译程序执行的攻击可以迅速蔓延。 传统上来看，输入验证是处理不可信数据的最好办法，然而，输入验证法并不是注入式攻击的最佳解决方案。首先，输入验证通常是在获取数据时开始执行的，而此时并不知道目的地所在。这也意味着我们并不知道在目标直译程序中哪些字符是重要的。其次，可能更加重要的是，应用程序必须允许潜在危害的字符进入，例如，是不是仅仅因为SQL认为Mr. O'Malley名字包含特殊字符他就不能在数据库中注册呢? 虽然输入验证很重要，但这始终不是解决注入攻击的完整解决方案，最好将输入攻击作为纵深防御措施，而将escaping作为首要防线。 解码(又称为Output Encoding) “Escaping”解码技术主要用于确保字符作为数据处理，而不是作为与直译程序的解析器相关的字符。有很多不同类型的解码，有时候也被成为输出“解码”。有些技术定义特殊的“escape”字符，而其他技术则包含涉及若干字符的更复杂的语法。 不要将输出解码与Unicode字符编码的概念弄混淆了，后者涉及映射Unicode字符到位序列。这种级别的编码通常是自动解码，并不能缓解攻击。但是，如果没有正确理解服务器和浏览器间的目标字符集，有可能导致与非目标字符产生通信，从而招致跨站XSS脚本攻击。这也正是为所有通信指定Unicode字符编码(字符集)(如UTF-8等)的重要所在。 Escaping是重要的工具，能够确保不可信数据不能被用来传递注入攻击。这样做并不会对解码数据造成影响，仍将正确呈现在浏览器中，解码只能阻止运行中发生的攻击。 注入攻击理论 注入攻击是这样一种攻击方式，它主要涉及破坏数据结构并通过使用特殊字符(直译程序正在使用的重要数据)转换为代码结构。XSS是一种注入攻击形式，浏览器作为直译程序，攻击被隐藏在HTML文件中。HTML一直都是代码和数据最差的mashup，因为HTML有很多可能的地方放置代码以及很多不同的有效编码。HTML是很复杂的，因为它不仅是层次结构的，而且还包含很多不同的解析器(XML、HTML、JavaScript、VBScript、CSS、URL等)。 要想真正明白注入攻击与XSS的关系，必须认真考虑HTML DOM的层次结构中的注入攻击。在HTML文件的某个位置(即开发者允许不可信数据列入DOM的位置)插入数据，主要有两种注入代码的方式： Injecting UP，上行注入 最常见的方式是关闭现有的context并开始一个新的代码context，例如，当你关闭HTML属性时使用"并开始新的 可以终止脚本块，即使该脚本块被注入脚本内方法调用内的引用字符，这是因为HTML解析器在JavaScript解析器之前运行。 Injecting DOWN，下行注入 另一种不太常见的执行XSS注入的方式就是，在不关闭当前context的情况下，引入一个subcontext。例如，将改为 ，并不需要躲开HTML属性context，相反只需要引入允许在src属性内写脚本的context即可。另一个例子就是CSS属性中的expression()功能，虽然你可能无法躲开引用CSS属性来进行上行注入，你可以采用x ss:expression(document.write(document.cookie))且无需离开现有context。 同样也有可能直接在现有context内进行注入，例如，可以采用不可信的输入并把它直接放入JavaScript context。这种方式比你想象的更加常用，但是根本不可能利用escaping(或者任何其他方式)保障安全。从本质上讲，如果这样做，你的应用程序只会成为攻击者将恶意代码植入浏览器的渠道。 本文介绍的规则旨在防止上行和下行XSS注入攻击。防止上行注入攻击，你必须避免那些允许你关闭现有context开始新context的字符;而防止攻击跳跃DOM层次级别，你必须避免所有可能关闭context的字符;下行注入攻击，你必须避免任何可以用来在现有context内引入新的sub-context的字符。 积极XSS防御模式 本文把HTML页面当作一个模板，模板上有很多插槽，开发者允许在这些插槽处放置不可信数据。在其他地方放置不可信数据是不允许的，这是“白名单”模式，否认所有不允许的事情。 根据浏览器解析HTML的方式的不同，每种不同类型的插槽都有不同的安全规则。当你在这些插槽处放置不可信数据时，必须采取某些措施以确保数据不会“逃离”相应插槽并闯入允许代码执行的context。从某种意义上说，这种方法将HTML文档当作参数化的数据库查询，数据被保存在具体文职并与escaping代码context相分离。 本文列出了最常见的插槽位置和安全放置数据的规则，基于各种不同的要求、已知的XSS载体和对流行浏览器的大量手动测试，我们保证本文提出的规则都是安全的。 定义好插槽位置，开发者们在放置任何数据前，都应该仔细分析以确保安全性。浏览器解析是非常棘手的，因为很多看起来无关紧要的字符可能起着重要作用。 为什么不能对所有不可信数据进行HTML实体编码? 可以对放入HTML文档正文的不可行数据进行HTML实体编码，如 标签内。也可以对进入属性的不可行数据进行实体编码，尤其是当属性中使用引用符号时。但是HTML实体编码并不总是有效，例如将不可信数据放入 directlyinascript insideanHTMLcomment inanattributename ...NEVERPUTUNTRUSTEDDATAHERE...href="/test"/ inatagname 更重要的是，不要接受来自不可信任来源的JavaScript代码然后运行，例如，名为“callback”的参数就包含JavaScript代码段，没有解码能够解决。 No.2 – 在向HTML元素内容插入不可信数据前对HTML解码 这条规则适用于当你想把不可信数据直接插入HTML正文某处时，这包括内部正常标签(div、p、b、td等)。大多数网站框架都有HTML解码的方法且能够躲开下列字符。但是，这对于其他HTML context是远远不够的，你需要部署其他规则。 ...ESCAPEUNTRUSTEDDATABEFOREPUTTINGHERE... ...ESCAPEUNTRUSTEDDATABEFOREPUTTINGHERE... 以及其他的HTML常用元素 使用HTML实体解码躲开下列字符以避免切换到任何执行内容，如脚本、样式或者事件处理程序。在这种规格中推荐使用十六进制实体，除了XML中5个重要字符(、、 、 "、 ')外，还加入了斜线符，以帮助结束HTML实体。 -- -- -- "--" '--''isnotrecommended /--/forwardslashisincludedasithelpsendanHTMLentity ESAPI参考实施 Stringsafe=ESAPI.encoder().encodeForHTML(request.getParameter("input")); No.3 – 在向HTML常见属性插入不可信数据前进行属性解码 这条规则是将不可信数据转化为典型属性值(如宽度、名称、值等)，这不能用于复杂属性(如href、src、style或者其他事件处理程序)。这是及其重要的规则，事件处理器属性(为HTML JavaScript Data Values)必须遵守该规则。 contentinsideUNquotedattribute content insidesinglequotedattribute 除了字母数字字符外，使用小于256的ASCII值HH格式(或者命名的实体)对所有数据进行解码以防止切换属性。这条规则应用广泛的原因是因为开发者常常让属性保持未引用，正确引用的属性只能使用相应的引用进行解码。未引用属性可以被很多字符破坏，包括[space] % * + , - / ; = ^ 和 |。 ESAPI参考实施 String safe = ESAPI.encoder().encodeForHTMLAttribute( request.getParameter( "input" ) ); No.4 – 在向HTML JavaScript Data Values插入不可信数据前，进行JavaScript解码 这条规则涉及在不同HTML元素上制定的JavaScript事件处理器。向这些事件处理器放置不可信数据的唯一安全位置就是“data value”。在这些小代码块放置不可信数据是相当危险的，因为很容易切换到执行环境，因此请小心使用。 insideaquotedstring onesideofanexpression insideUNquotedeventhandler insidequotedeventhandler insidequotedeventhandler 除了字母数字字符外，使用小于256的ASCII值xHH格式 对所有数据进行解码以防止将数据值切换至脚本内容或者另一属性。不要使用任何解码捷径(如" )因为引用字符可能被先运行的HTML属性解析器相匹配。如果事件处理器被引用，则需要相应的引用来解码。这条规则的广泛应用是因为开发者经常让事件处理器保持未引用。正确引用属性只能使用相应的引用来解码，未引用属性可以使用任何字符(包括[space] % * + , - / ; = ^ 和|)解码。同时，由于HTML解析器比JavaScript解析器先运行，关闭标签能够关闭脚本块，即使脚本块位于引用字符串中。 ESAPI参考实施 Stringsafe=ESAPI.encoder().encodeForJavaScript(request.getParameter("input")); No.5 – 在向HTML 样式属性值插入不可信数居前，进行CSS解码 当你想将不可信数据放入样式表或者样式标签时，可以用此规则。CSS是很强大的，可以用于许多攻击。因此，只能在属性值中使用不可信数据而不能在其他样式数据中使用。不能将不可信数据放入复杂的属性(如url,、behavior、和custom (-moz-binding))。同样，不能将不可信数据放入允许JavaScript的IE的expression属性值。 propertyvalue textpropertyvalue 除了字母数字字符外，使用小于256的ASCII值HH格式对所有数据进行解码。不要使用任何解码捷径(如" )因为引用字符可能被先运行的HTML属性解析器相匹配，防止将数据值切换至脚本内容或者另一属性。同时防止切换至expression或者其他允许脚本的属性值。如果属性被引用，将需要相应的引用进行解码，所有的属性都应该被引用。未引用属性可以使用任何字符(包括[space] % * + , - / ; = ^ 和|)解码。同时，由于HTML解析器比JavaScript解析器先运行，标签能够关闭脚本块，即使脚本块位于引用字符串中。 ESAPI参考实施 Stringsafe=ESAPI.encoder().encodeForCSS(request.getParameter("input")); No.6- 在向HTML URL属性插入不可信数据前，进行URL解码 当你想将不可信数据放入链接到其他位置的link中时需要运用此规则。这包括href和src属性。还有很多其他位置属性，不过我们建议不要在这些属性中使用不可信数据。需要注意的是在javascript中使用不可信数据的问题，不过可以使用上述的HTML JavaScript Data Value规则。 linkanormallink animagesource ascriptsource 除了字母数字字符外，使用小于256的ASCII值%HH 解码格式对所有数据进行解码。在数据中保护不可信数据：URL不能够被允许，因为没有好方法来通过解码来切换URL以避免攻击。所有的属性都应该被引用。未引用属性可以使用任何字符(包括[space] % * + , - / ; = ^ 和|)解码。 请注意实体编码在这方面是没用的。

如何评价淘宝 UED 的 Midway Framework 前后端分离

【贺师俊的回答(17票)】:

泻药。

1. 这系列文章写得很好。

【注意，熟悉我的同志应该知道，我极少给出“很好”的评价。】

2. 这系列文章以及其背后的实践重新树立了淘宝系前端工程水准的领先地位。

【在此之前的一段时间内，至少从外部来看，淘宝已经落后于狼系和企鹅系了。】

3. 这系列文章及其背后的实践也证明了nodejs对于前端来说不仅在工具链而且在架构层面的意义。

【注意，这系列文章中的思路其实并不新鲜，但是在淘宝这样规模而且业已非常成熟的产品中实施这样的转变，我认为是具有标志意义的。】

4. 具体细节上仍有许多改善空间，如此系列的第4篇《前后端分离的思考与实践（四）》在防御XSS时还是存在一些传统问题。这方面在参加杭JS的时候，我跟淘宝的herman同学有过沟通，具体就不在本问题展开了。因为这是局部问题，对整体架构影响不大。

5. 注意，以上评价的都是架构，或者说是思路。实施效果是不是好，我相信他们自己的说法。但Midway框架本身因为没有看到具体文档和代码，而且其开发的目的首要是满足淘宝的需求，因此其本身或其具体组件是否在普遍意义上适用和优秀，无法作出判断。

【徐飞的回答(19票)】:

早上看到贺老出马，也忍不住写了一篇来谈一下苏宁这样的公司对这方面的考虑。

近两年来，我一直在思考如何改进前端体系的开发模式，这里面最基础的一点就是前后端的分离。谈到前后端分离，也有一个误区，认为仅仅是以浏览器作分界，把这两部分的代码分离出来。但其实是，做这件事情的本意，是要解决开发模式的问题，也就是要分离前后端开发人员的职责。

针对不同类型的Web产品，这个分离方式是有所不同的。对于Web应用，因为它跟服务端的交互基本就是AJAX或者WebSocket接口，所以这个分离是天然的，整个前端基本都是静态HTML模板，JavaScript模块，以及CSS和相关静态资源，但是对于网购产品这样的形态，它的做法就不一样。

## 展示占主要部分的产品

网购产品的展示需求很重要，图片等资源载入非常多，但相对的操作却很少，基本只有搜索商品，加购物车，结算这样的环节。传统这样的产品，多半是这么个工作流程：

交互出高保真图，前端去切图，生成静态HTML加展示效果，然后，注意，他不是自己接着往下做，而是交给另外一群开发人员，把它转换成服务端模板，比如freemarker或者velocity之类，或者是smarty，为什么要这么做呢？因为这类产品讲究一个首屏优化，是首屏而不是首页，这就意味着对于首屏来说，经过的环节应当尽可能少，比如说，就不能先载入客户端模板，再AJAX一个数据，然后去渲染一下。这么做的性能肯定是不如服务端把HTML生成好，然后一次请求加载的。

这个过程肯定是有一些问题的，比如说，如果开发人员B在套模板的过程中，发现原先的静态HTML部分有问题，应该怎么办？大家知道，一个对HTML和CSS都很熟悉，同时又可以写业务逻辑的前端开发人员是很稀缺的，所以，多数情况下，这两边的技能是不同的，如果是简单的页面问题，这个开发人员可能自己也就解决了，如果他解决不了，怎么办？

如果B自己不改，把他已经搞成服务端模板的代码返回给前端人员A，A也没法下手，因为已经是服务端模板，A手里没有环境，改了之后不知道对不对，不能预览。那么，B把问题告诉A，A修改他的原始版本，然后再拿给B又怎样呢？这时候B又麻烦了，他要对比两次修改的部分，把自己前一阵的修改合并进去。

所以，不管怎么搞，这里面都很折腾。

Midway这个产品，他想要解决什么问题呢？既然说前端人员没法预览模板的原因是，后端在使用服务端模板，那么，我能不能找一种两边都可用的模板，你能在服务端渲染，我也能在客户端预览？服务端跟浏览器端同时都能运行的语言是什么？只有JavaScript。

所以，大家就往nodejs里面去发掘了，一个普通的JavaScript模板库，它在浏览器端也可以渲染，在nodejs端也可以输出成HTML，这时候，那些原来负责整合模板和逻辑的人员改用nodejs，是不是就解决这问题了？

想象一下这个场景多么美好：前端来决定某个模板是服务端渲染还是客户端渲染，当首屏的时候，就在nodejs里面生成HTML，不是首屏的时候，就AJAX过来在浏览器端渲染展示。

从技术方案上看，这么做很好了，工程上又带来另外一些问题，那就是对熟练JavaScript开发人员的需求量大增。对阿里这样的公司来说，前端有大几百人，别的公司只能仰望，所以他当然可以放手一搞，但对我们苏宁这样，前端人数不大的，就麻烦了。如果我们也引入这样的方案，就面临把很大一部分Java开发人员转化成JavaScript开发人员这么一个问题，这个事情短期内肯定是无法解决的，所以反过来会增加前端这边的压力。所以暂时还用不了阿里这样的方案，只能努力先提高人员水平再看情况。

服务端引入nodejs还有别的优势，比如说请求合并等等，这个也可以用其他方式变通解决，比如加一个专门的跟现有后端同构的Web服务器，在那边干这些事。

## 展示和业务逻辑较均衡的产品

对于另外一些场景，也有类似的问题，比如支付产品，展示相对没那么重，但是又算不上Web应用，它面临另外一种情况的前后端分离。这种场景下，前端的出静态HTML和DOM操作类的JavaScript，业务开发人员负责写后端，还有另外一部分业务逻辑的JS。

这里的问题是什么呢？是jQuery式代码造成的协作问题。比如说：

$(".okBtn").click(function() { $.ajax(url, data) .success(function(result) { $("someArea").html(_.template("tpl", result)); });});

因为前端人员的稀缺，所以他不可能帮你把业务逻辑写出来，所以说，这里面$.ajax往里的部分，要业务人员自己写。然后，数据得到之后，又要去处理界面部分。

很多场景下，处理界面远不是这么搞个模板放上去就完事的，所以业务开发人员感到很烦闷，为了这么一点小问题，反复去找前端的人来搞，很麻烦，自己搞又特别花时间，所以都很苦闷。

这同样是一种前后端的分离，只是这个分界线不在浏览器，而在于：是否写业务逻辑。对付这种场景，解决办法就是加强JavaScript代码的规划。现在流行那么多在前端做MV*的框架，不考虑Angular这类太重量级的，来看看Backbone这样的，它到底解决了什么问题？

很多人说，Backbone虽然小，但根本不解决问题。这句话有一定道理，但前提条件是你自己的JavaScript代码分层已经做得很好了。如果做得不好，它就可以协助你解决分层的问题。

刚才那段代码，它的问题在哪里呢，在于职责不清晰。一个函数只能做一件事，这是共识，但由于回调等方式，所以不经意就破坏了函数的单一性、完整性。我们试试来拆开它。

对于一个后端开发人员来说，他为什么常常害怕写前端代码？是因为JavaScript语言吗？其实不是，我们用来写业务逻辑的时候，只会使用JavaScript一个很小的子集，对于这个子集来说，它并不存在多大的学习困难，最麻烦的地方在于DOM、BOM等东西，对于一个后端开发人员来说，如果要求他在掌握服务端代码编写的同时，还要去学这些，那真是有些不容易，所以，我们来给他省点事。

现在我们的出发点是，把这段代码拆给两个不同的人写，一个人操作DOM，另外一个人只写逻辑，绝对不操作DOM。前面这个代码拆给前端维护，后面这个拆给业务开发人员。

最老圡的方式：

a.js

$(".okBtn").click(function() { b1(data);});function a1(result) { $("someArea").html(_.template("tpl", result));}

b.js

function b1(data) { $.ajax(url, data) .success(a1);}

现在大家是不是相安无事了？

如果这么做的话，AB双方要做很多约定，也就是说，这个过程仍然是一个螺旋链。比如说，A先写点击事件的绑定，然后想起来这里要调用一个请求，就去找B写b1方法。B在写b1的时候，又想到他要调用一个界面展示方法a1，然后又来找A写，来回也挺折腾。

况且，有这么一天，A在另外一个地方也想调用b1了，但是由于b1的回调已经写死了，比较蠢的办法就是在a1里面再判断，这是什么东西点击造成的，然后分别调用不同的回调。如果情况复杂，那这个代码写出来真是没法看。

如下：

a.js

var type = 0;$(".okBtn").click(function() { type = 1; b1(data);});$(".okBtn1").click(function() { type = 2; b1(data);});function a1(result) { if (type1) { $("someArea").html(_.template("tpl", result)); } else if (type2) { // ... } type = 0;}

b.js

function b1(data) { $.ajax(url, data) .success(a1);}

稍微好一些的办法是，在b1中，直接返回这个请求的promise，这样可以由调用方决定到底该干什么。

如下：

a.js

$(".okBtn").click(function() { b1(data).success(function(result) { $("someArea").html(_.template("tpl", result)); });});$(".okBtn1").click(function() { b1(data).success(function(result) { // ... });});

b.js

function b1(data) { return $.ajax(url, data);}

如果要对返回数据作统一处理，也可以很容易地在b1中，用promise重新封装了返回出来，只不过这样在a.js里面，直接调用的就不是success，而是then了。

注意到这样的代码还有问题，比如说大量的全局函数，不模块化，容易冲突。此外，没有一个地方可以缓存一些共享数据，比如说这么一个场景：

界面上两个块M和N，其中，M初始载入并加载数据，N在初始的时候不载入，而是在某个按钮点击的时候载入，而M和N中各有一个列表，数据来源于同一个服务端请求。

现在就有个问题，当N载入的时候，它的数据怎么来？比较老土的方式，肯定是载入N的时候，同时也再去请求一下数据，然后渲染到N上。

从一个角度看，如果说不重新请求，N的这个数据应当从哪里来？从另外一个角度看，如果重新请求了，发现数据跟之前的产生了变更，是否要同步给M，怎么同步给它？

我们看看类似Backbone这样的框架，它能提供怎样的机制呢？或者如果我们不用它，怎么自己把这个分层封装得更好一些？

首先，是建立一个数据模型，在它上面添加数据的缓存：

define("model", [], function() { var Model = { data: null, queryData : function(param, fromCache) { var defer = q.defer(); if (fromCache || this.data) { defer.resolve(this.data); } else { var self = this; this.ajax(url, param).success(function(result){ self.data = result; defer.resolve(result); }); } return defer.promise; } }; return Model;});

这么一来，我们在模型上作了数据的缓存，如果调用的时候加fromCache参数，就从缓存读取，否则就请求新的。为了在两种情况下，调用方接口能保持一致，把整个函数封装成promise，以便接着调用。这里的模型定义成单例了，假定是全局唯一的，可以根据需要调整成可实例化的。

这个时候，视图层就要封装DOM和事件的关联关系：

define("view", ["model"], function(Model) { function View(element) { this.element = element; this.element.selector(".okBtn").click(function() { var self = this; var fromCache = true; Model.queryData({}, false).then(function(result) { self.renderData(result); }); }); } View.prototype = { renderData: function(data) { this.element.selector("someArea").html(_.template("tpl", result)); } };});

这个时候，多个视图实例的情况下，数据也能够较好地利用。

这样，前端写这个View，后端写Model，可以作这么个分工。

这个只是很简陋的方式，在复杂场景下还有很多不足，在这里先不展开了。更复杂的场景也就是类似Web应用那种方式，稍后专门写一篇来展开。

## 小结

我们再来回顾前后端分离所要解决的问题，是分离前端和业务开发人员的职责，这个方案怎么定，是应当随着团队状况来确定的。比如阿里前端厉害，人多势众，他的前端就要往后推，去占领中间层。我们苏宁这样的公司，前端比较薄弱，只能在很多场景下，让出中间层，否则战线铺太广只能处处被动。

同一个中途岛，在不同的形势下，占还是不占，是很考验前端架构师的一个问题。

对阿里的这种实践，我们会持续围观，寻找并创造合适的出手时机。

【rank的回答(4票)】:

简单说下自己的看法。

前端不再继续「单纯」在 kissy 上下功夫，而可以考虑向后的延伸架构是一种前端的进步，这种前端架构将重定义阿里的前端工程师工作，很多互联网公司比阿里先行一步。

这个思路与与最早阿里很多前端没有碰后端（例如模板）有很大的关系，用 NodeJS 作中间层能解决现面临的问题，是一种不限于解决当前问题的长远解决方案。

具体是否能解决和解决得好，在于细节，不在新，而在过渡。如，如何过渡目前 NodeJS 与原来的数据交互，如何灰度过渡，工作量等。

平台化与接口化思路（后端数据接口以 Services 存在）让 amazon 收益非浅，现在后端平台化接口化在大公司趋势明显。

平台化需要更多更快的应用层开发选型，NodeJS 是不错的一种。NodeJS 虽然还是有些问题，但从信息面与我们自己的应用经验来看，已有慢慢成为后端 WebApplication 的一种很好的选型方案的趋势。

总的来说，是个趋势。

【Hex的回答(1票)】:

我认为这就是所谓的大前端开发模式。模式确实是好模式，但是真正实践起来，和后端工程师的沟通和协调也会遇到很多问题。

我做过的几个项目都是采用这种大前端的开发模式，前端基于Transformers框架+CodeIgniter组成大前端，这样确实可以很好的隔离前后端，项目可维护性大大提高。

【邓欣欣的回答(1票)】:

上周去杭州玩了下，和之前的阿里同事做了些技术交流，发现这一年，阿里的前端在流程改进上下了很大功夫； 题主所说的中途岛应该是 UDC 团队做的，应该说思路不是很新鲜，国外有 ebay 向 nodejs 的转型案例，国内之前也有百度音乐移动端的案例;

但对阿里前端来说，意义确是很重大，解决了合作流程中的一个很大问题：之前阿里的前端是只写静态 demo，写完给开发套模板，开发不太懂 html，漏写个标签，然后找前端调试，一来一去很折腾，是个必须干但又是个没啥技术含量的事； 中途岛可以很好的解决这类蛋疼事，但是请不要认为前端就因此会后端了，无非是之前浏览器用 ajax 请求接口，现在咱用 node http去请求呗，框架做得牛逼点，统一适配出前端的ajax 接口也不是不可能呀~~，想想嘛，为啥要用 node 呢？ 牛逼直接写 java 啊。。哈哈哈~

其他的 F2E 团队也做些很不错的流程改进工具，同样不是很新鲜，但对阿里前端都是比较有意义的工具：

def： 项目构建与发布工具，与阿里的 gitlab， scm 整合，各种 脚手架，build，combo，发布，一条命令搞定，确实很方便；

dip：数据接口平台，定义业务线前后端数据格式的一个内部公共平台，基于 json-schema，好像也可以给你提供 mock 接口；

uitest：前端持续集成平台；之前这东西我是边做边吐槽的，似乎刚上线，类似 jenkis 这些，提交或者发布代码时，先帮你跑一次测试用例；目前通用测试库比较少。

Trace：好像是叫这个名字吧，监控平台，这个比较早就有了，用来监控各个业务线页面的运行状况并搜集各种用户数据，如分辨率，UA

我看来 def 和 dip 对阿里前端的作用会更大些，uitest 估计作用一般，阿里前端是不注重代码质量的，测试用例也仅在几个重要的直接影响交易的业务线会写。

【许文敏的回答(0票)】:

确实不错，从职责上来区分前后端分离才是王道，nodejs将成为前端工程师的基础技能

【猎人豆豆的回答(0票)】:

不要把简单的问题搞复杂，对于淘宝这样规模的公司，有些牵一发而动全身的改动，最好是在权衡风险和收益后再决定，我们是技术的使用者，而不要被技术牵着鼻子走.

【罗正烨的回答(2票)】:

前面前端的大牛们都说了，我换个角度聊聊。

这么讲吧，阿里的前端为什么比其它公司走的远，是因为他们有很多前端，还有很多不用写大量业务逻辑的前端大牛。大牛的作用，就是折腾。阿里的前端工程师水平在自身领域实践上已经跟得上后端。

但这个架构所谓的分离，其实是把很多原来前端不需要做的事揽到了自己的手上，增加前端架构师的KPI，让前端做了更多的事，周报好写。因为nodejs和前端都是js，所以学习成本并不算高，但是对一个技术人员的要求是比原来更高了。

但是，他们团队有很多HC，有很多钱。。所以像我这种一个产品线只有一二个前端的，要是这么玩儿，招人跟不上不说，然后还可以把自己累死。

所以技术选型和架构这种事，还是要根据自己团队的能力和招人啊。