• web前端安全机制问题全解析

      web前端安全方面技术含有的东西较多,这里就来理一理web安全方面所涉及的一些问题。 一、xss与sql攻击 入门级的安全知识,攻击手段和防范方法这里略过,不过注意的是xss分存储型xss、反射型xss、mxss(dom xss),主要防范思路是检查验证要输入到页面上的内容是否安全。 二、csrf 入门级的安全知识,攻击手段和防范方法这里略过 三、请求劫持与HTTPS 3.1、请求劫持   请求劫持现在主要分为两种,DNS劫持与HTTP劫持: DNS劫持: DNS劫持就是通过劫持了DNS服务器,通过某些手段取得某域名的解析记录控制权,进而修改此域名的解析结果,导致对该域名的访问由原IP地址转入到修改后的指定IP,其结果就是对特定的网址不能访问或访问的是假网址,从而实现窃取资料或者破坏原有正常服务的目的。DNS劫持通过篡改DNS服务器上的数据返回给用户一个错误的查询结果来实现的。   DNS劫持症状:在某些地区的用户在成功连接宽带后,首次打开任何页面都指向ISP提供的“电信互联星空”、“网通黄页广告”等内容页面。还有就是曾经出现过用户访问Google域名的时候出现了百度的网站。这些都属于DNS劫持。 再说简单点,当你输入google.com这个网址的时候,你看到的网站却是百度的首页。 http劫持: 在用户的客户端与其要访问的服务器经过网络协议协调后,二者之间建立了一条专用的数据通道,用户端程序在系统中开放指定网络端口用于接收数据报文,服务器端将全部数据按指定网络协议规则进行分解打包,形成连续数据报文。   用户端接收到全部报文后,按照协议标准来解包组合获得完整的网络数据。其中传输过程中的每一个数据包都有特定的标签,表示其来源、携带的数据属性以及要到何处,所有的数据包经过网络路径中ISP的路由器传输接力后,最终到达目的地,也就是客户端。   HTTP劫持是在使用者与其目的网络服务所建立的专用数据通道中,监视特定数据信息,提示当满足设定的条件时,就会在正常的数据流中插入精心设计的网络数据报文,目的是让用户端程序解释“错误”的数据,并以弹出新窗口的形式在使用者界面展示宣传性广告或者直接显示某网站的内容。列入本地的fiddler为一种劫持 请求劫持唯一可行的预防方法就是尽量使用HTTPS协议访问。 3.1、公钥和私钥   什么是https,这里不再解释了,简单理解就是通过SSL(Secure Sockets Layer)层来加密http数据来进行安全传输。 那使用HTTPS是怎样进行安全数据传输的? 先看个有意思的问题:   A、B两个人分别在两个岛上,并且分别有一个箱子,一把锁,和打开这把锁的钥匙(A的钥匙打不开B手上的锁,B的钥匙也打不开A的锁)。此时A要跟B互通情报,此时需要借助C的船运输,C是一个不可靠的人,如果A直接把情报送给B或把情报放在箱子里给B,都可能会被C偷走;如果A把情报锁在箱子里,B没有打开A锁的钥匙无法获得情报内容。请问有什么办法可以尽可能快的让A和B互通情报。   这就是公钥和私钥的问题了,答案比较简单,也对应了公钥和私钥在https中的应用过程。   公钥(Public Key)与私钥(Private Key)是通过一种算法得到的一个密钥对(即一个公钥和一个私钥),公钥是密钥对中公开的部分,私钥则是非公开的部分。公钥通常用于加密会话密钥、验证数字签名,或加密可以用相应的私钥解密的数据。通过这种算法得到的密钥对能保证在世界范围内是唯一的。使用这个密钥对的时候,如果用其中一个密钥加密一段数据,必须用另一个密钥解密。比如用公钥加密数据就必须用私钥解密,如果用私钥加密也必须用公钥解密,否则解密将不会成功。—百度百科 3.2、Https的通信过程 整个通信过程如下图,以公钥加密方式为例: 1、客户端发送https请求,告诉服务器发将建立https连接 2、服务器将服务端生成的公钥返回给客户端,如果是第一次请求将告诉客户端需要验证链接 3、客户端接收到请求后’client finished’报文串通过获取到的服务器公钥加密发送给服务器,并将客户端生成的公钥也发送给服务器 4、服务器获取到加密的报文和客户端公钥,先使用服务器私钥解密报文,然后将报文通过客户端的公钥加密返回给客户端。 5、客户端通过私钥解密报文,判断是否为自己开始发送的报文串;如果正确,说明安全连接验证成功,将数据通过服务器公钥加密不断发送给服务器,服务器也不断解密获取报文,并通过客户端公钥加密返回给客户端验证。这样就建立了不断通信的连接。 3.3、Https协议头解析 以打开 https://github.com/ 的过程为例,请求通用头部如下 1 2 3 4 5 Request URL:https://github.com/ouvens\n Request Method:GET...


  • Promise与异步

      接触过promise的的都知道它的应用场景和用途,Promise可以用来避免异步操作函数里的嵌套回调(callback hell)问题,因为解决异步最直接的方法是回调嵌套,将后一个的操作放在前一个操作的异步回调里,但如果操作多了,就会有很多层的嵌套。   Promise的实现方式比较多,有丰富的第三方库,ES6也已经原生支持了Promise,jquery中也有$.Deferred()等可以解决异步嵌套问题。 先给下Promise学术点的描述:   promise代表一个异步操作的执行返回状态,这个执行返回状态在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。 这使得异步方法可以像同步方法那样返回值:异步方法会返回一个包含了原返回状态的 promise 对象来替代原返回状态。 一、Promise的适用场景   Promise并非适用于所有的异步场景,例如事件的绑定,某个程度上Promise有点类似事件的监听回调,当触发某个操作时进行后面特定的逻辑。但Promise只能执行一次,且需要前面特定的操作执行完成才会进行下一步,一般分成功和失败两种场景,成功或失败后会立即执行响应函数。这就很适合判断一个比较耗时的操作是否最终执行成功的场景,就如我们通常理解的ajax网络请求、读取localstorage等操作。 二、Promise的表现   如果使用回调方法处理多个操作的异步场景,判断某个操作成功或失败的控制在于声明的匿名函数里面,使用Promise对象则可以重新定义异步执行的状态和控制逻辑。   promises的最重要的特点就是它把我们处理任何函数调用的成功或者失败的方式规范成了可预测的形式,特别是如果这个调用实际上的异步的。   Promise中有几个状态: pending: 初始状态。 非 fulfilled 或 rejected。 resolved: 成功的操作。也有的成为fulfilled 。 rejected: 失败的操作。   不同的Promise差异基本表现如下: 构造Promise对象 new Promise().resolve() 或者 new Pomise(function(resolve, reject) {}) 是否有 .done() .fail() .always() 等方法 是否有Promise.all()方法 是否有isRejected() isResolved() .then() return 结果链式的 三、几种规范的promise 2.1、Promise的Promise/A 规范和Promise/A+规范 先看下规范的地址: http://wiki.commonjs.org/wiki/Promises/A...


  • 2015-2016前端知识体系

    2015-2016前端知识体系 获取原图 一、框架与组件 bootstrap等UI框架设计与实现 伸缩布局:grid网格布局 基础UI样式:元素reset、按钮、图片、菜单、表单 组件UI样式:按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告 响应式布局:布局、结构、样式、媒体、javascript响应式 第三方插件:插件管理 jQuery、zepto使用原理以及插件开发 支持amd、cmd、全局变量的模块化封装 $.fn.method = function(){} mvc/mvvm框架原理设计,vue/angular/avalon等 directive设计:html、text、class、html、attr、repeat、ref,可扩展 filter设计:bool、upperCase、lowerCase,可扩展 表达式设计:if-else等实现 viewmodel结构设计:例如数据,元素,方法的挂载与作用域 数据更变检测:函数触发,脏数据检测、对象hijacking polymer/angular2思想与设计思路 import技术 template和script引入方式 css样式命名空间隔离 简单复用第三方库 reactjs原理与使用 virtual dom单向数据绑定 js执行语法方式 UI由状态控制 commonJS/AMD/CMD 模块引入 模块定义 模块标识 UMD解决不同规范兼容性的问题,例如webpack封装 模块懒执行(CMD)与与预执行(AMD) loadJs模块化加载原理与实现 创建script标签,需要id映射到资源url onload加载模块队列判断 全部加载完成后触发 加载失败问题优化 requirejs、modjs、seajs polyfill、shim原理与实现 polyfill提供了开发者们希望浏览器原生提供支持的功能特性 shim将新的API引入到旧的环境中,且仅靠旧环境中已有的手段实现 virtual Dom、Incremental DOM 1.用js对象树表示dom树结构,根据该对象树构建dom树 2.状态改变时,重新构建对象,和旧的对象对比,记录两个对象树差异...


  • 下一代前端打包工具与tree-shaking

    一、js模块化打包概述   随着js模块化规范AMD、CMD、commonJs的出现,模块打包工具也在不断的出现和演变,依次出现了r.js、browserify和webpack,过去的2015年就是webpack大行其道的一年,又随着reactjs、es6的出现,webpack更是深入人心,因为其人性化的特点和友好性,确实给前端模块打包带来了极大的方便。   不过今天并不是重点讲webpack,而是rollup,要了解webpack,可以看我的另一篇文章:http://ouvens.github.io/frontend-build/2015/04/01/webpack-tool.html ,在讲rollup之前先来看看几种之前的前端打包方案。 二、js模块化打包方案   先区分下几个不同概念:包管理工具(package manager)、模块加载器(module loader),打包工具(bundler),包管理器指管理安装js模块的这类,例如npm、bower、jspm这些,模块加载器指向requirejs、modjs、seajs这些,模块加载器又主要遵循AMD、CMD、Commonjs三种规范,打包工具则指r.js、browserify、webpack这类。 1、r.js   在grunt结合requirejs的年代,r.js作为通用标配的打包工具普世存在,当然现在应该也有些团队在用。   r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小、减少对服务器的文件请求。先来分析一个官网的例子: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 { appDir: '../www', baseUrl: 'js/lib', paths: { app: '../app'...


  • web前端响应式设计总结

    web前端响应式设计总结 一、响应式概述   响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。这里总结了响应式网站设计需要涉及到的相关的内容,有不正确的欢迎大家指正。谈到响应式网站,目前比较主流的做法是通过前端通过判断userAgent来做页面的302跳转。 那么问题来了,使用userAgent的问题: 依赖设备本身浏览器或设备特点,例如尺寸,屏幕分辨率等。 需要分配多个站点页面跳转适配浏览器。例如:ke.qq.com,m.ke.qq.com,来分别存放PC端和移动端的页面。 多了一次跳转,跳转之前的逻辑不能少,这样用户体验就慢了   当然我们也都知道像bootstrap这种ui框架也是响应式的,即写一份代码,在浏览器和移动端都能跑,然而事实上这些事远远不够的,而且在移动端为什么要加载那么多PC端的内容?   我们理解的是完整的响应式页面的设计不仅仅是通过屏幕尺寸来动态改变页面容器的宽度等,其实大部分人通常理解的都停留在这个方面。完整的响应式网站的实现其实需要考虑到以下这些问题:响应式布局、响应式html和css、响应式媒体、响应式javascript。   这些页面在移动端和PC端使用同一个页面(大家可以用chrome浏览器一下),这样就避免了多余的302跳转,另外页面布局、逻辑、图片等内容都通过不同浏览器来适应。下面具体讲下各个部分的实现所涉及的内容。 二、响应式布局   响应式布局是用来兼容浏览器分辨率,清晰度,横屏,竖屏的页面元素布局方式。一般使用栅格方式实现。时间思路有两种,一种是PC端优先,另一种是以移动优先,PC端作为一个扩展。由于移动端的资源比较优先,一般比较推荐从移动端扩展到PC端,这样就避免了在移动端加载多余的PC端内容。响应式布局主要可以结合几种实现方式: 1,移动端布局控制 使用 viewport标签在手机浏览器上控制布局控制不缩放等通用定义。 1 2 <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1" /> <meta name="apple-mobile-web-app-status-bar-style" content="blank" /> 由于这些定义在移动端必须定义,这里还是需要定义,用到PC端也不影响,只是有些多余。 2,普通元素的栅格布局 对于普通的div布局,使用了通用简单的栅格布局,相信这个大家都知道原理: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .row{ width: 100%; } .row...


  • 九种浏览器端缓存机制知多少

      浏览器缓存(Browser Caching)是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户。浏览器端缓存的机制种类较多,总体归纳为九种,这里详细分析下这九种缓存机制的原理和使用场景。打开浏览器的调试模式->resources左侧就有浏览器的8种缓存机制。    一、http缓存   http缓存是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求情况下,浏览器可以根据协议头判断从服务器端请求文件还是从本地读取文件,chrome控制台下的Frames即展示的是浏览器的http文件级缓存。以下是浏览器缓存的整个机制流程。主要是针对重复的http请求,在有缓存的情况下判断过程主要分3步: 判断expires,如果未过期,直接读取http缓存文件,不发http请求,否则进入下一步 判断是否含有etag,有则带上if-none-match发送请求,未修改返回304,修改返回200,否则进入下一步 判断是否含有last-modified,有则带上if-modified-since发送请求,无效返回200,有效返回304,否则直接向服务器请求    如果通过etag和last-modified判断,即使返回304有至少有一次http请求,只不过返回的是304的返回内容,而不是文件内容。所以合理设计实现expires参数可以减少较多的浏览器请求。 二、websql    websql这种方式只有较新的chrome浏览器支持,并以一个独立规范形式出现,主要有以下特点 Web Sql 数据库API 实际上不是HTML5规范的组成部分; 在HTML5之前就已经存在了,是单独的规范; 它是将数据以数据库的形式存储在客户端,根据需求去读取; 跟Storage的区别是: Storage和Cookie都是以键值对的形式存在的; Web Sql 更方便于检索,允许sql语句查询; 让浏览器实现小型数据库存储功能; 这个数据库是集成在浏览器里面的,目前主流浏览器基本都已支持;   websql API主要包含三个核心方法: openDatabase : 这个方法使用现有数据库或创建新数据库创建数据库对象。 transaction : 这个方法允许我们根据情况控制事务提交或回滚。 executeSql : 这个方法用于执行真实的SQL查询。    openDatabase方法可以打开已经存在的数据库,不存在则创建 1 var db = openDatabase('mydatabase', '2.0', 'my db', 2 * 1024);...


  • 一些前端编程题

    1,数组元素统计方法,统一数组中各个元素出现的次数,使用O(1)复杂度算法。 1 2 3 4 5 6 7 8 9 10 11 function makeCount(arr){ let countObj = {}; for(let item of arr){ if(countObj[item]){ countObj[item] ++; }else{ countObj[item] = 1; } } return countObj; } 2,计算目录/a/b/c/d/e.js和/a/b/f/g.js的相对目录。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15...


  • Koa框架实践与中间件原理剖析

      [转载]:http://www.cnblogs.com/Leo_wl/p/4684633.html。本文写的很深刻易懂,转来收藏。   Koa是Express原班人马打造的一个更小,基于nodejs平台的下一代web开发框架。Koa的精妙之处就在于其使用generator和promise,实现了一种更为有趣的中间件系统,Koa的中间件是一系列generator函数的对象,执行起来有点类似于栈的结构,依次执行。同时也类似于Python的django框架的中间件系统,以前苏千大神做分享的时候把这种模型称作为洋葱模型。   当一个请求过来的时候,会依次经过各个中间件进行处理,中间件跳转的信号是yield next,当到某个中间件后,该中间件处理完不执行yield next的时候,然后就会逆序执行前面那些中间件剩下的逻辑。直接上个官网的例子: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 var koa = require('koa'); var app = koa(); // response-time中间件 app.use(function *(next){ var start = new Date; yield next; var...


  • Nodejs下的ES6兼容性与性能分析

    ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问题,但大家仍很疑惑,使用ES6会有哪些兼容性问题。 一、Nodejs下ES6兼容性现状   之前写了es6通过Babel编译后的在浏览器端的兼容性问题《Babel下的ES6兼容性和规范》,随着范围的扩展,ES6在Nodejs上兼容性也有必要重新梳理下。   随着iojs的引入,新版的Nodejs开始原生支持部分ES6的特性,既然ES6在浏览器端使用需要使用babel等编译,在Nodejs总可以放心使用了吧。然而事实并非如此,为此在nodejs端,我也做了特性兼容性研究: ES6新特性在Nodejs下的兼容性列表 这里罗列下nodejs支持的新特性,没列出的新特性均为不支持。 https://iojs.org/en/es6.html https://kangax.github.io/compat-table/es6/ ES6特性 Nodejs兼容性 let,const,块 strict模式支持 class类 strict模式支持 Map,Set 和 WeakMap,WeakSet 支持 generators 支持 进制转换 支持 对象字面量扩展 支持 promise 支持 String对象新API 支持 symbols 支持 字符串模板 支持 可见,es6的新特性在Nodejs中比babel还要差,而新版的babel已经能够支持es6的90%新特性了~ 二、Nodejs ES6性能分析   尽管目前Node下使用ES6我们仍然会大失所望,但es6发展的趋势定是必然,这里还是有必要对ES6的原生性能做了详细的对比测试。测试基本方法: 1,对于重复操作循环执行100万次 2,所有程序运行在Nodejs下执行 3,环境描述 CPU: Interl(R) Core(Tm) i5-3470 CPU @ 3.2GHz 内存:4.00GB 操作系统: 64位操作系统 node版本:node...


  • javascript实现数据双向绑定的三种方式

    前端数据的双向绑定方法   前端的视图层和数据层有时需要实现双向绑定(two-way-binding),例如mvvm框架,数据驱动视图,视图状态机等,研究了几个目前主流的数据双向绑定框架,总结了下。目前实现数据双向绑定主要有以下三种。 github演示例子 1、手动绑定 比较老的实现方式,有点像观察者编程模式,主要思路是通过在数据对象上定义get和set方法(当然还有其它方法),调用时手动调用get或set数据,改变数据后出发UI层的渲染操作;以视图驱动数据变化的场景主要应用与input、select、textarea等元素,当UI层变化时,通过监听dom的change,keypress,keyup等事件来出发事件改变数据层的数据。整个过程均通过函数调用完成。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45...

公众号

加我赏红包,哈哈哈

公众号

欢迎关注 极限前端 公众号