V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
iqoo
V2EX  ›  分享创造

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

  •  3
     
  •   iqoo · 2021-09-13 16:16:30 +08:00 · 4081 次点击
    这是一个创建于 1165 天前的主题,其中的信息可能已经有所发展或是发生改变。

    免费空间

    不少人为了节省网站流量费用,使用图床、相册作为免费 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 值,最大程度减少隐私泄露。

    19 条回复    2021-09-22 16:58:37 +08:00
    iqoo
        1
    iqoo  
    OP
       2021-09-13 16:23:06 +08:00
    liuidetmks
        2
    liuidetmks  
       2021-09-13 20:31:10 +08:00
    把 js 编码成图片,如果图床压缩了,会有损失吗?
    mritd
        3
    mritd  
       2021-09-13 22:17:38 +08:00 via iPhone
    我擦 真的会玩
    yafoo
        4
    yafoo  
       2021-09-13 23:15:53 +08:00 via Android
    为了节省流量,真是拼了,以前也有各种节省流量的想法
    whileFalse
        5
    whileFalse  
       2021-09-14 08:07:32 +08:00 via iPhone
    有这技术多花点钱不行么
    i0error
        6
    i0error  
       2021-09-14 09:28:36 +08:00
    思路清奇......
    iqoo
        7
    iqoo  
    OP
       2021-09-14 10:41:49 +08:00
    @liuidetmks 无损压缩就没事。担心有损压缩的话可以多准备几个图片做冗余。
    lizhenda
        8
    lizhenda  
       2021-09-14 12:34:23 +08:00
    这样可以白嫖图床来当 CDN 用吗~
    ragnaroks
        9
    ragnaroks  
       2021-09-14 12:45:09 +08:00
    头条:早晚被你们薅死
    scyuns
        10
    scyuns  
       2021-09-15 11:36:00 +08:00
    还是你们会玩呀
    Clash
        11
    Clash  
       2021-09-16 11:17:36 +08:00
    会玩
    horizon
        12
    horizon  
       2021-09-16 11:35:10 +08:00
    厉害了
    Themyth
        13
    Themyth  
       2021-09-16 14:07:36 +08:00   ❤️ 1
    @whileFalse 这样才有意思啊!这样才有乐趣啊!谁在乎钱不钱的。。
    cweijan
        14
    cweijan  
       2021-09-16 14:07:37 +08:00
    好家伙, 白嫖 CDN 属于是
    pC0oc4EbCSsJUy4W
        15
    pC0oc4EbCSsJUy4W  
       2021-09-16 14:41:31 +08:00
    太牛逼了
    lumotian
        16
    lumotian  
       2021-09-16 16:47:29 +08:00
    这样是不是可以越过墙
    steveway
        17
    steveway  
       2021-09-17 09:27:46 +08:00
    真 tm 是个人才。。。
    iqoo
        18
    iqoo  
    OP
       2021-09-18 00:21:44 +08:00
    其实很多年前就试验过,不过当时用的免费空间是 IFPS,没有图片有趣~

    www.v2ex.com/t/413092
    pkwenda
        19
    pkwenda  
       2021-09-22 16:58:37 +08:00
    太有才了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3151 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:21 · PVG 20:21 · LAX 04:21 · JFK 07:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.