整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

这5个大坑,在HTML5开发过程中你遇到过吗?

这5个大坑,在HTML5开发过程中你遇到过吗?

作为初入职场的我们,在学习与工作中,总是会遇到不同的挫折。虽然有些错误与某一个具体的行为相关,但有些错误却是所有HTML5开发人员都需要面对的挑战。因此,通过研究、体验和观察,千锋武汉HTML5培训老师总结了HTML5开发人员常犯的5个错误,以及应如何避免这些错误,分享给大家。

错误一、转件所谓“应该能行”的代码

错误:无论是Java,还是在服务器上运行的代码,开发人员都需要测试并确认它是否可以正常工作,而不是在部署了之后,就认为它应该就能从一而终地运行。

影响:不经过适当错误检查的网站就是对最终用户耍流氓。不仅会极大地影响用户体验,而且其错误消息内容的类型可能会给黑客线索来渗透这个站点。

如何避免:是人都会犯错,这个哲理同样适用于编码。使用Java,一定要实施好的技术来防止并抓住错误。虽然这篇文章描绘了用Java编码Windows应用程序,但是大部分的内容也适用于HTML5开发,许多提示都很不错!另一种能让代码变得可靠又能在未来变化中存活下来的方法是单元测试。

如果我们够仔细,那么就能捕捉到服务器端的代码失败,而不被用户发现。只显示必要的信息,并且一定要确保设置友好的错误页面,如HTTP 404s。

错误二、写分叉代码

错误:本着支持所有浏览器和版本的崇高理念,开发人员立志创建可对任意可能情况作出回应的代码。代码中if语句成堆,所有方向都有分叉。

影响:随着浏览器新版本的更新,代码文件会变得越来越笨拙和难以管理。

如何避免:实现代码的功能检测和浏览器/版本检测。功能检测技术不仅可以显著减少代码量,还更易于阅读和管理。不妨考虑使用如Modernizr这样的库,不仅有助于功能检测,还能自动帮助提供不能跟上HTML5和CSS3速度的旧版浏览器的反馈支持。

错误三、非响应式设计

错误:假设开发/设计人员在相同尺寸的显示器上开发网站。

影响:当在移动设备或在非常大的屏幕查看网站时,用户体验要么很难看到页面的重要方面,要么甚至要时刻注意着不导航至其他网页。

如何避免:响应式的思维方式。在网站中使用响应式设计。这里有一些关于这方面的实用教程,包括响应式图片,还有一个非常受欢迎的库,那就是Bootstrap。

错误四、网站过多刷新

错误:创建的网站需要为每一个互动而全面刷新页面。

影响:类似于页面臃肿(参见#4),页面加载时间的性能会受到影响。用户体验缺乏流畅性,并且每次互动都可能导致网页短暂(或长时间)的复位。

如何避免:快速避免这种情况的一个方法就是,通过测定回发到服务器的内容是否是真正需要的。例如,当不依赖服务器端资源的时候,客户端脚本可用于提供直接结果。你也可以应用AJAX技术或进一步使用单页的应用程序“SPA”方法。流行的Java库/框架,如JQuery、KnockoutJS和AngularJS,能让这些方法的采用变得容易得多。

错误五、做了太多的无用功

错误:开发人员花了很长的时间来创建web内容。大量的时间花在了重复的任务上,或者自己敲代码写了很多。

影响:初始网站的发布和后续的更新时间过于冗长。如果其他开发人员也在在做同样的工作,却用了更少的时间和精力,那么你的开发价值显然就低了。手动劳动很容易出现错误,而排除故障错误需要更多的时间。

如何避免:探索你的选择。在开发的每一个阶段考虑使用新的工具和新的流程技术。例如,你目前使用的代码编辑器相比SublimeText和Visual Studio,如何?不管你使用的是什么样的代码编辑器,你最近有好好钻研它的功能吗?也许只投入稍稍一点时间去仔细阅读文档,就可以发现做事的新方法,为今后节省一个又一个小时的时间。例如,在这篇文章中,扩展Visual Studio可以为web开发人员提高生产效率。

不要错过网上可用的帮助工具!例如,检查在dev.modern.ie上的工具以简化测试(跨多个平台和设备)以及排除故障。

你也可以通过实现流程自动化以减少时间和错误。这方面的例子是使用Grunt工具,例如它的自动化功能可以减小文件(见第4点)。另一个例子是Bower,可以协助管理库/框架(参见第9点)。至于web服务器本身?在例如Microsoft Azure Web Apps的帮助下,你可以快速创建一个网站,几乎所有的开发场景都可以很轻轻松松地规模化到你的业务中!

最后结语

通过识别这些常见的错误,HTML5开发人员可以避免很多让其他人饱受煎熬的挫折。我们不仅需要承认错误,还应该清楚错误的影响,并采取措施避免错误,这样才能有更好的开发表现——并有信心完成任务!如果你对HTML5感兴趣,就赶快来学吧。

想成为黑客嘛?或者,红客,骇客,白客?那你会编程吧。

什么?你不会?

没事,我推荐你几款游戏,这几款游戏可以边玩,边练习编程

《人力资源机》

《人力资源机》是一款益智解谜类游戏。人力资源机是一款非常有挑战性的数学逻辑游戏,在人力资源机中文版游戏中你需要利用数学的逻辑来进行闯关,帮助你的上司来解决问题,而且这个游戏的难度呈指数型增长,因为这款游戏吧,基本上是教你:如何编程。

《CodeCombat》

CodeCombat》是一个HTML5角色扮演游戏(RPG),这款游戏可以教你基本的编程概念在CodeCombat中,你扮演一个英雄,需要通过游戏中不同等级的冒险。第一关是Kithard Dungeon,里面涵盖了编程的基本概念。整个冒险过程中你都面临着编程的挑战,如果通过了,你会解锁下一关,并获得经验点,经验点可以用来提升英雄的能力。

《Code Hunt》

《Code Hunt》是一个由Microsoft Research开发的HTML5科幻主题游戏。

Code Hunt支持Java和C#两种语言。你可以在游戏中学习到包括算法、循环和条件表达式等编程概念。你也可以通过阅读Code Hunt设计手册来扩展其他关卡

《Screeps》

这个游戏是一个开放的策略游戏,在游戏中你控制的单位被称为creeps ,它可以帮你获得资源、建立自己的领地等等。作为一个多人在线游戏,这意味着你的creeps会被其他creeps所包围

《FightCode》

在FightCode中,目的很简单:就是创建一个能够击败其他玩家机器人的机器人,通过编写JavaScript代码。例如,当某个事件发生时,你可以通过 .rotateCannon()方法来旋转你的大炮。

好了今天就到这,关注何天,只分享干货

着WEB应用的日益丰富,越来越多的传统企业开始使用WEB应用来开展在线业务,与此同时,黑客也将攻击技术研究的重点转到了WEB应用方面,从而加剧了WEB应用的安全风险。

  • 2021年2月,国内某知名投资机构遭遇黑客攻击,投资者个人和财务信息恐被窃取,此次数据泄露事件将导致公司该财年成本增加。
  • 2021年4月,某知名计算机厂商遭到了勒索软件攻击,勒索软件团伙REvil成功入侵宏碁的系统,并公布了企业部分的财务电子表格、银行对账单,索要的赎金达到5000万美元。

同时有数据显示,有约98%的网站曾经遭受黑客攻击,黑客的袭击一直是行业性的问题,从互联网发展至今从未间断过。

本次将分享基于业务安全的Web测试,将分为6个板块来进行演示介绍。分别为:基于业务的安全测试,暴力破解,篡改登录用户名信息,截包篡改手机短信/E-mail验证码、横向越权—查看与修改、删除、CSRF token。

基于业务安全的测试

举个例子:在一个电商企业的系统中,假设现有库存货品20个,单价为30元,买家现有资金100元,购1个,那么当前库存为19个,买家所剩资金为70元。若在代码编写阶段没有控制购买数量只能大于0的话,可能会出现一种情况,客户可以在购买数量栏填写负数,如-3,就会出现剩余数量为22,客户剩余资金为160的情况。该漏洞产生的根本原因是没有控制用户输入的购买数量必须大于0,这就是所谓的基于业务安全的漏洞。

在《性能之巅》一书中的阐述了这么一个观点:知识可以分为已知的已知的知识;已知的未知的知识和未知的未知的知识。我们把已知的未知改为未知的已知。根据业务安全测试可一一对应:

已知的已知=已知的已经出现的BUG,即该BUG已经出现过,已有应对方法,只需实施修改即可;

未知的已知=未知的已经出现的BUG,即已经出现在程序的BUG,但还没有找到,可通过脚本式测试或者探索式测试来应对;

未知的未知=未知的没有验证的模块,即未出现的BUG,但有出现的可能性。

通过已知的bug可预知新的bug的出现,可通过探索式测试,找到并在软件开发测试之前进行以预防为主的测试。例如要基于Python的Djiango内的Web应用框架编写代码,那么已经可知当访问数据库时,不要使用传统的Python访问数据库的方式,而要采用Djiango自带的MTV的结构去访问数据库,就可避免SQL注入的缺陷。

对于TDD概念,是现代软件开发中非常重要的概念之一,以测试用例为驱动的测试方法,要求开发人员,开发出符合测试用例的程序,然后通过测试用例对程序进行验收,这被叫做“测试先行的开发”。

但并不一定都是自动化测试,可以根据脚本来进行测试,也可以基于Word或者excel格式的文本化的用例来进行测试,只需要将事先写好的测试用例供开发人员参考,可以在开发阶段进行就避免了,这样争取做到测试用例中出现的bug不出程序中发现。

但是如何发现BUG主要看传统安全测试与基于安全的测试的区别,而传统的安全测试是以预防为主的,业务安全测试是以测试为主的。

暴力破解

暴力破解——Burp suite测试工具。

步骤:

1、设置internet网络代理:在浏览器中设置代理经常会遇见一些bug,因此不建议使用浏览器设置。使用控制面板设置网络代理,首先打开控制面板,点击网络和internet,再点击INTERNET选型,点击局域网设置,勾中代理服务器下的两个设置,并设置地址为127.0.0.1,端口为8888;取消自动配置下的两个设置,即可点击确认,确认后再检查一遍确认无误之后代理设置即完成。

2、启用Burp suite:安装Burp suite后,Burp suite需要安装Java环境才可以运行 需要先安装JDK1.8版本,再通过汉化启动,启动进入Burp suite。

3、禁用拦截请求:在代理工具下的截断功能中关闭拦截请求,变为拦截禁用。

4、修改代理监控器:在代理工具下的选项功能中改变默认端口,默认端口为8080端口,与tomcat是冲突的,因此把监听端口改为8888,并选择指定地址。

5、启动被测程序:打开被测程序,并用浏览器进入该程序。

6、进入登录页面:通过Command(命令提示符号)窗口,输入IP config,将IP config中显示无线局域网适配地址复制,到登录页面上将地址127.0.0.1改为该登录地址,再次登录,由于传输过程中,使用了SHA256进行传输,所以选择用户名与密码时可发现,密码会变得很长。

7、启用拦截:成功登录后就可以开始抓包,将拦截禁用改为拦截请求,启用后开始拦包。

8、登录操作:返回登录页面输入用户名密码登录,发现页面不变。

9、拦截包:因为包已被Burp suite直接拦截。

10、发往测试器:将拦截的包发送至intruder,在测试器中会对默认选项进行标记,成为参数,我们只需要针对用户名和密码进行暴力破解,将不需要进行参数化的选项前的§删除,由于存在CSRF token,需要把值保持一致,最后剩下两个参数:用户名与密码。

11、设置攻击类型:这里选用集束炸弹攻击,攻击类型有两种:音叉攻击与集束炸弹。音叉攻击是用户名与密码一一对应的,需要两组字典,每组字典中的一行对应另一组的对应行;集束炸弹是在账号密码均未知的情况下,对他们同时进行暴力破解,需要两组字典,每组字典的账号,密码都会去匹配另一组的账号所有的密码。

12、载入攻击字典:再点击有效负荷,清屏后载入事先设置好的用户名和密码。

13、设置有效负载处理:密码传输过程中需要进行SHA256加密处理,所以在有效负载处理中选择合适的Hash算法。

14、开始攻击:以上步骤设置完毕,就可以开始攻击。若破解不成功,在“响应”的body里会看到“用户名或者密码错误”,若破解成功,则响应代码是直接302反向跳转。使用Burp suite进行暴力破解,就这个案例,可参考字节长度或者状态来判断是否成功,没有成功破解的是直接返回登录页面,因此字节数较长,而破解成功的字节数不需要跳转,因此字节数比较短。

暴力破解的注意事项:

1、 不要使用浏览器自带的代理设置,选择 “控制面板”中的internet-连接中的设置。

2、 不用勾选“使用自动配置脚本”。

3、 打开Burp suite,先禁用拦截,配置环境,环境配置完毕,再启用拦截。

4、 如下图,“起动中”前的√一定要勾上。

5、 截包必须使用真实IP地址,不要使用127.0.0.1或localhost,用Command里面的用IP config。

6、 破解字典是区分大小写的。

暴力破解——JMeter测试工具

打开控制面板,启动程序,用网页打开测试程序能否使用,确认能使用后,打开JMeter,在登录界面打开事先准备好的脚本,由于JMeter无法使用集束炸弹,因此使用音叉方法来进行,需要一个用户名对应一个密码,然后进行发包。

在登录验证界面可查看,登录验证字体是绿色的即是破解成功,红色的则是失败。找到成功破解的绿色登录验证,再通过Debug Sampler找到用户名与密码。

注意所有通过Burp suite进行测试的工作均可以通过JMeter实现。

暴力破解看似对白帽黑客并无用处,实际上并非如此,一般程序都是由用户自行设置用户名与密码的,企业可以先行对产品进行一次暴力破解,筛选出过于简单易被破解的密码,用邮件或者短信的方式通知用户修改用户名与密码,甚至可以设定强制性修改密码。若能提供这样的服务,则能给用户带来更好的体验感,这种情况下,测试可以作为一项增值业务。

篡改用户名登录信息

测试步骤:

1、 设置internet网络代理

2、 启动Burp suite

3、 进入登录页面

4、 输入用户名、密码

5、 拦截请求包

6、 修改cookies用户名为未注册用户

7、 发送请求包

8、 观察情况

输入已注册过的A的用户名密码进行登录,打开Burp suite,登录后抓包模块会被截取,在此输入登录信息,会看见A的用户名与密码的信息,用户名是放在username的cookie中的,点击“行动”选择发送到repeater中,在repeater里,可以改cookie-username为已有的另一用户名B,最终登录的是A的账号,而显示的是B的用户名。点击发送,可进入商品列表,若我们把用户名改为一个未注册过的用户,cookie中显示的是该新用户,发送后仍可进入商品列表。这就是存在的一个缺陷,对于此缺陷,可采用以下方法防御:

篡改用户名、密码

从正常的修改密码流程中使用Burp suite拦截发送用户名和手机号请求信息,修改手机号,并再次发送,然后观察它的表现。

用手机、短信或者邮件找回密码的方式都是类似的。在数据库中存有已注册用户的用户名、密码、邮箱、电话等信息,而且密码是通过SHA256进行加密的,是一个长字符串。当用户使用短信验证输入用户名与手机号时,若与数据库中信息一致,则会通过手机发回验证码,重设密码;若是在传输过程中,手机号码被截取,收到验证码后会在输入新密码时提示信息被截取,验证码错误。

再打开代理,Burp suite启用拦截,在网页中再次点击获取验证码,包就已被Burp suite拦截。点击“行动”选择发送给repeater,在repeater里,改变手机号码,再发送请求,在响应包中并没有显示用户名与密码,而是显示“注册的用户名和手机不匹配”请重新输入。这样就已经成功篡改用户名与密码,黑客可将验证码发送至自己手机,在通过这个页面获取密码,输入验证码,而后修改用户名与密码,手机、短信或者邮箱都可通过截取传送的信息进行篡改。

横向越权——查看、删除

横向越权指的是攻击者尝试访问或修改与他拥有相同权限的用户的资源。以上述电商网站为例:

查看:当登录A用户的账号后,我们可以查看该用户的各类信息,建立订单,拷贝订单URL地址,再登录B用户账号,逐一粘贴订单信息URL地址,查看是否有权限查看。

修改与删除:在A用户登录后拷贝修改用户配货信息地址后,建立订单,拷贝删除用户订单信息,再登录B用户账号,试图删除前面拷贝所得的A用户的信息。

CSRF token

破解CSRF token

为了防止DDOS攻击,一个用户一天只允许输入用户名密码3次,若是超过3次输入,则存在一个暴力破解的可能性,账号就会被封掉。黑客应对这一情况最常用的方法就是在本地复制地址,将action改为绝对路径,再通过Burp suite进行暴力破解,获取相应内容。

该方法采用的是通过一个token,在地址里加一个hidden字段,设置100个随机长度的字符串,此方法为Djiango的解决方案。

当我们往服务器或客户端发送请求时,带有一个middle ware hidden的字段,并其名为CSRF token的这么COOKIE的字段,发送至服务器后,服务器自动检测两个值是否相等,若相等,则返回Web匹配,否则返回403不匹配。

在这种情况下,可以人为在form表单中加一个hidden字段,但是在cookie中无法加,因此cookie中没有hidden字段,与100长度的字段不匹配,故而报403错误。

比如在JMeter中,可以通过正则表达式获得参数,将100长度的字符串的token值取代,获取到token里的字段后,通过建立一个cookie manager,往CSRF token中发送该字段,同时往csrfmiddleware里发送COOKIE token的值。这样两个值肯定是一样的,CSRF token被破解。

若使用python中的requests类来写接口测试,则可以将这100个字符串放在一个变量中,设在cookie里通过request post 传输,同时触发body里的username、password和一个hidden字段,此时两个值是相等的,CSRF token就能被破解。

Web的安全测试是一个很大的题目,在如今web应用发展越来越蓬勃的时刻,随着手机技术、html5带来了许多新的挑战和机遇,Web安全技术也应该紧跟时势的发展,不断演变地更好。