用 Cloudflare Workers 反代 Blogger

缘起

上一篇文章中提到了利用自定义域名搭建可以在国内访问的 Blogger 博客的方法，但经过讨论和测试，这个方法存在以下几个问题：

文章中的图片等资源会被 Google 服务器自动缓存。对国外的用户来说，这一机制可以大大提高页面加载的速度，但对国内用户来说则恰恰相反。目前除了在 Markdown 编辑器的预览中直接复制富文本外还没有别的解决方案。
地址 ghs.google.com 并不一定能解析到一个国内可以访问的地址。虽然只要使用自定义域名就可以规避 DNS 污染和 SNI 阻断，但是 Google 的服务器受到的是特殊待遇，直接针对 IP 地址进行阻断，自定义域名也经常抽风。

反观另一个同样无法访问的网站 Pixiv，网上给出的解决方案是直接在本地运行 Nginx 进行反代就可以访问。这个解决方案本质上是利用了 SNI 协议的漏洞，即为了区分前往同一地址的不同域名，SNI 协议中会以明文展示你需要前往的域名。明文展示显然会导致在特定的地区访问不稳定等种种问题，所以互联网领域的开发者们创造了 ESNI，后来又再 ESNI 的基础上创造了 ECHO，然后是 ECH……然而根本问题是大多数网站根本就不打算去支持 ECH。为了解决在特定地区访问不稳定的问题，给 SNI 加密固然是一个方法，但另一个更简单粗暴的方法是：弄一个假的 SNI 或者根本不发 SNI！

（这里插播一个小故事：运营商有时会给官网等网站免流量，就是用 SNI 来判断你访问的是那个网站。曾经有人利用这个机制盗刷了价值数十万元的流量，然后成功地被判刑了……）

总而言之，网络上给出的 Pixiv 反代方案其实就是利用了 Nginx 反代时不支持 SNI，并且 Pixiv 并没有直接被封锁 IP，这就是为什么同样的方案不能被用来访问 Google，Blogger 使用自定义域名也偶尔抽风。

对于问题 2，套一层 CDN 看似是一个解决方案，但实践表明这会导致包括但不限于循环重定向/HTTPS 证书错误/404 Not Found 等问题……

Cloudflare Workers

缘起

[@PetrichorArk](https://t.me/PetrichorArk) 提出可以用 CF Workers 反代来解决上述问题。简单来说就是用一个 CF Workers 在访问时爬取 Blogger 的页面，将页面中的资源进行替换后再反会给访问者。~~（万能的 Cloudflare Workers）~~

代码实现

以下是 [@PetrichorArk](https://t.me/PetrichorArk) 编写的实现代码：

/**
 * URL:
 * https://something.something.workers.dev/
 */

addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

const blogHost = 'something.blogspot.com'

/**
 * @param {Map} error
 * @param {Number} status
 * @param {Boolean} cacheable
 */
function handleInvalidRequest(error, status, cacheable) {
    const response = new Response(JSON.stringify(error), {
        status: status,
        statusText: 'Invalid Request',
        headers: {
            'strict-transport-security': 'max-age=31536000; includeSubDomains; preload',
            'timing-allow-origin': '*',
            'x-server': 'blog-proxy-2cff9aba',
            'x-xss-protection': '1; mode=block'
        }
    })
    if (cacheable) {
        response.headers.set('cache-control', 'public, max-age=29030400, immutable')
    }
    return response
}

/**
 * @param {String} url
 */
async function fromCache(url) {
    const cache = caches.default
    const matched = await cache.match(url)
    if (matched) {
        return matched
    }
    const resp = await fetch(url)
    if (resp.status >= 200 && resp.status < 300) {
        const response = new Response(resp.body, {
            status: resp.status,
            statusText: resp.statusText,
            headers: resp.headers
        })
        response.headers.delete('expires')
        response.headers.delete('vary')
        response.headers.delete('access-control-allow-origin')
        response.headers.set('cache-control', 'public, max-age=29030400, immutable')
        response.headers.set('strict-transport-security', 'max-age=31536000; includeSubDomains; preload')
        response.headers.set('timing-allow-origin', '*')
        response.headers.set('x-mirrored-url', url)
        response.headers.set('x-server', 'blog-proxy-2cff9aba')
        response.headers.set('x-xss-protection', '1; mode=block')
        await cache.put(url, response.clone())
        return response
    }
    return handleInvalidRequest({
        msg: 'status_error',
        url: url,
    }, resp.status, false)
}

/**
 * @param {URL} url
 */
async function proxy(url) {
    const proxyHost = url.hostname
    url.hostname = blogHost
    const urlStr = url.href
    const resp = await fetch(urlStr)
    if (resp.status >= 200 && resp.status < 400) {
        let body
        const type = resp.headers.get('content-type')
        if (type && type.startsWith('text/')) {
            body = await resp.text()
            body = body.replaceAll(blogHost, proxyHost)
            body = body.replace(new RegExp(`<link href='(.*?)${proxyHost}/(.*?)' rel='canonical'/>`), `<link href='$1${blogHost}/$2' rel='canonical'/>`)
            body = body.replace(/lh\w*?.googleusercontent.com/g, proxyHost + '/_image')
        } else {
            body = resp.body
        }
        const response = new Response(body, {
            status: resp.status,
            statusText: resp.statusText,
            headers: resp.headers
        })
        response.headers.delete('vary')
        response.headers.delete('access-control-allow-origin')
        response.headers.set('strict-transport-security', 'max-age=31536000; includeSubDomains; preload')
        response.headers.set('timing-allow-origin', '*')
        response.headers.set('x-mirrored-url', urlStr)
        response.headers.set('x-server', 'blog-proxy-2cff9aba')
        response.headers.set('x-xss-protection', '1; mode=block')
        return response
    }
    return handleInvalidRequest({
        msg: 'status_error',
        url: urlStr,
    }, resp.status, false)
}

/**
 * @param {Request} request
 */
async function handleRequest(request) {
    let url
    try {
        url = new URL(request.url)
    } catch {
        return handleInvalidRequest({ msg: 'url_parse_error', url: request.url }, 400, true)
    }
    if (url.pathname.startsWith('/_image/')) {
        url.hostname = 'lh3.googleusercontent.com'
        url.pathname = url.pathname.substr(7)
        return await fromCache(url)
    }
    return await proxy(url)
}

使用时记得将代码开头处的 blogHost 赋值为你自己的 Blogger 的 Blogspot 域名。原先的域名要接触与 Blogger 的绑定，这样 CF Workers 才能访问到你的真实博客页面而不是一个重定向页面。再将你的自定义域名解析到你的 CF Workers。（并在 Workers 面板设置路由。）

总结

Blogger 的地址 ghs.google.com 如果解析到国内可以访问的 IP，访问速度其实比 Cloudflare 的节点更快，但对于主题模版的修改的资源的处理则让人头大。相比之下，Cloudflare Workers 反代的方式更稳定也更便捷。~~不过折腾得这么麻烦为什么不直接用 Hexo，果然生命不止折腾不息吗。~~