免费 CDN —— 将整个网站打包成一张图片

日期 : 2021-09-13 18:09:47作者 : 熊人

免费空间

不少人为了节省网站流量费用,使用图床、相册作为免费 CDN 。但这只适用于图片资源,其他例如 JS/CSS/HTML 文件显然无法使用。

那么有没有什么办法,让任意文件都能通过图床加速?

编码解码

其实很简单,将文件编码成图片像素即可,运行时再通过 JS 进行解码。

但这么做是否需要修改网站资源的加载方式?其实不需要。我们可通过 Service Worker 拦截网页所有 HTTP 请求,然后使用资源包中的文件进行响应,这样无需任何修改即可使用。

安装过程

既然要调用 Service Worker,那么是否得在网页中加入额外的脚本?其实不需要。我们可使用这样一个机制 —— 用户访问任意路径,后端都返回 Service Worker 安装页;安装完成后页面自动刷新,之后的请求即可被 Service Worker 拦截,然后从资源包中提取文件。

实现也很简单,网站最终只需发布 404.html 和 sw js 即可 —— 前者用于 Service Worker 安装,后者用于 Service Worker 脚本。这样用户访问任意路径,即可先安装 Service Worker,自动刷新后出现原始内容,例如:

fanhtml5.github.io/

首次访问时页面会自动刷新,然后出现原始文件。

该站点原始文件有多个文件,总共数 MB ( github.com/fanhtml5/test-site )

但最终发布的文件只有两个,压缩后不到 2kB ( github.com/fanhtml5/fanhtml5.github.io )

安全稳定

为了提高稳定性,可使用多个站点的图片,如果加载失败或超时则使用下一个;为了提高安全性,可对数据进行 Hash 校验,不正确则使用下一个。

为了防止泄露 Referrer 以及绕过外链限制,我们可使用 referrer-policy 对 Referer 进行隐藏。

为了防止 Origin 请求头泄露站点域名,我们可通过 Data URI 创建的 iframe 加载图片,这样该请求头就变成了 null 值,最大程度减少隐私泄露。

标签 :