利用cloudflare-works邊緣計算搭建線上網頁代理

阿新 • • 發佈：2020-12-01

今天看到阮一峰老師的Twitter發的“關於Cloudflare 正式釋出 workers 功能”，搜尋了一下關於 workers 功能使用教程，找了一篇文章(Xiaomage’s Blog利用cloudflare works邊緣計算搭建線上網頁代理)還不錯，先碼後續繼續研究。

工具

開源專案jsproxy
一個cloudflare賬號
一個Github賬號，或者一臺伺服器+域名

一點說明：

要利用cloudflare works邊緣計算搭建線上網頁代理，需要用到大神EtherDream的開源專案jsproxy

這個專案使用了Service Worker，它能讓 JS 攔截網頁產生的請求，並能自定義返回內容，相當於在瀏覽器內部實現一個反向代理。這使得絕大部分的內容處理都可以在瀏覽器上完成，伺服器只需純粹的轉發流量。

你可以使用Github pages服務，快速搭建起頁面前端，從而做到真正的serverless。當然，如果你有一臺伺服器+域名，你也可以把伺服器放在自己的伺服器上。這一步只是給cloudflare一個回源伺服器，使用者訪問的一切流量都要經過cloudflaer伺服器，而不是Github或者你的伺服器。所以伺服器位置並不會影響網頁代理的速度，而是使用者到所連線到的cloudflare伺服器的速度。建議使用Github pages的服務即可，下面的教程也將演示利用Github pages搭建此代理的過程。

操作步驟

GitHub方面

登入你的Github賬號，forkjsproxy專案到你的倉庫中

進入你fork的jsproxy專案的setting中，啟用下方的Github pages，其中專案分支選擇gh-pages branch分支即可，配置見下圖：
進入你fork的jsproxy專案的source(原始碼)中，切換到gh-pages branch分支，新建一個index.html，內容為空即可。
訪問你Github pages服務生成的網址，如果為白屏，沒有報404錯誤的話，回到剛才的原始碼，將index.html刪除即可。3、4兩部可以在Github裡直接操作，也可以用git命令拉取到本地進行修改，這裡不再贅述。
如果你想自定義頁面的樣式，可以修改gh-pages branch分支中的index_v3.html

Cloudflare方面

在https://dash.cloudflare.com/登入你的cloudflare賬號，點選右側大大的workers進入workers控制面板。
第一次使用workers功能，需要完成一個新手引導教程。第一步，需要選擇一個cloudflare提供的*.workers.dev的二級域名，根據自己的喜好填寫，按照提示next就可以了。
新手教程第二步會讓你選擇plan，我們白嫖黨當然要選擇Free Plan啦，每天有100000個請求配額，個人使用綽綽有餘。
下一步可能要驗證郵箱，到註冊cloudflare的郵箱裡點選連結啟用一下就可以。
完成新手引導後，回到workers面板，點選藍色的Create a Worker按鈕，新建一個worker。
這時會開啟一個帶有程式碼編輯器的新標籤頁，在左側選擇Script標籤，貼上以下內容：注意在第六行裡填寫好你Github pages的網址，即https://xxx.github.io/jsproxy

'use strict'

/**
 * static files (404.html, sw.js, conf.js)
 */
const ASSET_URL = 'https://xxx.github.io/jsproxy'//這裡填寫你Github pages的網址！

const JS_VER = 10
const MAX_RETRY = 1

/** @type {RequestInit} */
const PREFLIGHT_INIT = {
  status: 204,
  headers: new Headers({
    'access-control-allow-origin': '*',
    'access-control-allow-methods': 'GET,POST,PUT,PATCH,TRACE,DELETE,HEAD,OPTIONS',
    'access-control-max-age': '1728000',
  }),
}

/**
 * @param {any} body
 * @param {number} status
 * @param {Object<string, string>} headers
 */
function makeRes(body, status = 200, headers = {}) {
  headers['--ver'] = JS_VER
  headers['access-control-allow-origin'] = '*'
  return new Response(body, {status, headers})
}


/**
 * @param {string} urlStr 
 */
function newUrl(urlStr) {
  try {
    return new URL(urlStr)
  } catch (err) {
    return null
  }
}


addEventListener('fetch', e => {
  const ret = fetchHandler(e)
    .catch(err => makeRes('cfworker error:\n' + err.stack, 502))
  e.respondWith(ret)
})


/**
 * @param {FetchEvent} e 
 */
async function fetchHandler(e) {
  const req = e.request
  const urlStr = req.url
  const urlObj = new URL(urlStr)
  const path = urlObj.href.substr(urlObj.origin.length)

  if (urlObj.protocol === 'http:') {
    urlObj.protocol = 'https:'
    return makeRes('', 301, {
      'strict-transport-security': 'max-age=99999999; includeSubDomains; preload',
      'location': urlObj.href,
    })
  }

  if (path.startsWith('/http/')) {
    return httpHandler(req, path.substr(6))
  }

  switch (path) {
  case '/http':
    return makeRes('請更新 cfworker 到最新版本!')
  case '/ws':
    return makeRes('not support', 400)
  case '/works':
    return makeRes('it works')
  default:
    // static files
    return fetch(ASSET_URL + path)
  }
}


/**
 * @param {Request} req
 * @param {string} pathname
 */
function httpHandler(req, pathname) {
  const reqHdrRaw = req.headers
  if (reqHdrRaw.has('x-jsproxy')) {
    return Response.error()
  }

  // preflight
  if (req.method === 'OPTIONS' &&
      reqHdrRaw.has('access-control-request-headers')
  ) {
    return new Response(null, PREFLIGHT_INIT)
  }

  let acehOld = false
  let rawSvr = ''
  let rawLen = ''
  let rawEtag = ''

  const reqHdrNew = new Headers(reqHdrRaw)
  reqHdrNew.set('x-jsproxy', '1')

  // 此處邏輯和 http-dec-req-hdr.lua 大致相同
  // https://github.com/EtherDream/jsproxy/blob/master/lua/http-dec-req-hdr.lua
  const refer = reqHdrNew.get('referer')
  const query = refer.substr(refer.indexOf('?') + 1)
  if (!query) {
    return makeRes('missing params', 403)
  }
  const param = new URLSearchParams(query)

  for (const [k, v] of Object.entries(param)) {
    if (k.substr(0, 2) === '--') {
      // 系統資訊
      switch (k.substr(2)) {
      case 'aceh':
        acehOld = true
        break
      case 'raw-info':
        [rawSvr, rawLen, rawEtag] = v.split('|')
        break
      }
    } else {
      // 還原 HTTP 請求頭
      if (v) {
        reqHdrNew.set(k, v)
      } else {
        reqHdrNew.delete(k)
      }
    }
  }
  if (!param.has('referer')) {
    reqHdrNew.delete('referer')
  }

  // cfworker 會把路徑中的 `//` 合併成 `/`
  const urlStr = pathname.replace(/^(https?):\/+/, '$1://')
  const urlObj = newUrl(urlStr)
  if (!urlObj) {
    return makeRes('invalid proxy url: ' + urlStr, 403)
  }

  /** @type {RequestInit} */
  const reqInit = {
    method: req.method,
    headers: reqHdrNew,
    redirect: 'manual',
  }
  if (req.method === 'POST') {
    reqInit.body = req.body
  }
  return proxy(urlObj, reqInit, acehOld, rawLen, 0)
}


/**
 * 
 * @param {URL} urlObj 
 * @param {RequestInit} reqInit 
 * @param {number} retryTimes 
 */
async function proxy(urlObj, reqInit, acehOld, rawLen, retryTimes) {
  const res = await fetch(urlObj.href, reqInit)
  const resHdrOld = res.headers
  const resHdrNew = new Headers(resHdrOld)

  let expose = '*'
  
  for (const [k, v] of resHdrOld.entries()) {
    if (k === 'access-control-allow-origin' ||
        k === 'access-control-expose-headers' ||
        k === 'location' ||
        k === 'set-cookie'
    ) {
      const x = '--' + k
      resHdrNew.set(x, v)
      if (acehOld) {
        expose = expose + ',' + x
      }
      resHdrNew.delete(k)
    }
    else if (acehOld &&
      k !== 'cache-control' &&
      k !== 'content-language' &&
      k !== 'content-type' &&
      k !== 'expires' &&
      k !== 'last-modified' &&
      k !== 'pragma'
    ) {
      expose = expose + ',' + k
    }
  }

  if (acehOld) {
    expose = expose + ',--s'
    resHdrNew.set('--t', '1')
  }

  // verify
  if (rawLen) {
    const newLen = resHdrOld.get('content-length') || ''
    const badLen = (rawLen !== newLen)

    if (badLen) {
      if (retryTimes < MAX_RETRY) {
        urlObj = await parseYtVideoRedir(urlObj, newLen, res)
        if (urlObj) {
          return proxy(urlObj, reqInit, acehOld, rawLen, retryTimes + 1)
        }
      }
      return makeRes(res.body, 400, {
        '--error': `bad len: ${newLen}, except: ${rawLen}`,
        'access-control-expose-headers': '--error',
      })
    }

    if (retryTimes > 1) {
      resHdrNew.set('--retry', retryTimes)
    }
  }

  let status = res.status

  resHdrNew.set('access-control-expose-headers', expose)
  resHdrNew.set('access-control-allow-origin', '*')
  resHdrNew.set('--s', status)
  resHdrNew.set('--ver', JS_VER)

  resHdrNew.delete('content-security-policy')
  resHdrNew.delete('content-security-policy-report-only')
  resHdrNew.delete('clear-site-data')

  if (status === 301 ||
      status === 302 ||
      status === 303 ||
      status === 307 ||
      status === 308
  ) {
    status = status + 10
  }

return new Response(res.body, {
    status,
    headers: resHdrNew,
  })
}


/**
 * @param {URL} urlObj 
 */
function isYtUrl(urlObj) {
return (
    urlObj.host.endsWith('.googlevideo.com') &&
    urlObj.pathname.startsWith('/videoplayback')
  )
}

/**
 * @param {URL} urlObj 
 * @param {number} newLen 
 * @param {Response} res 
 */
async function parseYtVideoRedir(urlObj, newLen, res) {
if (newLen > 2000) {
return null
  }
if (!isYtUrl(urlObj)) {
return null
  }
try {
const data = await res.text()
    urlObj = new URL(data)
  } catch (err) {
return null
  }
if (!isYtUrl(urlObj)) {
return null
  }
return urlObj
}

之後點選下方的save and deploy部署就生效啦！記下cloudflare分配給你的workers.dev的三級域名，這就是你部署好的線上代理網址。

如果你正巧有託管在Cloudflare或它旗下的Partner的話，你可以就可以自定義網頁代理的域名，不必記下冗長的三級域名，方法如下：

進入你的域名控制檯，點選控制檯頂部的workers標籤，進入對應域名的workers設定。
點選右側的Add route按鈕，部署一條新規則。
在彈出的對話方塊中：Route中填寫 example.yourwebstie.com/* ，其中example是網頁代理的二級域名，可以自定義，Worker選擇你剛剛部署的worker。
修改example.yourwebstie.com的DNS記錄為cname記錄，這條cname記錄指向cloudflare分配給你的workers.dev下剛剛部署好的workers站點。

Then, 在你使用沒有翻牆軟體的電腦時，也能利用這個網頁代理隨心上谷歌看油管咯~enjoy it！

利用cloudflare-works邊緣計算搭建線上網頁代理

工具

操作步驟

GitHub方面

Cloudflare方面

利用cloudflare-works邊緣計算搭建線上網頁代理

利用saltstack管理邊緣計算節點

短網址搭建：利用 cloudflare wordkers 搭建自用短網址 t.cn 教程

RESTful理念搭建線上中文字元識別網頁錯誤點

邊緣計算現狀與未來

如何利用Node.js與JSON搭建簡單的動態伺服器

利用binarySearch實現抽獎計算邏輯

利用CloudFlare自動DDNS

基於函式計算搭建Serverless小商城

windows平臺利用hexo框架與github搭建個人部落格

利用GitHub從零開始搭建一個部落格

Linux利用war包一鍵搭建Jenkins（免外掛安裝）

搭建線上教育系統需要注意的事項

11月7日，一起見證關於邊緣計算的頂級盛宴

工業網際網路+邊緣計算的相關研究進展新觀察

如何利用Python 進行邊緣檢測

“我們的邊緣計算技術點，可能超前了業界一點”

《離散製造業邊緣計算解決方案白皮書》深度解析

智慧城市理念落地現實過程中邊緣計算在其中佔據何種優勢

觸控式螢幕高階邊緣計算閘道器

利用cloudflare-works邊緣計算搭建線上網頁代理

工具

操作步驟

GitHub方面

Cloudflare方面

相關推薦