传统的 DDOS 防御通常使用“硬抗”的方式，导致开销很大，而且有时效果并不好。例如使用 DNS 切换故障 IP 的方案，由于域名会受到缓存等因素的影响通常有分钟级延时，前端难以快速生效。例如使用 CDN 服务，虽可抵挡大多网络层攻击，但对应用层攻击却常有疏漏，攻击者可通过恶意请求消耗流量、日志存储等费用，导致欠费停止服务。例如购买流量清洗等服务，虽然效果不错但费用十分昂贵。

今天分享一种超低成本的网站 DDOS 防御方案 —— 不使用任何后端防御服务，纯前端实现!当然效果也非常极端：如果用户之前未访问过该网站，这种防御不会生效，网站被打垮仍无法访问;但如果用户之前访问过该网站，之后即可无视攻击，甚至服务器关机网站也能访问，并且还能更新!

说到低成本、防攻击、离线访问等特性，大家可能会想到 Cloudflare 服务。不过前面提到，我们不使用后端防御，而是纯前端实现。

事实上，我们可以把 Cloudflare 搬到浏览器前端!这里不得不提 HTML5 中的一个 API ——Service Worker，它能拦截当前站点产生的所有请求，并能控制返回结果，相当于一个反向代理服务。有了这个黑科技，即可在前端实现 CDN 功能。

我们可为静态资源准备多个站点做冗余备份，当 Service Worker 加载资源出错时，可不返回错误给上层页面，而是继续从备用站点加载，直到获得正确结果才返回。这样，只要有一个备用站点可用，资源就不会加载失败。

注意，这不是重定向，地址栏不会有变化。

南昌壹基比-江南1575330741

因此即使网站被打垮，之前访问过的用户仍可通过 Service Worker 从备用站点加载页面，从而正常访问。

使用冗余站点虽能提升稳定性，但攻击者仍可对备用站点发起攻击，尤其是恶意消耗流量费用的攻击，导致成本大幅上升。

为此，我们还可使用一种更极端的方案 —— 使用免费 CDN 作为备用站点，例如 jsdelivr.net、unpkg.com、IPFS Gateway 等等，图片则可上传到各大网站的相册。

通过控制台可见，虽然当前站点无法连接，但通过 Service Worker 仍能从备用站点加载页面!

对于纯静态资源的站点，我们可将所有资源甚至包含 HTML 文件都通过免费 CDN 加速，从而大幅降低成本、增加稳定性。

但对于动态接口，又该如何实现防御?动态接口的防御要复杂一些，但仍有一些巧妙的方案。例如通过云防火墙和 Service Worker 使用约定的算法生成端口号，从而不断更换端口拦截攻击流量;例如代理到多个云主机厂商“薅”免费额度的防御流量;例如通过最便宜的抢占式主机购买大量公网 IP。。。细节下回讲解。

当然即使不考虑动态接口，网站被打垮后仍能访问静态内容，只是无法交互，相比完全打不开要好得多。