前言

傳統(tǒng)的 DDOS 防御通常使用“硬抗”的方式，導(dǎo)致開銷很大，而且有時(shí)效果并不好。例如使用 DNS 切換故障 IP 的方案，由于域名會(huì)受到緩存等因素的影響通常有分鐘級(jí)延時(shí)，前端難以快速生效。例如使用 CDN 服務(wù)，雖可抵擋大多網(wǎng)絡(luò)層攻擊，但對(duì)應(yīng)用層攻擊卻常有疏漏，攻擊者可通過惡意請(qǐng)求消耗流量、日志存儲(chǔ)等費(fèi)用，導(dǎo)致欠費(fèi)停止服務(wù)。例如購(gòu)買流量清洗等服務(wù)，雖然效果不錯(cuò)但費(fèi)用十分昂貴。

[[441481]]

今天分享一種超低成本的網(wǎng)站 DDOS 防御方案 —— 不使用任何后端防御服務(wù)，純前端實(shí)現(xiàn)!當(dāng)然效果也非常極端：如果用戶之前未訪問過該網(wǎng)站，這種防御不會(huì)生效，網(wǎng)站被打垮仍無法訪問;但如果用戶之前訪問過該網(wǎng)站，之后即可無視攻擊，甚至服務(wù)器關(guān)機(jī)網(wǎng)站也能訪問，并且還能更新!

前端代理

說到低成本、防攻擊、離線訪問等特性，大家可能會(huì)想到 Cloudflare 服務(wù)。不過前面提到，我們不使用后端防御，而是純前端實(shí)現(xiàn)。

事實(shí)上，我們可以把 Cloudflare 搬到瀏覽器前端!這里不得不提 HTML5 中的一個(gè) API ——Service Worker，它能攔截當(dāng)前站點(diǎn)產(chǎn)生的所有請(qǐng)求，并能控制返回結(jié)果，相當(dāng)于一個(gè)反向代理服務(wù)。有了這個(gè)黑科技，即可在前端實(shí)現(xiàn) CDN 功能。

我們可為靜態(tài)資源準(zhǔn)備多個(gè)站點(diǎn)做冗余備份，當(dāng) Service Worker 加載資源出錯(cuò)時(shí)，可不返回錯(cuò)誤給上層頁(yè)面，而是繼續(xù)從備用站點(diǎn)加載，直到獲得正確結(jié)果才返回。這樣，只要有一個(gè)備用站點(diǎn)可用，資源就不會(huì)加載失敗。

相比傳統(tǒng)使用 DNS 切換故障 IP 的方案通常有分鐘級(jí)的延遲，這種 JS 控制的方案可精確到毫秒級(jí)，并且還能有多次試錯(cuò)的機(jī)會(huì)，從而大幅增加穩(wěn)定性。

離線訪問

Service Worker 的設(shè)計(jì)初衷就是為了增強(qiáng)網(wǎng)頁(yè)的離線化體驗(yàn)，因此一旦安裝即可在后臺(tái)長(zhǎng)期運(yùn)行，即使服務(wù)器關(guān)機(jī)、瀏覽器重啟，它也不會(huì)失效。

事實(shí)上，除了網(wǎng)頁(yè)中的資源可被 Service Worker 攔截，網(wǎng)頁(yè)本身也可以。Service Worker 安裝后，用戶在地址欄輸入網(wǎng)址發(fā)起的那個(gè)請(qǐng)求其實(shí)也會(huì)被攔截，從而可從備用站點(diǎn)加載網(wǎng)頁(yè)文件。

注意，這不是重定向，地址欄不會(huì)有變化。

因此即使網(wǎng)站被打垮，之前訪問過的用戶仍可通過 Service Worker 從備用站點(diǎn)加載頁(yè)面，從而正常訪問。

免費(fèi)節(jié)點(diǎn)

使用冗余站點(diǎn)雖能提升穩(wěn)定性，但攻擊者仍可對(duì)備用站點(diǎn)發(fā)起攻擊，尤其是惡意消耗流量費(fèi)用的攻擊，導(dǎo)致成本大幅上升。

為此，我們還可使用一種更極端的方案 —— 使用免費(fèi) CDN 作為備用站點(diǎn)，例如 jsdelivr.net、unpkg.com、IPFS Gateway 等等，圖片則可上傳到各大網(wǎng)站的相冊(cè)。

對(duì)于非圖片類型的文件，甚至還可以封裝成圖片上傳，使用時(shí)再?gòu)闹刑崛?例如 此文件正是從 該圖片中提取。

雖然單個(gè)免費(fèi) CDN 的穩(wěn)定性可能不高，但多準(zhǔn)備幾個(gè)，穩(wěn)定性就呈指數(shù)級(jí)上升了。

至于惡意攻擊，幾乎不可能打垮。DDOS(Distributed DOS)的精髓在于分布式，將分布在各地的流量匯聚到一起，從而增加傷害;而我們正好相反，將集中的流量分?jǐn)偟礁鞯兀兂梢粋€(gè)去中心化的分布式站點(diǎn)，從而化解攻擊。

演示

這個(gè)方案原理雖不復(fù)雜，但實(shí)現(xiàn)起來還是有很多細(xì)節(jié)，例如節(jié)點(diǎn)的選擇策略、資源清單格式等設(shè)計(jì)，還需注意三方站點(diǎn)內(nèi)容完整性、離線資源被 XSS 篡改等安全問題。

為方便開發(fā)者使用，最近做了一個(gè)命令行工具

https://github.com/EtherDream/freecdn，可實(shí)現(xiàn)上述提到的所有功能。

演示案例：

https://freecdn.etherdream.com/time.html

該頁(yè)面通過 HTML 輸出當(dāng)前時(shí)間，刷新可變化。

關(guān)閉頁(yè)面，退出瀏覽器。在 hosts 中加入0.0.0.0 freecdn.etherdream.com屏蔽該域名，模擬站點(diǎn)被打垮。

打開瀏覽器，再次訪問該頁(yè)面。頁(yè)面不僅能正常訪問，甚至還能刷新更新內(nèi)容!

通過控制臺(tái)可見，雖然當(dāng)前站點(diǎn)無法連接，但通過 Service Worker 仍能從備用站點(diǎn)加載頁(yè)面!

接口防御

對(duì)于純靜態(tài)資源的站點(diǎn)，我們可將所有資源甚至包含 HTML 文件都通過免費(fèi) CDN 加速，從而大幅降低成本、增加穩(wěn)定性。

但對(duì)于動(dòng)態(tài)接口，又該如何實(shí)現(xiàn)防御?動(dòng)態(tài)接口的防御要復(fù)雜一些，但仍有一些巧妙的方案。例如通過云防火墻和 Service Worker 使用約定的算法生成端口號(hào)，從而不斷更換端口攔截攻擊流量;例如代理到多個(gè)云主機(jī)廠商“薅”免費(fèi)額度的防御流量;例如通過最便宜的搶占式主機(jī)購(gòu)買大量公網(wǎng) IP。。。細(xì)節(jié)下回講解。

當(dāng)然即使不考慮動(dòng)態(tài)接口，網(wǎng)站被打垮后仍能訪問靜態(tài)內(nèi)容，只是無法交互，相比完全打不開要好得多。