使用karma+mocha进行前端测试驱动开发(一)

之前有接触过一些使用 casperJs 做前端自动化测试和页面元素监控,效果还不错,这个后续有时间再介绍一下。但对前端代码层面的测试不是很了解,今天下班比较早,闲来无事,就看了下最近听说的 karma+mocha 前端测试框架,发现还是很有意思,收(刚)获(刚)颇(入)多(门)。目前来看 karma+mocha 非常适合做 TDD(测试驱动开发)。

测试驱动开发(英语:Test-driven development,缩写为 TDD)是一种软件开发过程中的应用方法,由极限编程中倡导,以其倡导先写测试程序,然后编码实现其功能得名。

TDD 提倡写代码之前先把单测写好,然后通过单测来验证代码是否正确。这就需要有一个单测框架(即 mocha),但这还不够,也不能每写完一次就运行一下单测代码,这也效率太低了吧,所以还需要一个框架(即 karma)来做这个事情。

这里先介绍一些 JS 单测框架 mocha(https://github.com/mochajs/mochatj 大神的作品,奈何大神觉得 Node 没搞头去搞 go 了)。安装还是比较简单,这里就不多说了。提醒一下,如果是在 Windows 下安装 Node 的话可能需要设置一下环境变量

实例:一个加法模块src/add.js的代码:

各个语言写单测都差不多,就是对预期结果的断言。上面代码对应的测试代码tests/add.test.js

测试脚本里面应该包括一个或多个describe块,每个describe块应该包括一个或多个it块。

describe块称为“测试套件”(test suite),表示一组相关的测试。它是一个函数,第一个参数是测试套件的名称(“加法函数的测试”),第二个参数是一个实际执行的函数。

it块称为“测试用例”(test case),表示一个单独的测试,是测试的最小单位。它也是一个函数,第一个参数是测试用例的名称(“1 加 1 应该等于 2”),第二个参数是一个实际执行的函数。

断言库有很多种,mocha 并不限制使用哪一种。上面代码引入的断言库是 chai,并且指定使用它的assert断言风格。因为这更接近其它语言的风格。

运行一下测试代码:

filehelper_1472143702070_9

大概流程就是这样,详细的可以查看官方文档。随便说一下,WebStorm 和 PhpStorm 原生支持 mocha,设置一下即可右键运行时直接调用 mocha 来运行当前 JS 单测文件:

20160826005459

20160826005634

20160826005739

单测已经写好了,怎么能让测试驱动我开发呢?这时候就需要 karma(https://github.com/karma-runner/karma)登场了。如 github 主页上所说,Karma 不是一个测试框架,也不是一个断言库,仅仅启动一个 http server,并通过你熟知的测试框架生成运行测试的HTML。Karma 支持的测试框架非常多,如前文介绍,我们这里选择的是 mocha 测试框架和 chai 断言库。

首先安装 karma,然后使用karma init my.conf.js命令生成配置文件。生成文件的过程是交互式的,很友好,注意选择测试框架是 mocha。选错了也没关系,配置文件之后可以手动编辑,大概长这样:

比较重要的几个参数:

  • frameworks:我们这里需要 mocha 和 chai。框架必须预先通过 npm install karma-xxx --save-dev 命令安装好,支持的框架详见:https://www.npmjs.com/browse/keyword/karma-adapter
  • files:可以配置通配符把源代码和测试代码加载进来。
  • browsers:需要启动的浏览器
  • autoWatch:观察文件是否变动,如有变动则重新运行单测。

最后使用命令karma start my.conf.js运行即可。但这里我一直失败,遇到如下这些错误:

这是因为上文的代码使用的是node的require()语法,karma是在浏览器端运行的,当然不支持了。如果你的源代码使用的是 AMD、CMD 加载器,测试代码也要使用 requirejs 等框架加载源代码模块。这里我们将源代码和测试代码稍微改造一下就行了:

成功运行:

20160826014133

karma 可以启动不同的浏览器,所以还可以做兼容性测试。

我修改一下源代码,karma 能自动监听到文件变动,然后显示单测结果,这样我就能实时知道代码是否有问题。

karma

当然这只是 karma 的一个功能,还有很多实用功能等待后续学习。

参考资料:

测试框架 Mocha 实例教程,http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html

[JavaScript] Test Suit 4 – Test Runner – Karma,http://veck.logdown.com/posts/248538-javascript-test-suit-4-test-runner-karma

典型的用户注册页面短信验证逻辑漏洞

用户注册是一个网站基本的功能,做过 web 开发的基本上都写过这个功能,但很多漏洞都出在这个页面上面。这里先不讨论密码加密存储,传输安全等问题,就说说注册页面的功能逻辑。

2016-05-22_000624

如上图的新浪微博注册页面,一般的注册页面都需要填写账号、密码等信息,为了防止恶意注册,都还有一个验证码,这几乎是一个注册页面的标配了。现在有些注册页面会多一个手机验证,防止恶意注册的同时也变相完成了实名制的红头文件要求,但有时候问题就出在这里。

2016-05-18_020524

上图这个注册页面,中规中矩,看似没什么问题,填写一些信息后点击下一步:

2016-05-18_020915

很常见的操作,POST 请求将信息带到下一个页面(校验了图形验证码),跳过来的同时已经给手机发了短信验证码,到目前为止没什么问题,用户体验还不错。不过发现页面上还有一个重新发送的按钮,点击一下发现直接调用 /sendRegMsg 接口发送了短信,接口只接收一个手机号参数,无其它参数。这里就是第一个漏洞:短信发送接口无权限验证,可被恶意调用造成经济损失,还可被利用于“短信炸弹”,而且这家厂商本身就是提供短信验证码服务的,估计“短信炸弹”效果更改。要解决这个漏洞也很简单,加个验证码就行了,但这里可能又会有一个坑(后面细说)。实际短信验证码为 4 位,提交企业名称等信息时也没有图形验证码校验:

2016-05-18_021422

那就好办了,直接跑个小脚本暴力提交(最多9999次)即可:

2016-05-18_024823

这里就是第二个漏洞了,任意手机号注册(一大波薅羊毛党将要来袭):

2016-05-18_024610

这两个漏洞都是很好修复的,影响也不大,但若安全意识薄弱,逻辑没有理清楚会造成修复不彻底。比如在短信重新发送操作那里加了一个图形验证码,发送短信和提交时都会做校验,但若你调用一次短信发送接口后图形验证码没有重置,我就可以拿着这一个正确的图形验证码一直调用发送短信接口(重放攻击)也能达到恶意调用和“短信炸弹”的目的,提交信息时也可以用这一个的正确图形验证码暴力提交。还有的为了限制短信发送频率,点击发送短信后将发送按钮设置为 disabled="disabled",然后设置一个定时器 60s 后恢复,这完全也是自己骗自己。

一种比较好的做法是每发一次短信图形验证码都重置,短信验证码填写失败一定次数后重置校验 session,后面任何输入都返回错误。

其实这个漏洞很鸡肋也很低级,但目前这种逻辑漏洞已经成为主要的问题,看似低级,但很难避免,往往影响还很大。而且我们可以看到图形验证码在整个流程中扮演了很重要的角色,但你的图形验证码真的安全吗?答案是否定的,百度贴吧和 12306 “变态”的验证码都是几天内就被破解了,甚至还有人工打码平台,可谓是道高一尺魔高一丈。安全,还是仍重道远呀。

推荐阅读:

黑产揭秘:“打码平台”那点事儿 http://www.freebuf.com/articles/others-articles/104536.html

参考资料:

无(不要问为什么知道这类漏洞)

kanqiu_26461760_2144148040__20160126154003

Nginx HTTPS 配置实践

00 前言:

博客使用 HTTPS 已经有一段时间了,最近把当时的配置过程梳理、整理了一遍,希望能对有需要的同学有所帮助。

01 概念介绍:

最近 HTTPS 是越来越流行了,前一阵子的百度,最近的淘宝、知乎,都已经开启了全站 HTTPS 的时代。HTTPS 即 Hypertext Transfer Protocol Secure,简单理解就是在 HTTP 协议上做了一层加密。具体的握手过程和加密协议以后弄透彻了再写写。

无利不起早,那么 HTTPS 的好处是什么呢?我个人觉得有以下几点:

  1. 数据传输加密,防止信息被窃取。用户的密码、认证码、个人信息、表单数据等。对于移动 APP 甚至桌面端应用程序来说,由于 Web 化的趋势,目前 HTTP 协议应用很多,传输的信息加密越来越重要。
  2. 防欺诈。当你使用 EV 级别证书(http://www.wosign.com/EVSSL/index.htm)时,浏览器网址显示和一般 SSL 证书不一样。可以对比下:https://www.paypal.com/signin/ 和 https://www.baidu.com/。使用此类证书的网址,主流的浏览器都会在地址栏显示企业的名称(支持中文),增加了网站信任度,进一步防止用户被钓鱼网站欺骗,当然证书的价格也更贵一些。
  3. 防止劫持。这点可以说是国内各大公司下决心支持 HTTPS 的主要原因了。一旦被劫持,用户访问速度会变慢,看到的内容会被篡改,比如商家在百度投放的广告被替换成竞品的广告,淘宝的商品被带上小尾巴(返利链接),甚至直接跳转到 JD。这些不光是损害用户的利益,更是直接影响公司收入。
  4. 使用新的技术。比如 SPDY/HTTP 2 的基础都是 HTTPS,新协议对移动端 APP 性能提升帮助很大:《双11手淘前端技术: H5性能最佳实践》

当然 HTTPS 也不是完全的安全,不提高安全意识还是同样会被攻击:《使用 HTTPS 的网站也能被黑客监听到数据吗?》

02 证书申请:

证书申请的大概流程是,首先在自己的服务器使用 openssl 命令(尽量使用高版本的 OpenSSL,除了能规避漏洞,还能使用更高级的密钥加密/交换算法,提升安全性和性能)生成 csr 和 key 文件,命令如下:

如命令参数所示,RSA 的加密强度是 2048 位,使用了更安全的 sha256(SHA-2)哈希算法(SHA-1算法在2016年将不被证书厂商和现代浏览器支持)。

-subj 参数指定证书申请者的信息,如果不直接使用此参数,也会有交互式的命令提示填写这些参数。此部分具体参数释义:

Country Name (2 letter code) [GB]: 输入国家地区代码,如中国的 CN

State or Province Name (full name) [Berkshire]: 地区省份

Locality Name (eg, city) [Newbury]: 城市名称

Organization Name (eg, company) [My Company Ltd]: 公司名称

Organizational Unit Name (eg, section) []: 部门名称

Common Name (eg, your name or your server’s hostname) []: 申请证书域名,如果是泛域名证书,则应该填写 *.example.com

Email Address []: 电子邮箱

生成的 csr 文件包含了主要的证书信息,key 文件主要包含了密钥交换和加密等信息(私钥,注意保存)。然后把 csr 文件提交给 CA 厂商,中间还有一些信息验证过程,一般几天后(根据证书类型不同,所需时间不一样)就会发一份邮件给你,邮件附件带有签好的证书文件 example_com.crt(注意后缀,内容也变了),同时会给你CA的证书链,CA.crt(通常是 3 个文件,包括 2 个中间证书和 1 个根证书,按照证书信任链由下到上,把文件合并cat COMODOECCDomainValidationSecureServerCA.crt COMODOECCAddTrustCA.crt AddTrustExternalCARoot.crt > CA.crt,统称CA.crt)。

03 配置详解:

后面的步骤各个 HTTP Server 就有点不一样了: Continue Reading…

PHP MySQL 持久连接(mysql_pconnect)

先来一段 PHP 连接 MySQL 的经典代码:

这没什么问题,一直这样用。后来看文档发现有个函数 mysql_pconnect(打开一个到 MySQL 服务器的持久连接)。官方文档是这样介绍的:

首先,当连接的时候本函数将先尝试寻找一个在同一个主机上用同样的用户名和密码已经打开的(持久)连接,如果找到,则返回此连接标识而不打开新连接。

其次,当脚本执行完毕后到 SQL 服务器的连接不会被关闭,此连接将保持打开以备以后使用(mysql_close() 不会关闭由 mysql_pconnect() 建立的连接)。

我们都知道建立 MySQL 连接比较消耗资源,要是能复用连接那不是牛逼了。但是 PHP 不是脚本语言吗?运行完了啥都没了,怎么维持持久连接呢?

实践是检验真理的唯一标准,还是试一试吧:

通过 URL 访问 pconnect.php,页面加载完成后,等待 10s ,新开浏览器再次访问。在 MySQL 命令行运行「show full processlist;」查看建立的连接:

2015-10-15_001413

感觉并没有复用呀,再次访问还是重新建立了连接(从 Time 字段的值可以看出),那么试试访问 connect.php :

2015-10-14_230252

很明显脚本执行完成连接就断了,这也是 mysql_connect 的特征,符合常理。但是怎么没有出现 mysql_pconnect 的特征呢?这种时候没办法,只能仔细再看文档,发现这么一句话:

注意,此种连接仅能用于模块版本的 PHP。

Continue Reading…

jquery操纵checkbox/radio selected属性的问题

最近在做项目的时候遇到个问题,有一堆checkbox需要根据数据的不同(Ajax获取数据)每次选中的状态也不同。某一个checkbox可能会经历选中->取消选中->再次选中的过程。

很自然的使用了jquery代码:

但发现取消选中后无法再次选中。而审查元素却发现已经是checked=”checked”状态,但没有勾上,提交表单也没有选中。

20140914192042

大家可以运行下面这段代码感受一下:

后来一番谷歌和请教别人发现这是jquery的版本问题,jquery从1.9(1.6开始有prop方法)以后需要使用prop方法来设置checked属性。把上面那段代码引入的jquery版本改为1.8.1就可以运行了。详情:http://stackoverflow.com/questions/426258/how-do-i-check-a-checkbox-with-jquery

attr(attribute)和prop(property)翻译为中文时都有属性的意思,但两者是有区别的:

在一些特殊的情况下,attributes和properties的区别非常大。在jQuery1.6之前,.attr()方法在获取一些attributes的时候使用了property值,这样会导致一些不一致的行为。在jQuery1.6中,.prop()方法提供了一中明确的获取property值得方式,这样.attr()方法仅返回attributes。

http://www.javascript100.com/?p=877

http://api.jquery.com/prop/

顺带提一下判断checkbox/radio是否选中的3种方法:

php中require和include的区别之我见

require和include在各种编程语言中基本都存在,都是用来引入外部文件,但两者却不易区分。

其实从两个语句的字面意思很容易区别开来。

require有“需求”的含义,意思就是说用require引入的文件是必须要引入的,如果找不到这个文件会报一个错误,不能继续执行后面的语句。

include有“包括”的含义,意思就是用include引入的文件只是简单包括,如果找不到这个文件只会产生一个警告信息,还是会继续执行后面的语句。

基于这点区别,两者的应用场景就很清楚了。如果你引入的文件是必须的则建议用require。使用include的话,若此文件不存在,虽然后面的语句会继续执行但因为缺少必要组件还是会报错,而且可能会出现一些莫名其妙、不可预料的错误。

关于require和include的却别我认为搞清楚这一点就可以了,其它的一些细微差别没必要去彻底弄清楚。把精力过多的放在这些地方有点本末倒置。

还有一个就是require/include和(require/include)_once间的区别,加不加”_once”唯一的区别就是如果该文件中已经被包含过,则不会再次包含。如同此语句名字(_once)暗示的那样,只会包含一次。如果包含两次,PHP 5 会发出致命错误因为函数已经被定义,但是 PHP 4 不会对在 return 之后定义的函数报错。

那是不是就推荐使用(require/include)_once呢?其实不然,检查一个文件是否已经被包含是需要一个过程的,会消耗系统资源,使用require/include效率更高。还有一个原因,使用(require/include)_once说明你对自己的代码不熟,没信心。而当一个项目需要大量使用(require/include)_once来保证不出错的话,说明这个项目的代码已经非常脆弱了,可能其它一点小错误就会造成整个系统的崩溃。

参考资料:风雪之隅《再一次, 不要使用(include/require)_once》

一个典型的汇编程序

在进入大学之前知道计科院的会学一些编程语言,诸如C语言、C++之类。没想到到了大二居然学了一门叫汇编语言的课程。越学越发现汇编语言真是操蛋,什么寄存器呀,存储器呀乱七八糟的一大堆,搞个基本的a+b都那么麻烦。完全没有C语言那么好用。

然而存在即合理,汇编语言存在至今自然有它的用处。汇编语言最大的特点是直接和底层的硬件相关,能针对不同的硬件编程,且执行效率高。用于无法使用高级语言进行编程的地方,如电饭锅的温控程序。汇编语言还能写操作系统的内核,反汇编别人的程序。当然还有考试要用。

考试过后闲来无事写了个简单的、典型的汇编程序。其中包括基本指令、分支和循环、数组、过程(使用堆栈传递参数)、宏等。包括了大部分的知识点和考点。程序是用来求5个数中最大的数。 Continue Reading…