2 3 前端计算 和 安全防御 @佳辰 | 2015.10 about:me { name: "佳⾠辰", nick: "EtherDream", from: "阿⾥里巴巴安全部" } 前端开发 安全研究 Geeker about:history CPU: 2G x 4 RAM: 8G 今天 CPU: 500M RAM: 64M Hello World 1995 2000 2005 2010 2015 前端利⽤用 ⺴⽹网络攻击 Great Cannon 在线挖矿 ⽐比特币、虚拟币 科学计算 最⼤大梅森素数、SETI 其他 …. 分担后端 传统 不信任客户端的⼀一切数据，所有计算服务端完成 尝试 设计合理的机制，利⽤用前端资源，分担后端⼯工作 案例：富⽂文本过滤的思考 …… 富⽂文本跨站 跨站攻击，第⼀一次接触⺴⽹网络安全 反思 完整的富⽂文本过滤，应当有如下流程： HTML 字符串 -> DOM 树 过滤 ⽩白名单 外的 节点 和 属性 DOM 树 -> HTML 字符串 简化的流程 出于性能考虑，⼤大多在 字符串层⾯面 过滤 HTML 字符串 -> 正则 HTML 语法复杂 能想到的 ⼤大⼩小写、引号、分隔符 … 想不到的 浏览器私有特征、系统字集、特殊字符 … 前端过滤 渲染前 HTML 字符串 -> DOM（交给 DOMParser ） A B 富⽂文本 HTML 干净的 DOM ⽤用户提交 后端 只储存，不过滤 ⽂文档 启⽰示 浏览器 擅⻓长的问题，浏览器 ⾃自⼰己解决。 换⼀一种⾓角度 跨站攻击难以杜绝，不如增加 预警 机制。 可疑元素 外链资源 前端监控 本地存储 测试痕迹 …… 第⼀一时间发现问题 启⽰示 ⽤用户优势：数量⼤大、成本低、覆盖⼲⼴广 ⾼高性能计算 性能，⼀一直是脚本语⾔言的软肋 解释执⾏行 JavaScript Java C 汇编 动态类型 沙箱限制 传统⽅方案 — Flash 计算⽅方⾯面，Flash 拥有众多优势 强类型 编译型 多线程 跨平台 JIT 装机量 前沿⽅方案 — asm.js 使⽤用语法糖，约定⼀一套 强类型 规范。 asm.js x|0 x >>> 0 => => int x uint x 通过⼯工具⽣生成，例如：emscripten 可接近 Native 的性能