摘要: 一个小时如何编写一个支持七牛上传的 markdown 编辑器的客户端。继续上次的内容，本次内容主要是讲解代码优化，如何进行模块化的拆分。写文章，尤其是技术类的文章，我们是需要将文章进行一个条理性的说明，我依旧是采用按要点来说明。要点模块化把这个放在签名，主要是为了说明一个宏观的思维，人干事情是需要一种思维的。万事万物皆有模块，人的手、足、眼、鼻、耳等等都是模块，东西南北是模块，天、地都是模块。文章的分段落，分篇章也是模块，咱们前端的拆分文件当然也是模块，在一个文件中，写不同的函数，也是一种模块。就是看你把这个模块拆分有多细，最总要的是要合适，适度。我承认我在 ndpeditor 中，是有些过度模块化了，当然是有原因的，原因看下面。优化原因习惯，应该说是有代码洁癖。看到代码不整齐，没有逻辑的代码，就想动手整一整。把简单文件当作一个项目去做，项目是需要有结构意识。代码的可读性，代码是让机器执行，但需要人来读的。开源的代码，更应该有可读性。功能的可扩展性，当我们基础结构搭建好了，之后代码的可扩展功能就越强。…其实还有很多，但是切记，切记，切记，不要过渡设计，不要过度优化。代码拆分优化前代码demo.js 这个文件，我添加了些注释，看一遍应就能懂了，200行的代码。优化后代码优化后的代码我拆分如下几个：https://github.com/zhaopengme/ndpediter/tree/master/app/js 代码内容到这里直接看，都是几十行的代码，不多，而且我的注释足够，看看就懂了。模块划分app.js 应用启动模块。config.js 配置文件的保存读取。editor.js 也属于一个核心部分，就是对编辑器进行初始化，设置，事件处理。index.js 应用加载启动模块，其实也可以和app.js进行合并的。util.js 工具类。麻雀虽小五脏俱全。至少我保证了一个完整项目结构的完整性。结语本篇内容不多，关键内容还就是，代码要有逻辑，有条理，分模块，当然，还需要多看代码，多练。下一篇，说下 node-webkit 的打包发布，内容也不会太多，但是合并到本篇，和本篇的内容不符，还是单独拆分来吧！
摘要: 一个小时如何编写一个支持七牛上传的 markdown 编辑器的客户端。如何能从零快速学习 nodejs，并付诸实践。介绍说是一个小时，前前后后加上代码重构，优化代码，也用了一两天得时间，但在写第一版代码的时候，的确用了很短的时候。https://github.com/zhaopengme/ndpediter技术点在做这个的时候，出发点是因为 hexo 编辑的时候，我需要使用七牛的图片外链，但是没有一个好用的支持七牛图片外链的工具。就有了自己动手做一个念头，在技术选择的时候，我最熟悉的是后台 java，前端 javascript 的搭配，因为要写一个客户端，首先想到的时候用纯 java 来实现，之前我也用 java 写过一个支持 markdown 的笔记软件 jnote ,或者做一个 web 网站，再加一个浏览器的壳，在几年之前，我写过这样的一个 demo https://github.com/zhaopengme/jbrower-demo，就是用 Mozilla 内核的浏览器框架，嵌入 web 网站的方式。可目前已经有了 node-webkit 这样的技术，就不需要的我之前的想法。用了node-webkit，搭配最好的就是 nodejs 了，我就放弃了用 java 来实现的方式，虽然我不会 nodejs，但这也给了我一个学习的 nodejs 的机会了。那就开始上手了。在内嵌 web 系统和纯 nodejs 的选择在开始设计的时候，依照我原来的想法，是采用内嵌一个 web 系统，通过 node-webkit 来打开内嵌的 web 系统来实现的，所有我开始学习 express 的文档。看了 http://www.expressjs.com.cn/ 文档后，我尝试着使用纯 nodejs 的方式来实现我的需要，读写文件，图片保存，图片上传，发现也是可以的，其实开头想想也是可以的，只是自己一个惯性思维导致的。技术干货列表nodejsnode-webkitqiniu-nodejs-sdkyeomangenerator-node-webkitlayereditormd1. nodejs主要用来实现文件的读写，图片的上传。2. node-webkit基于node.js和chromium的应用程序实时运行环境，可运行通过HTML(5)、CSS(3)、Javascript来编写的本地应用程序。从网上扒的介绍，为了占位。3. qiniu-nodejs-sdkhttps://github.com/qiniu/nodejs-sdk.v6七牛的 nodejs 的 api。4. yeomanhttp://yeoman.io/Yeoman 是 Google 的团队和外部贡献者团队合作开发的，他的目标是通过Grunt（一个用于开发任务自动化的命令行工具）和Bower（一个HTML、CSS、Javascript和图片等前端资源的包管理器）的包装为开发者创建一个易用的工作流。Yeoman 的目的不仅是要为新项目建立工作流，同时还是为了解决前端开发所面临的诸多严重问题，例如零散的依赖关系。也是从网上扒的介绍，也是为了占位。Yeoman 可以说是对已经成为体系的流程工具的封装，更简单说是”一键开发，一键部署”等等。是 generator-node-webkit 使用的前提。5. generator-node-webkithttps://github.com/Dica-Developer/generator-node-webkitgenerator-node-webkit 是基于 Yeoman 的工具，可以”一键”创建 node-webkit 的开发环境，”一键”打包环境。6. layerhttp://layer.layui.com/一个 jquery 的弹出框插件，我觉得它好用，就单独拉出来了，好东西，值得推荐。比如我得图片上传 配置 关于 保存提醒等都是使用它的。7. editormdhttps://github.com/pandao/editor.md编辑器实现的核心，实现编辑器最为主要的组成部分，在各种 markdown 实现的各种版本中，最优秀的编辑器之一，10分推荐。在开始实现之前，最好先看一下以上的几种技术的说明，方便我们理解。技术实现篇环境准备nodejs 环境作为 hexo 的使用者，nodejs 肯定会有的，即使没有，那自己安装吧，这个很容易。https://nodejs.org/。我装得 mac 版，不会告诉你用 mac 装很多东西都是用 brew 可以一键安装的。yeoman 安装npm install -g yo 这是官方的安装，有可能安装成功了，之后 node-webkit 安装会出现问题，最好用这个 npm i -g yo generator-karma。generator-node-webkit 安装npm install generator-node-webkit -g 用 npm 都是一行命令搞定，很容易吧！用 mac 的童鞋，有没有装 brew 呢？装个 brew 吧！无论是装13还是为了自己开发方便。生成开发环境以上 yeoman 和 generator-node-webkit 我们采用的都是安装全局的办法。1. 自动创建目录结构yo node-webkit 就能生成好我们需要的环境目录了,好吧！这里录个 gif 给大家看看。注意mac 现在基本都是64位的了，不要选择32位的。这个要下载 对应平台的资源，比较慢，我就停止录了。当前创建完成后，就会有下面这样的界面了。2. 下载依赖npm install & bower install 按照提醒，就可以把相关的依赖全部安装了。如果提醒没有 bower，那就 npm install bower -g，bower 也是个常用工具，也作为全局安装吧。3. 下载项目依赖前几个步骤，可以叫做工程依赖，就是每一个这样的工程，都需要这样的步骤的，这个步骤是说，我们项目需要的依赖。比如 qiniu-nodejs-sdk 就是我们项目需要的，可以通过 npm install qiniu来安装，如果我们需要 bootstrap，那么就可以用 bower install bootstrap或者npm install bootstrap…
漂亮的loading页面,用 SVG 画，非常漂亮，适合用在 Web APP 中.demo[repo owner=”codrops” name=”PageLoadingEffects”]
第1集:锦绣华南 http://t.cn/zWZF3Er第2集:云翔天边 http://t.cn/zWZF13x第3集:神奇高原 http://t.cn/zWZFB3A第4集:风雪塞外 http://t.cn/zWZFrmJ第5集:沃土中原 http://t.cn/zWZFdYW第6集:潮涌海岸[去旅行]
from: http://www.html-js.com/article/2134Underscore 简介Underscore 是一个JavaScript实用库,提供了类似Prototype.js的一些功能,但是没有继承任何JavaScript内置对象。它弥补了部分jQuery没有实现的功能,同时又是Backbone.js必不可少的部分。Underscore提供了80多个函数,包括常用的: map, select, invoke — 当然还有更多专业的辅助函数,如:函数绑定, JavaScript模板功能, 强类型相等测试, 等等. 在新的浏览器中, 有许多函数如果浏览器本身直接支持,将会采用原生的,如 forEach, map, reduce, filter, every, some 和 indexOf.个人感受Underscore 是一个我坚持看完的js源代码，他简单、易懂、实用，细心观察就会发现，每个函数都很简短，作为开源阅读源码，我相信Underscore是不错的选择笔记1：大量的这种方法，应该是 防止原始方法被篡改，同时加快运行速度，而且在严格模式，也不让通过arguments.callee 调用相关方法的原因吧var ArrayProto = Array.prototype, ObjProto = Object.prototype, FuncProto = Function.prototype;// Create quick reference variables for speed access to core prototypes.varpush = ArrayProto.push, slice = ArrayProto.slice, concat = ArrayProto.concat, toString = ObjProto.toString, hasOwnProperty = ObjProto.hasOwnProperty;2：void 0，开始还好奇为啥用void 0，是undefined 的缩写？后来一打听才知道，原来undefined在旧版本的浏览器中是不可以被赋值的，而新版本的浏览器是可以被赋值的，为了准确的判断，所以就有了void 0_.first = _.head = _.take = function(array, n, guard) { if (array == null) return void 0; if ((n == null) || guard) return array[0]; if (n < 0) return []; return slice.call(array, 0, n);};3：代码短小精干Underscore 代码短小精干没的说，真是精品除了 eq 这个方法长点外 其他方法都很短4：遗憾 这次走读 没记录笔记没调试本菜鸟第一次走读源码 同时欢迎大家把源码走读 放到这个专栏下 O(∩_∩)O~
作者是阿里巴巴安全工程师@卷成团变成个球的CasperKid君 。文章是CK在2011年编写的，在当下仍具有非常重要参考价值。很多web 站点存在上传验证方式不严格的安全缺陷,是web 渗透中关键的突破口 ，站长小伙伴要注意哦！0x00 上传检测流程概述0x01 客户端检测绕过(javascript 检测)0x02 服务端检测绕过(MIME 类型检测)0x03 服务端检测绕过(目录路径检测)0x04 服务端检测绕过(文件扩展名检测)黑名单检测白名单检测.htaccess 文件攻击0x05 服务端检测绕过(文件内容检测)文件幻数检测文件相关信息检测文件加载检测0x06 解析攻击网络渗透的本质直接解析本地文件包含解析.htaccess 解析web 应用程序解析漏洞及其原理0x07 上传攻击框架轻量级检测绕过攻击路径/扩展名检测绕过攻击文件内容性检测绕过攻击上传攻击框架结语下载: Upload_Attack_Framework.pdf
from: http://www.plhwin.com/2014/06/13/web-security-sql/Web安全简史在Web1.0时代，人们更多是关注服务器端动态脚本语言的安全问题，比如将一个可执行脚本（俗称Webshell）通过脚本语言的漏洞上传到服务器上，从而获得服务器权限。在Web发展初期，随着动态脚本语言的发展和普及，以及早期工程师对安全问题认知不足导致很多”安全血案”的发生，至今仍然遗留下许多历史问题，比如PHP语言至今仍然无法从语言本身杜绝「文件包含漏洞」（参见这里），只能依靠工程师良好的代码规范和安全意识。伴随着Web2.0、社交网络、微博等一系列新型互联网产品的兴起，基于Web环境的互联网应用越来越广泛，Web攻击的手段也越来越多样，Web安全史上的一个重要里程碑是大约1999年发现的SQL注入攻击，之后的XSS，CSRF等攻击手段愈发强大，Web攻击的思路也从服务端转向了客户端，转向了浏览器和用户。在安全领域，一般用帽子的颜色来比喻黑客的善与恶，白帽子是指那些工作在反黑客领域的技术专家，这个群体是”善”的的象征；而黑帽子则是指那些利用黑客技术造成破坏甚至谋取私利造成犯罪的群体，他们是”恶”的代表。“白帽子”和”黑帽子”是两个完全对立的群体。对于黑帽子而言，他们只要找到系统的一个切入点就可以达到入侵破坏的目的，而白帽子必须将自己系统所有可能被突破的地方都设防，以保证系统的安全运行。这看起来好像是不公平的，但是安全世界里的规则就是这样，可能我们的网站1000处都布防的很好，考虑的很周到，但是只要有一个地方疏忽了，攻击者就会利用这个点进行突破，让我们另外的1000处努力白费。常见攻击方式一般说来，在Web安全领域，常见的攻击方式大概有以下几种：1、SQL注入攻击2、跨站脚本攻击 - XSS3、跨站伪造请求攻击 - CSRF4、文件上传漏洞攻击5、分布式拒绝服务攻击 - DDOS说个题外话，本来这篇文章一开始的标题叫做 「Web安全之常见攻击方法与防范」，我原本想把上面的这5种方法都全部写在一篇文章里，可是刚写完第一个SQL注入攻击的时候，就发现文章篇幅已经不短了，又很难再进行大幅度的精简，所以索性把Web安全分成一个系列，分多篇文章来呈现给大家，下面你看到的就是第一篇「Web安全之SQL注入攻击的技巧与防范」。SQL注入常见攻击技巧SQL注入攻击是Web安全史上的一个重要里程碑，它从1999年首次进入人们的视线，至今已经有十几年的历史了，虽然我们现在已经有了很全面的防范对策，但是它的威力仍然不容小觑，SQL注入攻击至今仍然是Web安全领域中的一个重要组成部分。以PHP+MySQL为例，让我们以一个Web网站中最基本的用户系统来做实例演示，看看SQL注入究竟是怎么发生的。1、创建一个名为demo的数据库：CREATE DATABASE `demo` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;2、创建一个名为user的数据表，并插入1条演示数据：CREATE TABLE `demo`.`user` (`uid` INT( 11 ) NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT '用户uid',`username` VARCHAR( 20 ) NOT NULL COMMENT '用户名',`password` VARCHAR( 32 ) NOT NULL COMMENT '用户密码') ENGINE = INNODB;INSERT INTO `demo`.`user` (`uid`, `username`, `password`) VALUES ('1', 'plhwin', MD5('123456'));实例一通过传入username参数，在页面打印出这个会员的详细信息，编写 userinfo.php 程序代码：<?phpheader('Content-type:text/html; charset=UTF-8');$username = isset($_GET['username']) ? $_GET['username'] : '';$userinfo = array();if($username){ //使用mysqli驱动连接demo数据库 $mysqli = new mysqli("localhost", "root", "root", 'demo'); $sql = "SELECT uid,username FROM user WHERE username='{$username}'"; //mysqli multi_query 支持执行多条MySQL语句 $query = $mysqli->multi_query($sql); if($query){ do { $result = $mysqli->store_result(); while($row = $result->fetch_assoc()){ $userinfo[] = $row; } if(!$mysqli->more_results()){ break; } } while ($mysqli->next_result()); }}echo '<pre>',print_r($userinfo, 1),'</pre>';上面这个程序要实现的功能是根据浏览器传入的用户名参数，在页面上打印出这个用户的详细信息，程序写的这么复杂是因为我采用了mysqli的驱动，以便能使用到 `multi_query` 方法来支持同时执行多条SQL语句，这样能更好的说明SQL注入攻击的危害性。假设我们可以通过 http://localhost/test/userinfo.php?username=plhwin 这个URL来访问到具体某个会员的详情，正常情况下，如果浏览器里传入的username是合法的，那么SQL语句会执行：SELECT uid,username FROM user WHERE username='plhwin'但是，如果用户在浏览器里把传入的username参数变为 `plhwin';SHOW TABLES-- hack`，也就是当URL变为 `http://localhost/test/userinfo.php?username=plhwin';SHOW TABLES-- hack` 的时候，此时我们程序实际执行的SQL语句变成了：SELECT uid,username FROM user WHERE username='plhwin';SHOW TABLES-- hack'_注意：在MySQL中，最后连续的两个减号表示忽略此SQL减号后面的语句，我本机的MySQL版本号为5.6.12，目前几乎所有SQL注入实例都是直接采用两个减号结尾，但是实际测试，这个版本号的MySQL要求两个减号后面必须要有空格才能正常注入，而浏览器是会自动删除掉URL尾部空格的，所以我们的注入会在两个减号后面统一添加任意一个字符或单词，本篇文章的SQL注入实例统一以 `-- hack` 结尾。_经过上面的SQL注入后，原本想要执行查询会员详情的SQL语句，此时还额外执行了 SHOW TABLES; 语句，这显然不是开发者的本意，此时可以在浏览器里看到页面的输出：Array( [0] => Array ( [uid] => 1 [username] => plhwin )[1] => Array ( [Tables_in_demo] => user ))你能清晰的看到，除了会员的信息，数据库表的名字`user`也被打印在了页面上，如果作恶的黑客此时将参数换成 `plhwin';DROP TABLE user-- hack`，那将产生灾难性的严重结果，当你在浏览器中执行`http://localhost/test/userinfo.php?username=plhwin';DROP TABLE user-- hack` 这个URL后，你会发现整个 `user` 数据表都消失不见了。通过上面的例子，大家已经认识到SQL注入攻击的危害性，但是仍然会有人心存疑问，MySQL默认驱动的mysql_query方法现在已经不支持多条语句同时执行了，大部分开发者怎么可能像上面的演示程序那样又麻烦又不安全。是的，在PHP程序中，MySQL是不允许在一个mysql_query中使用分号执行多SQL语句的，这使得很多开发者都认为MySQL本身就不允许多语句执行了，但实际上MySQL早在4.1版本就允许多语句执行，通过PHP的源代码，我们发现其实只是PHP语言自身限制了这种用法，具体情况大家可以看看这篇文章「PHP+MySQL多语句执行」。实例二如果系统不允许同时执行多条SQL语句，那么SQL注入攻击是不是就不再这么可怕呢？答案是否定的，我们仍然以上面的user数据表，用Web网站中常用的会员登录系统来做另外一个场景实例，编写程序login.php，代码如下：<?phpif($_POST){…