探究浏览器复制

前两天收到公司安全组反馈的邮件,说他们在扫描官网某个页面时,发现跨站脚本攻击(XSS漏洞)。经排查,发现是此页面包含了复制粘贴功能,为了兼容各大浏览器,该复制粘贴功能是用开源项目 zeroclipboard 实现的,初步怀疑该 XSS漏洞 是由 zeroclipboard 引发的。

在查阅了相关资料和翻看 zeroclipboard 项目源码之后,果然,在2014年初,github上一位名为masatokinugawa的用户给 zeroclipboard 项目组的开发人员发了一封邮件,描述了此安全漏洞。

全文»

Javascript 自定义事件

作为异步驱动编程模型,事件无疑是JavaScript不可或许的部分。

在JavaScript所定义的事件中,它们被分为多种类型。有 表单事件(focus、blur、submit等)、window事件(load、unload、resize等)、鼠标事件(mousedown、mousmove、mousup等),键盘类型(keydown、keyup等)。

针对移动端,还有触摸类型,比如 touchstart、touchmove、touchend、touchcancel 等。另外,HTML5还有各类API事件,比如 dragstart、drag、dragend 等。

全文»

使用 JSON Server 构建数据接口

目前来说,前后端分离 是web开发的主流模式。前端负责页面制作、交互实现,后端负责数据API的开发。两者并行处理,各司其职,项目开发完毕后一起联调,出了问题也能快速定位。

而通常情况下,后端真实数据的研发往往滞后于UI界面的开发。所以,在项目开始前,前后端会约定好数据格式,这样,前端就可以先利用mock数据进行界面开发。一般的做法,是在本地新建多个json文件,然后利用ajax请求相应的文件,待后端数据接口开发完毕,直接将json地址换成真实接口地址即可。

全文»

webpack 里的刷新

webpack 里涉及了多种形式的刷新,其中包括文件监听,修改内容时,页面的整体刷新,还有修改组件时,只针对组件的局部刷新。从最基本的 webpack -w,到 webpack-dev-serverhtml-webpack-plugin 的结合,再到 Hot Module Replacement,它们都有其对应的应用场景。

注:本文的内容是对上一篇文章【webpack】的补充与提高,所以,项目结构和文件是相同的。

全文»

webpack

本文有些内容会前后穿插,需仔细阅读 loader 和 plugin 部分。

说到前端自动化工具,我们总会想到它的这些功能:

编译

将sass、less这类css预处理语言,编译成浏览器可识别的css,如: sass less -> css

将es6,es7这类下一带JavaScript标准或者react的jsx模板,编译成浏览器可识别的 es5,如:es6,es7,coffee,ts,jsx -> es5

全文»