JavaScript 常见安全漏洞和自动化检测技术
字体：[ ] 类型：转载 时间：
js安全漏洞目前存在较大的技术难题，本文结合案例给大家详解JavaScript 常见安全漏洞和自动化检测技术，需要的朋友可以参考下
随着 Web2.0 的发展以及 Ajax 框架的普及，富客户端 Web 应用（Rich Internet Applications，RIA）日益增多，越来越多的逻辑已经开始从服务器端转移至客户端，这些逻辑通常都是使用 JavaScript 语言所编写。但遗憾的是，目前开发人员普遍不太关注 JavaScript 代码的安全性。据 IBM X-Force 2011 年中期趋势报告揭示，世界五百强的网站及常见知名网站中有 40% 存在 JavaScript 安全漏洞。本文将结合代码向读者展示常见 JavaScript 安全漏洞，旨在帮助读者能够在日常编码工作中规避这些安全漏洞。此外，客户端 JavaScript 安全漏洞与服务器端安全漏洞原理略为不同，自动化检测 JavsScript 安全漏洞目前存在较大的技术难题，本文将结合案例跟读者分享如何利用 IBM Rational AppScan Standard Edition V8.0 新特性（JavaScript Security Analyzer，JSA）技术自动化检测 JavaScript 安全漏洞。
JavaScript 常见安全漏洞
2010 年 12 月份，IBM 发布了关于 Web 应用中客户端 JavaScript 安全漏洞的白皮书，其中介绍了 IBM 安全研究机构曾做过的 JavaScript 安全状况调查。样本数据包括了 675 家网站，其中有财富 500 强公司的网站和另外 175 家著名网站，包括 IT 公司、Web 应用安全服务公司、社交网站等。为了不影响这些网站的正常运行，研究人员使用了非侵入式爬虫，仅扫描了无需登录即可访问的部分页面，每个站点不超过 200 个页面。这些页面都被保存下来，研究人员采用 IBM 的 JavaScript 安全分析技术离线分析了这些页面，集中分析了基于 DOM 的跨站点脚本编制及重定向两种漏洞。
测试结果令人惊叹，这些知名网站中有 14% 存在严峻的 JavaScript 安全问题，黑客可以利用这些漏洞进行植入流氓软件，植入钓鱼站点，以及劫持用户会话等。更令人惊叹不已的是，随着 IBM 的 JavaScript 安全分析技术的成熟发展，2011 年中期 X-Force 报告显示，IBM 重新测试了上述这些知名网站并发现了更多的安全漏洞，大约有 40% 的网站存在 JavaScript 安全漏洞。
java企业级通用权限安全框架源码 SpringMVC mybatis or hibernate+ehcache shiro druid bootstrap HTML5
下文本文将结合代码向读者展示常见这些 JavaScript 安全漏洞，以便读者在实际编码过程中注意到这些安全问题，及早规避这些风险。
基于 DOM 的跨站点脚本编制
我们都听说过 XSS（Cross Site Script，跨站点脚本编制，也称为跨站脚本攻击），指的是攻击者向合法的 Web 页面中插入恶意脚本代码（通常是 HTML 代码和 JavaScript 代码）然后提交请求给服务器，随即服务器响应页面即被植入了攻击者的恶意脚本代码，攻击者可以利用这些恶意脚本代码进行会话劫持等攻击。跨站点脚本编制通常分为反射型和持久型：当请求数据在服务器响应页面中呈现为未编码和未过滤时，即为反射型跨站点脚本编制；持久型指的是包含恶意代码的请求数据被保存在 Web 应用的服务器上，每次用户访问某个页面的时候，恶意代码都会被自动执行，这种攻击对于 Web2.0 类型的社交网站来说尤为常见，威胁也更大。应对跨站点脚本编制的主要方法有两点：一是不要信任用户的任何输入，尽量采用白名单技术来验证输入参数；二是输出的时候对用户提供的内容进行转义处理。
但鲜为人知的是还有第三种跨站点脚本编制漏洞。2005 年 Amit Klein 发表了白皮书《基于 DOM 的跨站点脚本编制—第三类跨站点脚本编制形式》（"DOM Based Cross Site Scripting or XSS of the Third Kind"），它揭示了基于 DOM 的跨站点脚本编制不需要依赖于服务器端响应的内容，如果某些 HTML 页面使用了 document.location、document.URL 或者 document.referer 等 DOM 元素的属性，攻击者可以利用这些属性植入恶意脚本实施基于 DOM 的跨站点脚本编制攻击。
下面我们将通过一个很简单的 HTML 页面来演示基于 DOM 的跨站点脚本编制原理。假设有这么一个静态 HTML 页面（如清单 1 所示），用来展示欢迎用户成功登录的信息。
清单 1. 存在 DOM based XSS 的 HTML 代码
&TITLE&Welcome!&/TITLE&
var pos=document.URL.indexOf("name=")+5;
document.write(document.URL.substring(pos,document.URL.length));
Welcome to our system
按照该页面 JavaScript 代码逻辑，它会接受 URL 中传入的 name 参数并展示欢迎信息，如清单 2 所示：
清单 2. 正常情况下的访问 URL
但如果恶意攻击者输入类似如下的脚本，见清单 3，该页面则会执行被注入的 JavaScript 脚本。
清单 3. 访问 URL 中注入脚本
很明显，受害者的浏览器访问以上 URL 的时候，服务器端会跟正常情况下一样返回清单 1 中所示 HTML 页面，然后浏览器会继续将这个 HTML 解析成 DOM，DOM 中包含的 document 对象的 URL 属性将包含清单 3 中注入的脚本内容，当浏览器解析到 JavaScript 的时候会执行这段被注入的脚本，跨站点脚本编制攻击即成功实现。
值得关注的是，通过以上示例可以看出，恶意代码不需要嵌入服务器的响应中，基于 DOM 的跨站点脚本编制攻击也能成功。可能某些读者会认为：目前主流浏览器会自动转义 URL 中的 '&' 和 '&' 符号，转义后的注入脚本就不会被执行了，基于 DOM 的跨站点脚本编制也就不再有什么威胁了。这句话前半段是对的，但后半段就不准确了。我们要意识到攻击者可以很轻松地绕过浏览器对 URL 的转义，譬如攻击者可以利用锚点 '#' 来欺骗浏览器，如清单 4 所示。浏览器会认为 '#' 后面的都是片段信息，将不会做任何处理。
清单 4. 访问 URL 中结合锚点注入脚本
通过 URL 重定向钓鱼
网络钓鱼是一个通称，代表试图欺骗用户交出私人信息，以便电子欺骗身份。通过 URL 重定向钓鱼指的是 Web 页面会采用 HTTP 参数来保存 URL 值，且 Web 页面的脚本会将请求重定向到该保存的 URL 上，攻击者可以将 HTTP 参数里的 URL 值改为指向恶意站点，从而顺利启用网络钓鱼欺骗当前用户并窃取用户凭证。清单 5 给出了较为常见的含有通过 URL 重定向钓鱼漏洞的代码片段。
清单 5. 执行重定向的 JavaScript 代码片段
var sData = document.location.search.substring(1);
var sPos = sData.indexOf("url=") + 4;
var ePos = sData.indexOf("&", sPos);
var newURL;
if (ePos& 0) {
newURL = sData.substring(sPos);
newURL = sData.substring(sPos, ePos);
window.location.href = newURL;
可以看出，这些 JavaScript 脚本负责执行重定向，新地址是从 document.location、document.URL 或者 document.referer 等 DOM 元素的属性值中截取出来的，譬如用户输入清单 6 所示。
清单 6. 执行重定向的 URL
显然用户一旦执行了清单 6 所示 URL，将被重定向到钓鱼网站。这个漏洞的原理很简单，比服务器端的重定向漏洞更好理解。但通过 URL 重定向钓鱼的情况下，钓鱼站点的网址并不会被服务端拦截和过滤，因此，这个漏洞往往比服务器端重定向漏洞更具有隐蔽性。
客户端 JavaScript Cookie 引用
Cookie 通常由 Web 服务器创建并存储在客户端浏览器中，用来在客户端保存用户的身份标识、Session 信息，甚至授权信息等。客户端 JavaScript 代码可以操作 Cookie 数据。如果在客户端使用 JavaScript 创建或修改站点的 cookie，那么攻击者就可以查看到这些代码，通过阅读代码了解其逻辑，甚至根据自己所了解的知识将其用来修改 cookie。一旦 cookie 包含了很重要的信息，譬如包含了权限信息等，攻击者很容易利用这些漏洞进行特权升级等攻击。
JavaScript 劫持
许多 Web 应用程序都利用 JSON 作为 Ajax 的数据传输机制，这通常都容易受到 JavaScript 劫持攻击，传统的 Web 应用程序反而不易受攻击。JSON 实际上就是一段 JavaScript，通常是数组格式。攻击者在其恶意站点的页面中通过 &SCRIPT& 标签调用被攻击站点的一个 JSON 动态数据接口，并通过 JavaScript Function Hook 等技术取得这些 JSON 数据。如果用户登录被攻击网站后（假定其身份认证信息是基于 Session Cookie 来保存的），又被攻击者诱引访问了恶意站点页面，那么，由于 &SCRIPT src="& 这种标签的请求会带上 Cookie 信息，恶意站点会发送 JSON 数据获取请求至被攻击站点，被攻击站点服务器会认为当前请求是合法的，并返回给恶意站点当前用户的相关 JSON 数据，从而导致用户数据泄密。整个过程相当于一个站外类型的跨站点请求伪造 CSRF 攻击。
随着 Ajax 的进一步推广，以及 HTML5 的逐步应用，还有更多的客户端安全漏洞出现。目前对于 JavaScript 的安全研究尚不多，新推出的 HTML5 客户端存储、跨域通信等新特型也都跟安全紧密相关，有兴趣的读者可以作进一步阅读。鉴于笔者知识有限，JavaScript 相关安全漏洞暂且分享这么多，下面将谈谈 JavaScript 安全漏洞的检测技术。
自动化检测 JavaScript 安全漏洞
正如我们所熟知，检测代码安全漏洞一般有白盒检查和黑盒检查。白盒检查侧重于对代码的分析，可以通过手工代码审查，或者自动代码分析工具。黑盒检查主要是模拟黑客攻击的方式进行渗透测试。通常而言，黑盒检查的准确度高一些，但代码覆盖面比较小，而白盒检查的代码覆盖率较高，但误报率比较高。两种方式相结合能够互相弥补不足，混合检查方式将会是未来的趋势。
结合 JavaScript 代码而言，出于跨浏览器兼容、更好的 Ajax 特性需求等原因，越来越多的 Web 应用依赖于第三方的 JavaScript 代码库，譬如 Dojo、JQuery 等。这些代码库为了降低文件大小，往往都进行了代码压缩，导致其可读性极差，因此手工代码审查几乎不具备可行性。此外，页面 JavaScript 调用入口很多，手工对其进行渗透测试的工作量和难度都非常大。因此，我们需要推荐使用自动化测试工具来检测 JavaScript 安全漏洞。
Rational AppScan JSA 原理简述
JSA 是 Rational AppScan Standard V8.0 新推出的一项 AppScan 扩展，用来进行执行静态 JavaScript 分析，以检测常见客户端安全漏洞。JSA 融合了 JavaScript 静态污点分析技术和网站动态爬虫技术。简而言之，AppScan 会保存爬虫所探索到的所有 URL 的完整的 HTTP 响应，然后 JSA 对这些响应页面逐个进行 JavaScript 代码分析。JSA 在分析每个页面时应用两个阶段：数据流分析和字符串分析。首先，JSA 查找从源（Source）到接收器（Sink）中未经过清除工具（Sanitizer）的轨迹。如果可找到此轨迹（Trace），那么 JSA 将在第二步中使用字符串分析的变体——字符串前缀分析（SPA)进行验证。相比于单纯的 JavaScript 代码静态分析技术而言，JSA 技术更为先进和准确，因为它是在完全解析好的 HTML 页面及 DOM 环境中进行安全漏洞分析。
如今 Web2.0 网站及 Ajax 应用中，HTML 页面往往都需要浏览器基于服务器响应里的 HTML 和 JavaScript 代码进行动态解析后才形成完整的 HTML 和 DOM，单纯基于服务器响应中的 JavaScript 代码进行静态污点分析存在一个明显缺陷 -- 其所测 JavaScript 代码及执行环境不一定完整，因此它无法保证测试的准确度和全面性。JSA 正是克服了以上缺点，融合了白盒检测和黑盒检测两种测试方法的优点，并引入 IBM 的字符串分析技术，所以 JSA 有着更好的准确性和全面性。
利用 AppScan 检测 JavaScript 安全漏洞
Altoro Mutual 是 IBM 所提供的 Web 安全漏洞演示网站，下文笔者将向读者展示如何利用 AppScan JSA 来检测该网站所存在的 JavaScript 安全漏洞。
启动 AppScan，点击菜单"扫描– 扫描配置"打开扫描配置对话框，设置起始 URL 为""。
图 1. 设置起始 URL
在扫描配置对话框左侧，点击"登录管理"，然后点击右侧的"记录 ..."按钮录制登录过程，确保会话中检测处于活动状态。
图 2. 设置登录方法
在扫描配置对话框左侧，点击"测试策略"，检查测试策略设置。默认测试策略应该是"缺省"，其已经包含了常见 JavaScript 测试，可以点击"已启用 / 已禁止"查看当前默认启用的测试策略。
图 3. 检查测试策略
关闭扫描配置对话框，点击菜单"扫描 -- 仅探索"或单击快捷按钮（如图 4 所示）启动探索。本文仅示例如何检测 JavaScript 安全漏洞，所以选择"仅探索"+ 客户端 JavaScript 分析的测试方式。
图 4. 启动探索
点击菜单"工具– 扩展名– JavaScript Security Analyzer"或者快捷按钮（如图 5 所示）打开"分析 JavaScript"。在弹出的 JavaScript Security Analyzer 对话框中，单击"立即分析"。
图 5. 分析 JavaScript
JavaScript Security Analyzer 扫描完成后，即在结果列表中列出所发现的客户端 JavaScript 安全漏洞。如下图所示，Altoro Mutual 站点存在"基于 DOM 的跨站点脚本编制"及"开放式重定向"漏洞，下文将展示这些漏洞的详细信息。
图 6. 查看扫描结果
展开结果列表中的"基于 DOM 的跨站点脚本编制"，单击第一个"JavaScript"问题，在下方的问题信息中将会展示其详细信息。我们可以看出，AppScan 保存了对 JavaScript 问题代码的分析结果，并用黄色标识定位了源（Source）和接收器（Sink），利于开发人员快速修复该漏洞。
图 7. 基于 DOM 的跨站点脚本编制问题信息
同样，展开并查看"开放式重定向"问题，在问题信息栏中展示了该漏洞的代码分析结果。
图 8. 开放式重定向问题信息
本文为了快速展示如何检测 JavaScript 安全漏洞，所以选择"仅探索"+ 客户端 JavaScript 分析的测试方式。实际工作中，建议您只需要跟通常一样进行扫描（即手工探索结合自动探索站点，然后执行测试），AppScan 默认会在测试过程中自动执行 JavaScript Security Analyzer。
Rational AppScan Standard 能检测已知常见 JavaScript 安全漏洞，但 Altoro Mutual 仅展示了基于 DOM 的跨站脚本编制和重定向漏洞，故本案例的结果列表中仅包含上述两项安全漏洞。
java企业级通用权限安全框架源码 SpringMVC mybatis or hibernate+ehcache shiro druid bootstrap HTML5
本文介绍了 JavaScript 常见安全漏洞，分析了手工检测 JavaScript 代码存在较大的技术难度。IBM Rational AppScan V8.x 新推出了 JSA 扩展组件，在业界率先提供了客户端 JavaScript 安全检测方案。本文跟读者分享了 JSA 的基本原理和技术优势，并结合案例向读者演示了如何使用 IBM Rational AppScan JSA 测试客户端 JavaScript 安全。
本文写的存在问题局限性，欢迎提出批评，共同学习进步。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具用户名：百度技术
文章数：403
评论数：155
访问量：1302608
注册日期：
阅读量：1297
阅读量：3317
阅读量：439602
阅读量：1126333
51CTO推荐博文
简介：JavaScript在越来越多的web项目中被大量应用。通过本文，您将了解到百度的开源项目Tangram，一个JS库的持续集成实现方案。
本文通过三个方面对持续集成实现进行讲述：首先，如何跨越从Html方式的用例组织到自动化测试所必须的用例执行动态组织；接着，如何实现用例的跨浏览器分布式执行；然后，针对当前热门的hudson，我们如何配置、调整以使我们的测试框架可以像常规自动化测试项目那样应用hudson实现项目的持续集成。
所有后续内容中的相关代码，您都可以在github的Tangram项目中看到相应的实现细节。
自动化测试方案
在Tangram，项目的结构被定义成常见的src和test目录的格式，并，拆分良好架构的源码和用例之间采用了一一对应的关系。所以，我们可以很方便的用php实现用例执行页面的自动组织功能。
在成功实现并应用了测试自动执行后，我们的测试执行时间从原来的16人时缩短到了3分钟。
测试用例组织与单浏览器执行流程如下：
1、遍历源码目录并比对用例目录生产测试页必须的用例列表；
2、嵌入用例列表页面的js控制逻辑组织iframe方式挨个载入每一个用例和相应的源码；
3、通过QUnit定制用例的执行；
4、定制用例执行结束逻辑并整合测试结果，回传服务器；
5、服务器端生产测试记录xml文件，并根据需要发送邮件报告或统一存储；
图1. 用例列表展示
图2. 用例执行展示
分布式执行简介
Tangram项目声明支持几乎目前在中文区常见的所有浏览器，为支持这一目标，我们在测试执行机制中引入了STAF，通过命令调用方式，实现同步的，多测试机（IE6、7、8、9没有办法在同一测试机上安装）多浏览器方式启动用例执行。
执行流程如下：
1、通过web请求确认测试执行范围（以filter模式支持）并启动执行。
2、查询项目配置信息获取测试机信息和测试浏览器信息
3、通过staf远程启动浏览器访问服务器上的测试列表页面
4、待测试完毕后，整合完毕的测试报告收集
图3. 多浏览器测试结果展示（因为浏览器执行并发，我们的实际测试每次执行时间都在3分钟以内完成）
持续集成与hudson
在完成上述所有必须的JS测试自动化细节后，我们采取了一种相对便捷的方式使hudson可以启动单次测试并执行。
1、配置hudson拉取源码的方式为github，并配置轮询相关参数
2、配置测试框架的项目目录指向源码在本地的存放路径
3、配置ant脚本：
a) 配置报告清理及其他环境准备操作；
b) 配置web请求方式实现项目测试的一次分布式批量执行；
c) 配置一次构建所需的出口为报告的产出文件路径；
d) 配置发布所需的压缩相关操作；
e) 配置邮件发送报告和自动上传压缩文件的发布方式支持；
为支持项目发布和个人开发模式同时可以使用hudson上的自动构建功能，我们根据项目在github上的存储细节分别实现ant脚本中的两种不同的编译执行模式：
1、为开发提供的构建流程：
a) 以单个源码方式启动的构建模式；
b) 支持通过diff获取变更源码和用例列表的执行模式；
c) 可定制的分支支持模式，便于每个开发人员特定的需求：
d) 提供简版报告和详细版本报告（开发中），用于跟进具体的项目状态和做问题分析之用；
e) 结合jslint（后续计划）支持的静态检查报告；
f) 通过jscoverage结合测试框架实现的覆盖率报告；
图4. Hudson单次测试结果记录
图5. 多人多项目开发模式支持
2、为发布提供的构建流程：
a) 固定的每日构建和应需求随时可以启动的构建，两种方式支持的启动模式，用于确认项目是否合适发布；
b) 以编译、压缩后的源码方式启动的构建模式；
c) 发布前的验证工作源码指向了编译压缩产出的用于上线的源码；
d) 构建成功后，自动发送上线步骤等；
图6.项目状态跟踪图（涂抹的部分为测试执行次数）
本文介绍了如何使用hudson结合项目特性对JavaScript项目实现持续集成。
 参考hudson/Jenkins-ci的web站点 提供了Hudson/Jenkins的使用手册。
 参考QUnit的web站点 提供了js单元测试框架的使用手册。
 Tangram在github的web站点
 Tangram的官方文档网站
BaiduHI : bellcliff
【本文转自
【本文出自 “” 博客，请务必保留此出处
了这篇文章
类别：┆阅读(0)┆评论(0)记得当时刷笔试题的时候有了解过&前端工程化&，无非就是用自动化工具帮助开发人员完成一些小细节，提高工作效率之类的，不过当时可没想到可维护性这么远
构建项目 -& 模块化开发 -& 复用 -& 测试 -& 调试 -& 验证 -& 发布 -& 版本控制，这整个流程的很多环节都可以用自动化工具解放人力，提高项目的可维护性
一.自动化的优缺点
js开发中使用自动构建系统的优缺点如下：
自动源码控制能够区分清楚用于调试的代码和将来发布的代码，开发阶段不必估计影响线上产品
静态代码分析能自动完成（JSLint、JSHint）
发布前可以进行多种方式的加工（合并文件、压缩代码）
自动化测试，能很快发现错误
很容易重做一次重复性的工作（比如再次合并文件、压缩代码）
有些开发人员用不习惯，因为改动代码之后要重新构建一次，而不是传统的保存文件，刷新页面
部署到线上的产品代码与开发阶段的代码不同，难以追踪bug
经验不足的开发人员可能不会用这种自动构建系统
二.文件目录结构
一般不同的项目需要不同的目录结构，但下面给出的几条原则是广泛适用的：
一个对象对应一个文件
避免多名开发人员修改冲突，文件越少，冲突的概率越大，一个对象对应一个文件能最小化这种风险
把相关文件用文件夹分组
这样管理代码更容易根据功能定位对应代码
分离第三方代码
最好用CDN引入第三方库，这样就不用对第三方代码进行多余的源码控制了
分离构建产物
应该把构建的产物放在另一个文件夹里，不要进行源码控制，避免无意中反复构建带来的时耗
把测试代码放近点
要把测试代码放在很容易找到的地方，比如和源码放在一起，或者test/目录下与源码路径相似的位置
三.自动化的步骤
1.使用自动构建工具
Ant：基于Java的
Buildy：基于NodeJS的
Gmake：UNIX粉喜欢的
Jammit：基于Ruby的
Jasy：基于Pathon的
Rake：基于Ruby的
Sprockets：基于Rack的
2.使用自动代码检查工具
JSLint：道格拉斯做的好工具
JSHint：和上面的差不多，但配置选项更多
3.使用自动合并/加工文件的工具
合并文件，插入版本号什么的，用第一步用的自动构建工具就能搞定
4.使用代码瘦身/压缩工具
瘦身和压缩的区别是瘦身是针对代码语法的优化，让源码更短；而压缩就是把纯文本的源码文件变成别的更小的文件，压缩后不能再编辑，除非先解压
瘦身工具比较多，作者推荐了几个：
YUI Compressor：Yahoo!的，基于Java，能缩短变量名、去掉空白字符、去掉注释，还能给CSS瘦身
Closure Complier：Google的，基于Java，能进行深层次优化（去掉不用的方法，把只用一次的方法扔进闭包），比YUI的瘦身效果更好
UglifyJS：基于NodeJS，还能合并var语句
5.使用文档自动生成工具
JSDoc：基于java的
YUI Doc：用js写的
其它：Docco、Dojo Documentation Tools、JoDoc、Natural Docs、NDoc、PDoc
6.使用自动测试工具
YUI Test Selenium Driver：（作者总是喜欢把Yahoo!的东西排前面，好员工哇）YUI的单元测试框架
Yeti：利用各个浏览器进行js测试
PhantomJS：提供WebKit浏览器环境，可以配合QUnit和Jasmine
JsTestDriver：Google的单元测试框架，支持自动浏览器测试
Jasmine：行为驱动的js测试框架
QUnit：JQuery的单元测试框架
Selenium：功能测试框架，支持浏览器测试
7.把所有自动化工具整合起来
应该至少构建3个版本：
要求是尽量快，否则影响开发人员火力全开
具体任务是：清理文件 -& 初始化构建环境 -& 检查代码 -& 合并文件
注意：不要把自动测试环节放进来，因为费时间，开发版构建要求尽量快
用来排查错误，应该每隔一段时间运行一次检查并报告错误
具体任务是：代码瘦身 -& 测试 -& 文档生成
注意：文档生成环节是可选的，因为加进来可能会影响错误检查（错误可能来自文档生成环节）
要保证0错误，稳定可靠的产品
具体任务是：加工文件（添上版本、版权信息等等）
注意：可以考虑把部署等发布任务加进来，也可以选择把集成结果直接加工后部署，但要保证集成结果没问题
8.使用CI系统
CI（Continuous Integration）系统是用来增强对集成版的错误排查的，持续集成可以每隔一段时间自动运行并检查代码报告错误，甚至联系错误相关的具体开发人员
《Maintainable JavaScript》
到这里整本书就结束了，这本书是淘宝UED博客推荐的，还算不错，也没有特别晦涩难懂的英文句子。
200页的书断断续续看了近3个星期，不算太慢，当然，在这期间还看完了《JavaScript语言精粹》、《The Book of CSS3》，学了SASS入门，写了10篇博文
阅读(...) 评论()前端自动化开发工具 - 为程序员服务
前端自动化开发工具
为什么要用自动化开发工具
在前端的开发中上线前可能会做的事情：
文件目录调整
HTML注释、换行等操作
CSS压缩合并
JS、CSS语法检测
JS代码压缩
上面列举了一些常用的操作，这些操作是重复而枯燥的，如果是人工来一项一项做，会浪费大量时间。所以需要有一个高效的工具来帮我们做这些事情，Grunt应运而生。
Grunt是什么
Grunt是一个基于任务的Javascript工程命令行构建工具
如何使用Grunt
安装gruntjs
假如之前安装过的话，先卸载 npm uninstall –g –grunt
安装grunt命令行工具， 命令：npm install-g grunt-cli
在工程目录下安装Grunt Module(如何安装看第三步)
安装Grunt Module
在项目根目录下创建package.json文件
2. 在项目根目录执行以下命令行自动安装package包文件：npm install3. 增加依赖的模块，可以在根目录下执行命令行Npm install –save-dev //–save-dev 是把信息保存到package.json4. 5. 为了方便，将依赖的包都写入到package.json中，执行第2操作即可安装* 在项目的根目录创建Gruntfile.js文件，在此文件中注册要执行的任务，如下图代码示例
代码中最后一行注册的任务为’default’也就是grunt的默认任务, 里面包括了’uglify’ ‘cssmin’ ‘devtools’三个子任务。
在项目根目录执行命令 grunt就会执行default里面的任务， 或者 grunt[task name]执行其中一个单独的任务。
WebAPP开发框架
AngularJS是一款来自Google的前端JS框架，它的核心特性有：MVC、双向数据绑定、指令和语义化标签、模块化工具、依赖注入、HTML模板，以及对常用工具的封装，例如$http、$cookies、$location等。AngularJS框架的体积非常小，但是设计理念和功能却非常强大，值得前端开发者深入学习。还有类似的框架如Knockout.js
Sencha Touch
用户体验最接近Native App， 具有整体的UI组件、布局解决方案；
统一的编程代码结构和要求，良好组织的代码易于维护；
继承ExtJS 4的应用程序MVC架构；
完善的API文档，示例；活跃的社区，网上有大量的文档书籍帮助学习；
兼容性差，仅支持webkit内核的浏览器；
框架比较重量级，学习成本比较高；
商业化使用有版权问题；
jQuery Mobile
跨浏览器兼容性最好，几乎兼容所有的平台和浏览器；
入门简单，语法简洁，编码灵活，一些简单的应用直接用HTML既可实现，无需Javascript；
开源插件与第三方扩展网上资源丰富；
完善的API文档，示例；活跃的社区，网上有大量的文档书籍帮助学习；
jQuery Mobile对代码没有特定的要求，后期维护难度较大；
phoneGap一个开源的开发框架，使用HTML、CSS和JavaScript来构建跨平台的移动应用程序。它使开发者能够利用iPhone、Android、 Palm、Symbian、BlackBerry、Windows Phone和Bada等智能手机的核心功能，包括地理定位、加速器、联系人、声音和振动等。除了在本地编译应用之外，还可以使用PhoneGap提供的云 端Build工具进行应用编译。也就是说，只需要将用HTML5写好的应用上传到PhoneGap的云端服务器，PhoneGap Build即可将其编译成适合不同平台的应用。
前端开发工具库
轻量级工具库zepto
为什么不是jQuery？因为jQuery的目标是兼容所有的主流浏览器，这就意味着会有大量的代码对移动端的浏览器是无用或低效的，zepto是针对移动端的浏览器编写的，因此体积较小、效率会高一些，zepto的api完全效仿了jQuery，所以学习成本非常低。
下载还要单独讲？没错，一般的插件我们直接从官网下载就可以用了，但是最新的zepto源码其实是由17个模块组成的，官网默认提供的只有5个模块（zepto,event,ajax,form,ie），还有12个模块是没有打包的（detect,fx,fx_methods,assets,data,deferred,callbacks,selector,touch,gesture,stack,ios3）如下图github上的截图。
在使用zepto的时候我们可能希望添加一些模块或者去掉一些默认的模块来控制文件的大小，这时候我们就要下载github上的源码，并编译出自己需要的文件。
安装nodejs环境
运行下面的命令
编译出来的文件就在dist目录下
单页面路由routie
我们在开发webapp的时候，为了提高体验，经常会做成单页面的应用，这就需要由路由对整个应用进行控制。
Routie是一个非常小的单纯的javascript hash 路由库，gzip后大小为800bytes,并且功能很强大，用法很简单。官网地址：
Requirejs/seajs&commonJS/AMD/CMD
JS模块化开发一直都有开发者在探索和研究，当nodejs出现后，模块化变的更加重要和有必要。
nodejs 环境的模块化加载，开发者已经利用commonJS机制来解决，commonJS是服务器端模块的规范，根据commonJS一个单独的文件就是一个模块。加载模块使用require方法，该方法取一个文件并执行，返回文件内部的exports对象。
CommonJS规范加载是同步的，只有加载完成才可以继续后面的操作。
AMD规范则是异步加载模块，允许指定回调函数，因为nodejs主要用于服务器端编程，模块文件一般都存在本地硬盘上，所以加载会很快，CommonJs比较适用。但是在浏览器环境，要从服务器端加载模块，这时候就有必要采用异步的方式，因此浏览器一般都采用AMD规范。
AMD和CMD区别：AMD是RequireJS在推广过程中对模块定义的规范化产出，CMD是SeaJS在推广过程中对模块定义的规范化产出，目的都是为了javascript的模块化开发。
对于依赖的模块AMD是提前执行，CMD是延迟执行。RequireJS从2.0开始也改成可以延迟执行（写法不同，处理方式不同），CMD是依赖就近。
手机端因为硬件的偏弱，相对于PC会面对更多的性能问题， 所以动画的性能要求很高，目前对提升移动端动画主要方法有几点：
尽可能的利用硬件加速，所使用3D变形来开启GPU加速。
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：
-webkit-backface-visibility:
-moz-backface-visibility:
-ms-backface-visibility:
backface-visibility:
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
尽可能少的使用 box-shadows与gradientsbox-shadows与gradients往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们。
尽可能的让动画元素不在文档流中，以减少重排
Position:fixed
position:absolute
为什么用缓存
页面的缓存可以减少网络带宽消耗，减轻服务器的压力，减少网络的延迟，加快页面展示速度
常用的缓存
浏览器http缓存
Webstorage (localstorage/sessionstorage)
Local Database
Localstorage的使用
Localstorage是html5新增的特性，早前的Cookies主要的问题是太小，大概只能存4K，并且IE6只支持每个域名20个cookies, IE有专门的userData，基本是被flash来用的，大小是cookies的25倍左右，localstorage是html5统一的，新的浏览器都支持这一特性，大概每个站点可以存下5M的数据，内容只能存字符串，支持情况：
PC端： IE8+, FF3.0+, Opera10.5+, Chrome 4.0+, safari 4.0+
Mobile端： iPhone 2.0+, Android 2.0+
在网上看到有时候在使用过程中iPhone/iPad上面会在设置setItem()的时候出现诡异的QUOTA_EXCEEDED_ERR错误，一般在设置setItem之前，先removeItem就好了。
当然localstorage用来存什么东西并没有严格的规定，根据个人需求来合理使用，在这里介绍一个用来优化性能而使用localstorage储存代码的实例。这大大提高了页面的加载性能（除首次加载）；需要注意的一点是因为采用是异步加载js文件，所有要注意代码的执行顺序，具体情况具体处理。
Manifest的使用
H5新增的离线存储功能给离线应用带来了福音，但是在使用中会遇到一些意想不到的问题，经测试，更新了文件后，改变manifest版本号，发现手机没有更新到最新的代码，经调研，manifest文件是每次都去请求的，问题出在浏览器的默认缓存会把manifest文件缓存，所以在请求manifest的时候，浏览器会优先监测浏览器本身的缓存，如果发现manifest还未过期就会从缓存中拉取而不是从服务器端请求，这样就导致了无法更新到最新的代码，解决办法是服务器端在返回的时候禁用浏览器缓存。
另外就是已经上线的程序希望去掉manifest缓存，需要将manifest文件从服务器端删除，并且关键的一点是服务器端一定要返回404,否则将无法删除，另外一个是没有办法的办法，换文件路径。
常用的调试方法
开发时候的调试基本是在chrome的控制台Emulation完成
现有的一些手机端调试方案：
Remote debugging with Opera Dragonfly 需要wifi网络，下载最新的桌面版的opera,下载手机端的opera,通过桌面版的opera进行远程调试。
Using Firebug on mobile Firebug lite可以用在任何能运行js的浏览器上， 在页面中引入firebug-lite.js即可
Remote Javascript debugging with JS console
Remote debugging with weinre 需要下载weinre jar包 开启服务
Weinre的使用
安装步骤：
npm install weinre –g
会在目录C:\Users\Administrator\AppData\Roaming\npm\node_modules下看到weinre，这便是它的主目录了。注： 每次cd一个文件夹，逐目录cd下去才能到达目标文件夹。
cmd中进入该主目录，运行weinre –httpPort 8080 –boundHost -all-
在要调试的页面加上&script src="http://yourIp:8080/target/target-script-min.js" /&&/script&
手机浏览器上打开 http:// yourIp:8080/client/
Android SDK
打开目录，找到tools下的ddms.bat，运行。
兼容性问题归纳
Android2.3的overflow问题
在android2.3及以下系统版本的浏览器不支持overflow：scroll / auto，即在页面元素里面的内容如果超过了父元素或祖先元素的高度是无法滚动的，可以通过css3的transform来实现滚动，代表作：iscroll。
Android2.3的聚焦问题
Android2.3会出现点击聚焦的情况，出现黄色的边框，通过对相应的元素设置css –webkit-tap-highlight-color: rgba(0,0,0,0)解决，另外一些高版本的系统也可能会出现有黄色边框的情况，这时候试着用outline：none来解决。
Android2.3 position:fixed及input中文输入bug
在android2.3系统中，如果页面中有position为fixed的元素，input外层的元素定位为relative或者自身的定位为relative，就会产生一种奇怪的现象，在input中输入数字或者字母都很正常，当切换输入法为中文后，发现无法输入，当把position设置为absolute后一切正常，所有当遇到这种情况时就只能改变布局了。
Android2.3 border-radius问题
不支持百分比，可用一个比较大的值 如： 9999px。
Android2.3 动画问题
@-webkit-keyframes wave1{
% { opacity: 0; }
.33% { opacity: 1; }
% {opacity: 1;}
100%要留一帧空出来。在100%之前写一个最后值 99%那里写。2.3系统的动画才会动。
Android2.3渐变问题
渐变这样写2.3才兼容：
background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(1%,rgba(111,191,7,0)), color-stop(74%,rgba(111,191,7,0)), color-stop(75%,rgba(111,191,7,0.9)), color-stop(100%,rgba(111,191,7,0.9)));
Linear是指渐变方式，0 0指从哪个方向开始。0 0 到 0 100% 说明是从上到下渐变。 后面的color-stop 可以指定百分比和颜色值。
Android4.0及低版本系统touch事件bug
在android4.0系统中，存在部分子版本的系统有touch事件的bug，表现为touchstart是正常的，touchmove只有在touchstart触发的时候触发一次，touchend不会被触发，android2.3会触发startmove一次，当touch结束后会执行剩余的move和end。在zepto库中此问题也没有得到解决,在android4.2系统中也存在这样的问题，后来发现是浏览器将事件cancel调了，目的应该是防止在滚动页面的时候调用，所以在touchmove事件中添加e.preventDefault()，发现touchend被触发了，所以解决方案根据实际使用场景来进行处理。
Android4.X placeholder问题
placeholder 文字字体会偏上。 但是placeholder只能设置他的color。如：
input: :-webkit-input-placeholder{
行高不能设置。这时候把line-height设成normal 就能上下居中了。
各个系统对position:fixed的支持情况
手机Safari – iOS5及以后版本都支持. iOS4及以下版本不支持，会当做static处理.
Android 2.1 及以下版本不支持.
Android 2.2 滚动过程中不保持fixed的位置，滚动完成后回到fixed的位置.
Android 2.3 支持fixed, 但是要求页面禁止缩放.
Android 3和4支持fixed.
Touchstart, click, tap事件分析
在移动端我们会经常用到touch事件，touchstart事件很灵敏，所有如果要绑定类似于pc端的click事件，用touchstart会经常的误操作，例如滚动页面的时候被误点，所有市面上有很多手势库，封装出了tap等方面，而在移动端click事件也是可以触发的，click事件会在点击300ms左右出发（原因是浏览器希望判断是否是双击），原始的解释参见google这篇[Creating Fast Buttons for Mobile Web Applications](Creating Fast Buttons for Mobile Web Applications)，个人经过实验，页面元素的点击可以考虑用click，和tap效果无明显差别，所以在没有手势库的情况下可以考虑用click来处理用户的点击行为。
禁用webkit浏览器默认样式
webkit上的input,button,及select的默认样式可以通过 –webkit-appearance:none禁用，然后自定义。
Placeholder自适应bug
一个placeholder自适应bug，页面中使用&input&标签并且有属性placeholder，在页面横屏再转回竖屏时，会导致页面无法自适应，无论是android还是ios都会中招。
解决方法是，在&input&外层容器中加overflow:hidden
无刷新改变当前页面url的问题整理
Android 2.3系统存在的问题：
无刷新改变当前页面url。不支持onpopstate方法，可用onhashchange方法代替。
虽然支持history的pushState方法和window.onpopstate方法。但是按回退键，即发生history.back()的时候，不会触发window.onpopstate方法。只会触发hashchange事件。
浏览器对popstate事件的整体支持情况：
history的pushState可操作浏览器历史，并且改变当前页面的URL。添加对应的url到历史记录里。但是用pushState方法会产生历史记录，可用replaceState方法代替，不会产生额外的历史记录。
hashchange 和popstate事件 触发的时候，hash已经改变了，无法阻止默认行为。即e.preventDefault()不起作用。
pushState()方法永远不会触发hashchange事件
popstate方法的触发条件：
* 页面前进、后退时触发。* Hashchange时触发5. 如何跳转* 如果history堆栈里有pushState过，那么就回跳到pushState所定的hash页面。如window.history.pushState(‘object’, document.title, “#explorer”);的#explorer页面* 没有pushState过，就按照history的记录进行回退和前进。
Iscroll插件问题
Iscroll插件被很多webapp应用中来实现列表滚动，设置translate属性可以使滚动更加顺滑，但是在iscroll4.0中开启了translate属性后会导致滚动无法手动停止，在问答社区中有人说iscroll5会解决这个问题，等iscroll5正式发布后可以尝试一下。Iscroll在ios上表现很出色，但是在一些android手机，尤其是低端机，性能不是很好，所以使用也要慎重。
资源分享（来自网络）
推荐一个PPT可以让你全面了解HTML5：
HTML部分包括大家已经熟知的HTML4.01 Standard 还有就是即将成为Standard的 HTML 5 Candidate Recommendation
HTML5 是在 HTML4的基础上增加了更多的语义化标签，比如：
&header&&nav&&section&// 这有太多了，就不一一细说并且在原有Tag上，扩展了更多的标记属性，比如：&input type="text" required /&&input type="email" value="" /&HTML5除此之外，还引入了很多新的标签和属性，比如：WebApp开发方向的progress、无障碍浏览ARIA 、做SEO优化Microdata等等。
CSS部分也是同样的，大家已经熟知的
W3C最新的是CSS Level3 标准，由于CSS3包含的内容非常多，文档都是分开的，暂时没办法给出所有的标准地址，先贴一部分常用的标准吧：
JS部分对于HTML5来说主要体现在 Web API 方面，所有 API 都是 BOM对象，下面我也列出一些常见的标准地址：
通过上面的内容，大概已经了解HTML5是个什么东西了，下面就来说说HTML5开发APP可以使用的一些资源。其实HTML5开发与以往的Web并没有本质的区别，主要差别体现在HTML5的一些新特性并没有被老旧类库很好的支持，这样就需要一些更现代的类库来使用HTML5做开发。
轻量级库包括
这个一个在移动端很好用的轻量级库，非常小巧，但是功能也很简单；
这里说的是2.0以后的版本，仅支持一些高级浏览器，使用很多HTML5的特性，虽然在移动端开发体积相对zepto较大了些，但是作为一个基础库来说确实令人爱不释手；
App框架（下面的框架不仅仅只能用来移动端开发）
和jQuery是一样的编程思想，使用起来非常方便，包含浏览历史管理、视图导航渲染、UI组件等功能；
与jQuery Mobile非常相似的一个框架，实际我也没有使用过，看过了API，基本与jQuery Mobile类似；
Sencha的产品，是完全web组件化的思路，用来做企业应用开发非常的棒，但是，也有很多缺点，比如体积、复杂、性能等等；
MVC框架推荐Backbone，并不是因为Backbone有多好，但对于移动端开发来说，Backbone的体积是相对小巧的，并且功能也十分简单，很容易上手，AngularJS体积较大，相对要复杂一些；
，用来构建HTML/CSS的；
与Bootstrap一样的东东；
工具库（说到工具，实在是太多了，我没办法一一列出来，视乎到这的时候才离题主的问题近了一些）
模拟区域滚动，在移动端开发中使用
触摸手势工具，用来兼容Pointer Event Model与Touch Event Model；
触摸手势工具，扩展各种手势事件
也是手势工具，但这是一个jQuery plugin；
加载中动画小工具
使用css3绘制背景
使用svg绘制背景
各种文字动画效果
各种CSS3的动画效果
音视频播放工具
CSS3代码生成工具
IE官方提供的一个工具，非常好用，功能很多；
[transform变形] (/tool/css3Preview/Transform.html)
最后分享两个不错的移动端开发资源
本文转载自：
声明: 本文 ” ” 采用
协议进行授权.
转载请注明本文链接地址:
仁义礼智信，温良恭俭让。
原文地址：, 感谢原作者分享。
您可能感兴趣的代码