分类 Web 下的文章

Web应用基于C/S(Client/Server)服务模型搭建:客户端发送请求,服务端负责响应。一般客户端就是浏览器,但可以向服务器发送请求的软件则远远不限于浏览器。Web服务器通常以公开的域名接收请求并提供服务,需要应对任何来源的请求。

保障Web应用的安全需要前后端配合,但主要还是服务端。服务端需要全面分析项目所实现的功能,对任何可能暴露漏洞、引发攻击的接口,都要提前拟定防御措施,由前后端共同配合实施,落实到位。

本文总结了Web应用最常见的6种漏洞,并对这些漏洞的危害、成因以及解决方案进行了简要分析。

  • SQL注入
  • 权限绕过
  • XSS
  • CSRF
  • SSRF
  • 邮件/短信轰炸

- 阅读剩余部分 -

ES7(ECMAScript 2016)推出了Async函数(async/await),实现了以顺序、同步代码的编写方式来控制异步流程,彻底解决了困扰JavaScript开发者的“回调地狱”问题。比如,之前需要嵌套回调的异步逻辑:

const result = [];
// pseudo-code, ajax stand for an asynchronous request
ajax('url1', function(err, data){
    if(err) {...}
    result.push(data)
    ajax('url2', function(err, data){
        if(err) {...}
        result.push(data)
    })
})
console.log(result)

现在可以写成如下同步代码的样式了:

async function example() {
  const r1 = await new Promise(resolve =>
    setTimeout(resolve, 500, 'slowest')
  )
  const r2 = await new Promise(resolve =>
    setTimeout(resolve, 200, 'slow')
  )
  return [r1, r2]
}

example().then(result => console.log(result))
// ['slowest', 'slow']

Async函数需要在function前面添加async关键字,同时内部以await关键字来“阻塞”异步操作,直到异步操作返回结果,然后再继续执行。在没有Async函数以前,我们无法想象下面的异步代码可以直接拿到结果:

const r1 = ajax('url')
console.log(r1)
// undefined

这当然是不可能的,异步函数的结果只能在回调里拿到。可以说,Async函数是JavaScript程序员在探索如何高效异步编程过程中踩“坑”之后的努力“自救”获得的成果——不是“糖果”。然而,读者小哥哥小姐姐可能有所不知,Async函数实际上是一个语法糖(果然是“糖果”吗?),它的背后是ES6(ECMAScript 2015)中推出的Promise、Iterator和Generator,我们简称“PIG”。本文就带各位好好品尝品尝这块语法糖,感受一个PIG是如何成就Async函数的。

- 阅读剩余部分 -

计算机科学领域有几个概念,乍一听很相似,但实际上差别非常大,它们是:迭代、遍历、枚举、递归、循环。

这些概念,对于写码为生的人而言,大部分都应该不陌生。但如果让谁确切地说出它们的含义,恐怕还真没有几个能够全都说对的。时间关系,本文就简单地对这些概念做一番梳理,供大家参考。

1. 迭代(iteration)

迭代,是一个重复的过程,目的是为了输出一系列值(可能是无穷序列)。每次重复的过程也叫一次“迭代”,一次迭代的结果,可以作为下一次迭代的起点。

2. 遍历(traversal)

遍历,一般是指对树形数据结构的操作,比如树遍历(也叫树搜索),就是对树形数据结构每个节点进行访问(为了检查和/或更新),且每个节点只访问一次。这种遍历是按照访问节点的顺序分类的,比如深度优先或宽度优先。

- 阅读剩余部分 -

Flexbox已经得到主流浏览器较新版本的广泛支持。对于某些需要兼容的旧版本浏览器,只要调整一下语法或提供商前缀,基本上也没问题。

两套属性

Flexbox有两套属性,一套针对可伸缩容器(flexible container),一套针对容器的直接子元素,或可伸缩项(flexible item)。

Flex容器,即应用display:flex;display: inline-flex规则的元素,可以接受如下属性:

  • flex-direction:指定主轴方向是水平还是垂直
  • flex-wrap:指定可伸缩项是否折行
  • flex-flow:以上两个属性的简写形式
  • justify-content:指定可伸缩项在主轴方向上的对齐方式
  • align-items:指定可伸缩项在辅轴方向上的对齐方式
  • align-content:指定多行可伸缩项在辅轴方向上的对齐方式

容器的直接子元素或者可伸缩项,可以接受如下属性:

  • flex-grow:指定当前项如何扩展
  • flex-shrink:指定当前项如何收缩
  • flex-basis:指定分配剩余空间之前当前项的初始大小
  • flex:以上三个属性的简写形式
  • order:指定当前项在容器中出现的次序

针对容器的属性非常容易理解,而针对可伸缩项的属性则不好理解。更确切地说,是flex-growflex-shrinkflex-basis属性不好理解。只有理解了这三个属性,你才能说自己真正理解了Flexbox。

- 阅读剩余部分 -

免责声明

本文是仓促之作,从构思到成文不足半天。文中没有提到很多优秀的库和框架,提前在此致歉,因为没时间搜集整理。但这不代表笔者对这些库和框架没有敬意。实际上,包括jQuery在内,我的敬意是给这些名字背后整个社区和贡献者的,当然包括库和框架的最初编写者,比如John Resig。

另外,时间所限,本文粗略、不严谨,甚至可能不客观地描绘了前端技术的发展脉络。对前端发展走向的这个判断,仅代表本人自己的主观认知,并非业界共识,恳请广大读者了解。千万不要以本文观点作为评价前端技术发展的依据。谢谢!

Github抛弃jQuery

2018年7月25日,Mislav Marohnić发了一条推文,宣布GitHub.com前端已经彻底删除了jQuery(下图)。而且,还自问自答地解释(低调炫耀),删除jQuery之后也没用其他框架,而是全部依赖原生API。

Github removing jQuery

很多人不知道,我和jQuery颇有渊源。大概11年前(2007年),因为“疯狂迷恋”jQuery,我在国内率先翻译了jQuery 1.1的文档。后来有同好基于我翻译的版本继续翻译了jQuery新版文档,还不忘记在“关于”中提到我(http://hemin.cn/jq/about.html):

关于jQuery文档

居然称我为“国内jQuery的引路人”,惭愧。但在当时jQuery文档奇缺的情况下,我翻译的中文版应该是帮到了不少同学的。后来,我还翻译了Learning jQuery(《jQuery基础教程》)。

正因与jQuery的这个不解之缘,GitHub.com彻底抛弃jQuery的消息才触动我想了一些事。于是,决定写这篇小文,以飨读者(但愿有用,哈哈)。

- 阅读剩余部分 -