[Day2] 用Workers做反向代理並修改網頁內容— 30天實戰Cloudflare

當我們在Cloudflare DNS上設定一筆紀錄並開啟Proxy，這時候就做了反向代理，反向代理會解開SSL加密，就可以取得Request的Body、Header這時候就可以進行修改，再丟到原點伺服器上，同樣從原點伺服器會來的Response的Body、Header也可以在Cloudflare上修改。

除了在DNS上做反向代理，我們也可以在Workers上面做，而且還可以竄改內容回傳給使用者。

範例一、簡易反向代理#

我們以臺北市學生資訊網為範例，我們將這個網站綁到我們的網域上，並在上面進行一下變化。

以下面程式碼為例，可以做一個簡單的反向代理。我們本原本建立的request的host改成目標後，再做一次fetch取得原本網站內容。這時候就可以在自己的網域就可以看到以上網站。

1
export default {
2
  async fetch(request, env, ctx) {
3
    const url = new URL(request.url);
4
    url.host = "tpenroll.tp.edu.tw";
5
    return fetch(url, request);
6
  },
7
};

範例二、竄改內容#

接下來我們就可以在網站上加料，比方說在首頁用JS加上一個alert通知的效果，並增加一點css，我們可以這樣改，參考以下程式：

1
export default {
2
  async fetch(request, env, ctx) {
3
    const url = new URL(request.url);
4
    url.host = "tpenroll.tp.edu.tw";
5
    if (url.pathname == "/") {
6
      const resp = await fetch(url, request);
7
      let text = await resp.text();
8
      text += "<style>body { background-color: red }</style>";
9
      text += "<script>alert('haha')</script>";
10
      return new Response(text, resp);
11
    } else {
12
      return fetch(url, request);
13
    }
14
  },
15
};

接著我們就會看到下面生效了，會彈出一個haha的視窗，而且且背景被改成紅色，透過這樣方式，我們可以對網站進行任意串改。

結語#

Workers這時就體現他強大的工具，可以用來幫任何網站進行反向代理，也可以竄改網頁任何內容，是個非常強大的工具。