轩枫阁

GitHub 宣布启用 SRI 策略，用来减少由「托管在 CDN 的资源被篡改」而引入的 XSS 等风险。很多小伙伴对此表示关注。那么 SRI 究竟是什么，如何使用 SRI，它的适用场景和局限性是什么？本文逐一解答。

SRI 是什么？

SRI 是 Subresource Integrity 的缩写，一般按照字面意义翻译为：子资源完整性（草案），它也是由 Web 应用安全工作组（Web Application Security Working Group）发布。草案地址见这里。

Web 性能优化中很重要的一点是让请求提前结束，让可缓存的资源走 CDN 是最通用的做法。CDN 服务提供商通过分布在各地的节点，让用户从最近的节点加载内容，大幅提升速度。但是 CDN 的安全性一直是一个风险点：对于网站主来说，让请求从第三方服务器经过，由第三方响应，安全方面肯定不如自己服务器可控。

我们知道 CSP（Content Security Policy） 的外链白名单机制可以在现代浏览器下减小 XSS 风险。但针对 CDN 内容被篡改而导致的 XSS，CSP 并不能防范，因为网站所使用的 CDN 域名，肯定在 CSP 白名单之中。这时候，SRI 就应运而生了。它通过对资源进行摘要签名机制，来保证外链资源的完整性（不被篡改）。

目前支持 SRI 的浏览器有 Chrome 45+ 和 FireFox 43+。IE Edge 表示考虑中，将其列入了需求池，接受用户投票。CanIUse 网站目前尚未提供 SRI 支持度数据，但是已经有人提了 Issue，后续应该会加上。 查看全文

前言

前端时间做过一些带有不少逻辑的H5，例如微信运动，如果用H5开发，大概包含排行榜、profile页、点赞页等页面。不简单页不复杂，主要包含3个页面的切换，可以前进后退，是一个单页应用。但是又比较简单，只需要使用一个前端路由就可以解决。

Q.js代码不到百行，使用起来很简单。

Q.js

Q.js 是一个炒鸡轻量的前端单页路由框架。

http://mouto.org/#!54092

轻量、快速、极简

为了更好的利用缓存以及更少的后端支援，Q.js放弃了 HTML5 State，通过#!格式的 url hach 重现了 url 路由功能。

1. 无 JavaScript 库依托，可随意搭配使用
2. 源代码不及百行压缩后 834byte
3. 支持 IE6+ Chrome Safari FF
4. 未做情况判定，使用 Q.js 必然会注册 window.Q

查看全文

前言

本文将介绍如何将基于WP的项目，结合前端工作流tmt-workflow，实现开发、体验、部署上线流程，流程简单，自定义程度高。

tmt-workflow

tmt-workflow 是一个基于 Gulp(v4.0)、高效、跨平台(macOS & Win)、可定制的前端工作流程。

介绍文章：tmt-workflow前端工作流 查看全文

前言

在日常的前端开发中，我们会遇到 LESS/SASS 编译、CSS 前缀自动补全 、CSS压缩、 图片压缩、JS合并压缩、布署发布 等各种各样的操作。通常，我们都会根据实际情况定制一个流程性的工具来实现所有常规的功能，即所谓的前端工作流。tmt-workflow为微信TmT团队研发的工作流。

tmt-workflow

tmt-workflow 是一个基于 Gulp(v4.0)、高效、跨平台(macOS & Win)、可定制的前端工作流程。

现已推出 GUI 桌面工具：WeFlow，无需安装任何环境依赖即可使用，官网下载：http://weflow.io/

功能特性

• 自动化流程
  • Less/Sass -> CSS
  • CSS Autoprefixer 前缀自动补全
  • 自动生成图片 CSS 属性，width & height 等
  • CSS 压缩 cssnano
  • CSS Sprite 雪碧图合成
  • Retina @2x & @3x 自动生成适配
  • imagemin 图片压缩
  • JS 合并压缩
  • EJS 模版语言
• 调试 & 部署
  • 监听文件变动，自动刷新浏览器 (LiveReload)
  • FTP 发布部署
  • ZIP 项目打包
• 解决方案集成
  • px -> rem 兼容适配方案
  • 智能 WebP 解决方案
  • 去缓存文件 Reversion (MD5) 解决方案

除了以上的各种功能，其余特性：

1. 基于 Gulp4 ，超好用的流程化(gulp.series, gulp.parallel)控制 API，更高的性能
2. 跨平台的，支持 Win 和 Mac，满足各类开发者
3. 所有项目共享一个 node_modules，只需一次 npm install 即可
4. 可定制的，你可以根据自己的需求修改实现你自己想要的功能
5. 自带 rem适配方案、智能 Webp 解决方案、去缓存文件 Reversion (MD5) 解决方案

查看全文

前言

在网站开发初期，做重构的过程中，经常要展示一些网站内容相关的不固定图片，如Banner图、产品图，这时候从设计稿中切图下来放上去会比较繁琐。常用的技巧是使用占位图。

占位图片即通过指定宽高或文字动态生成指定尺寸的图片。有很多提供类似服务的网站，接下来一一推荐。

纯色类

temp.im

简介：im temp placeholder images, feel free to use it anywhere. (with https supported)。

temp.im占位图片，可以在任何地方免费使用，支持HTTPS。

特点：支持定义尺寸、颜色。使用七牛CDN服务，访问超快，推荐使用，微信UI工程师@hzlzh 作品。

使用：

• http://temp.im/200
• http://temp.im/754×754
• http://temp.im/466×466/4CD964/fff

查看全文