低成本打造一个带宽无限的网站(五)

突破限制

由于 SW 非常强大,因此使用条件也是非常严格的,以免被恶意使用。

例如 SW 必须在 HTTPS 站点上使用。这本是件好事,彻底杜绝了中间人的隐患,但现在却成了一道门槛 —— 毕竟支持 HTTPS 并且域名可控的免费空间,那是极少的。

同时,这还引发了另一个问题:由于 HTTPS 站点是禁止读取 HTTP 数据的,因此我们的节点也必须是 HTTPS 站点!

此外 SW 也得遵守同源策略。如果要读取第三方站点的数据,目标响应头里还得有 Access-Control-Allow-Origin: * 字段 —— 这对于免费空间来说,是个不小的要求。

免费空间,要同时满足上述两个条件,确实有些苛刻。好在 SW 能和页面交互,因此在代理网页资源时,可以往其中插入一个辅助脚本,这样就能把任务交给页面来实现。毕竟页面里有丰富的 DOM 功能,可玩出各种奇技淫巧。

页面代理

对于 不支持 ACAO、但支持 HTTPS 的站点,可通过页面代理实现 CORS。

我们通过 iframe 引入目标站点下的一个代理页面,由它来读取数据,然后将结果 postMessage 给父页面:

若是追求更高性能的话,还可通过 MessageChannel 直接从 iframe 传到 SW 里,减少一次消息中转:

只要目标站点能部署 html 资源,就可以用这个方案,读取站点下任意类型的资源!



需注意的是,该方案依赖页面。假如用户关闭了所有页面,然后通过地址栏访问资源 —— 这时 SW 虽能拦截请求,但由于没有可交互的页面,因此无法使用该方案。

不过,有个简单的办法可以解决这个问题:我们让 SW 先返回一个临时的过渡页面,用它来配合内容加载;完成后页面自动刷新,这时 SW 就能给出真正的内容了!

JSONP

对于上述情况,还有种不依赖页面的办法 —— 我们将资源打包在脚本文件里,通过 JSONP 的方式直接在 SW 中加载。

当然这种方案缺陷十分明显:脚本是文本格式的,编码二进制资源会增加不少体积。

此外,Worker 中加载脚本的函数 importScripts 是同步阻塞的,因此会对程序带来很大影响。除非使用 Sub Worker(在 Worker 中嵌套 Worker),但目前很多浏览器包括 Chrome 都不支持,所以暂不考虑。

混合内容

对于 不支持 HTTPS、但支持 ACAO 的站点,这时就需要利用 混合内容Mixed Content)机制了。

虽然浏览器原则上不允许 HTTPS 页面引用 HTTP 资源,但对于风险较低的资源,例如图片、多媒体,仍然是允许的!

因此,我们可将原始数据作为像素,打包在图片里。页面通过设有 crossOrigin 属性的 Image 加载图片,然后绘制到 canvas 上,这样就能读取像素,从而得到原始数据了!

演示:https://www.etherdream.com/FunnyScript/jszip/decode.html

关于数据编码成图片的细节,可参考《利用 canvas 实现数据压缩》。不过和文中不同的是,如今我们通过本地工具编码图片,因此最终结果还可以用 PNGoutzopflipng 等工具进行强力优化。

当然,数据打包成图片后,体积不可避免会有所增加。但反正带宽是免费的,有总比没有好:)



不过,踩混合内容的黄线,也是有一定代价的。例如 Chrome 浏览器,界面上的证书图标不再是绿色了,并且控制台里也会出现告警:

对于这个问题,倒是有个简单的缓解策略:假如当前开着多个页面(Tab)的话,我们可以让 SW 选一个不可见的,由它来加载资源 —— 这样即使界面有变化,用户也不会立即看见了:)

Flash 代理

对于既不支持 ACAO 又不支持 HTTPS 的破站点,只能用同样破旧的东西来配它 —— Flash。

尽管浏览器并不允许 HTTPS 页面加载 HTTP Flash,但我们可以 先加载一个 HTTPS Flash 作为跳板,然后通过它来加载 HTTP 的资源

因为插件内部是不受浏览器管控的,所以就能利用 Flash 宽松的限制,绕过混合内容策略!

只要目标站点支持 xml 资源(用于存放 cross domain xml),我们就能读取该站点下任意类型的资源!



退一步,即使目标站点不支持 xml 也没关系,能支持 swf 文件也可以。我们用这个 swf 作为目标站点的代理,这样就解决「网络通信」的同源策略了。

同时,再通过 AS 脚本开放自身权限:

Security.allowDomain('*');

这样,就能解决「模块交互」的同源策略了。

这里用了两个 swf 做代理 —— 前者规避混合内容,后者规避同源策略,是不是很巧妙:)

有了这个办法,那些能上传 swf 的论坛,我们就能读取和它同站点的图片附件了!

不过比较尴尬的是,如今主流浏览器都已禁用 Flash,当初写的这些「奇技淫巧」也没什么卵用了。。。

总结

HTTPS ACAO 获取方式 信息载荷类型 依赖页面 主要缺陷
fetch() * × -
× 页面代理 * (html) 额外嵌入一个页面
× JSONP js × Worker 中会阻塞
× 图片像素 image 混合内容界面警告
× × Flash 代理 * (xml 或 swf) 很多浏览器已禁用

这里我们只是从 HTTPS 和 ACAO 两个条件进行探讨。现实中,当然还有更复杂的情况。

例如,一些图床同时支持 HTTPS 和 ACAO,但只能上传图片格式。对于这种情况,其实不依赖页面也是可以加载的 —— 我们可以直接在 SW 中 fetch 图片,然后用 JS 版的图像解码库,还原出像素里的数据。

更进一步,我们还可以检测图床是否会修改上传的原始文件。如果不修改的话,我们可以把数据藏在图片辅助信息里,甚至直接附加在文件末尾,这样直接截取即可,连解码都不需要了!

总之,只要发挥想象,很多网站都可以利用起来,在我们宽带紧张的情况下,充当免费的后备节点:)

时间: 2024-09-05 09:28:49

低成本打造一个带宽无限的网站(五)的相关文章

低成本打造一个带宽无限的网站(二)

网站攻击 有次在讨论网站防护时,提到一个信息发布的站点 -- 它的结构很简单,只有几个页面而已,正常情况下打开是非常快的.然而一到关键时刻,流量如同洪水般涌来.网站无法访问,那些付费发布的信息就错过最佳展现时间了. 对于网站攻击,现成的解决方案有很多,例如用上 WAF.CDN 等服务,多少能分担一些.不过,通用的防御方案,自然就有通用的攻击方案. 例如通过 DNS 实现的负载均衡,攻击者使用现成的工具,就能轻易遍历出对应的 IP.更糟的是,有时域名会缓存很久,使得攻击都快结束了解析还没生效. 对

低成本打造一个带宽无限的网站

前言 前些年断断续续写的,最近突然想起来,于是翻出来又补充了一些,目前整理了几篇: 第 1 篇 -- 免费空间的遐想 第 2 篇 -- 通过缓存防御网站 第 3 篇 -- 前端代理服务 第 4 篇 -- 数据流优化 第 5 篇 -- 免费空间的挖掘 配图是 SVG 格式的,由于无法上传,目前放在 GitHub Pages 上.如果速度很慢或者被墙,可以开代理试试. 免费空间 自从学习网页制作那天起,就开始期待有朝一日能有个自己的网站. 尽管当时有不少免费空间,对于简单的个人网站也够用了,然而像我

低成本打造一个带宽无限的网站(四)

分块处理 上一篇曾提到,我们可对资源加密存储,然后在 SW 中进行解密. 理论上这当然可行,但事实上会出现一些问题:我们必须等整个资源下载完成后,才能开始解密操作.这对于用户体验,会产生很大的影响. 假如有个 1MB 的图片,通过 100 KB/s 的速度加载,那么要 10 秒后才能解密再展示:然而正常情况下,图片是边加载边显示的,并不会让用户等很久,然后一次性展示所有的. 为了解决这个问题,一个期待已久的新标准终于到来,那就是 Stream API. 有了流的支持,数据就可以渐进处理,而不必等

程序猿如何快速打造一个有设计感的网站

  像我这样的程序员来说经常被"设计"这个词吓到,因为我是一名程序员而不是设计师,我拥有的是计算机学位证,另外我对 Comic Sans 字体并不介意.(注:Comic Sans 字体是 Win95 附带的一种漫画字体,设计行业极为排斥,设计师或那些拥有美学情结的人不屑与之为伍) 虽然只是一名程序员,但我还是想让自己的网站看起来更加吸引人,一方面出于虚荣,因为这样可以显得我更加"专业",而另一方面是出于现实,因为研究机构调查发现用户会更加信任那些网站"看起

码农如何快速打造一个有设计感的网站

注:拥有属于自己的网站是很多人的梦想,但大多数人只能借助像 WordPress 这样的 CMS 实现,甚至很多公司网站也是这样.但这些网站大多数看起来都比较缺乏设计感,通俗来讲就是有点"土".那么对于像程序员以及其他对设计比较小白们来说,如何能让你的网站看起来更加前卫,有范,有设计感呢?极客公园编译了 24WAYS 的文章 How to Make Your Site Look Half-Decent in Half an Hour 为您提供解决方法. 像我这样的程序员来说经常被&quo

如何利用SEO打造一个成功的购物网站

电子商务崛起,无论是国内还是国外的互联网,都涌现出大量的http://www.aliyun.com/zixun/aggregation/7976.html">在线购物网站.竞争太过于激烈,如何让用户优先找到自己的网站.这是很多的购物网站的管理员都在思考的问题. 电子商务是与搜索引擎高度结合的一个行业,至少在目前来说是这个样子.大部分想在网上购物的用户,都会先在搜索引擎上搜索物品的相关信息,最后找到产品或服务的供应商. 根据思亿欧的调查,购物网站在互联网(指国内互联网)上面临的竞争更严峻.无

如何打造一个成功的购物网站

电子商务崛起,无论是国内还是国外的互联网,都涌现出大量的http://www.aliyun.com/zixun/aggregation/7976.html">在线购物网站.竞争太过于激烈,如何让用户优先找到自己的网站.这是很多的购物网站的管理员都在思考的问题. 电子商务是与搜索引擎高度结合的一个行业,至少在目前来说是这个样子.大部分想在网上购物的用户,都会先在搜索引擎上搜索物品的相关信息,最后找到产品或服务的供应商. 购物网站在互联网上面临的竞争更严峻.无论你的购物网站是从事销售数码.服装

教你快速打造一个有设计感的网站

对于好多程序员来说,经常被"设计"这个词吓到,因为Ta是一名程序员而不是设计师,拥有的是计算机学位证,另外对 Comic Sans 字体并不介意.(注:Comic Sans 字体是 Win95 附带的一种漫画字体,设计行业极为排斥,设计师或那些拥有美学情结的人不屑与之为伍.更多查看这篇为什么不要使用 Comic sans 字体) 虽然只是一名程序员,但还是想让自己的网站看起来更加吸引人,一方面出于虚荣,因为这样可以显得更加"专业",而另一方面是出于现实,因为研究机构

如何两个月打造一个盈利的B2B网站

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 接触网络已经7年了,行业站也做了好几个了,尝试了几个行业都没有盈利,最后结合自身的优点,因为自己在铸造行业的国家级期刊媒体呆了7年,做了七年的广告主管,毕竟自己在这个行业有一定的客户群,做铸造网应该没有问题,想好了后就开始动手了. 首先,想好域名.域名很重要,一个好的域名能够带来很大的回头客,而且名字好记,客户能一下子记住你.但是马云刚开始做