Cloudflare Workers: HTMLRewriter でレスポンスの HTML をストリームのまま書き換える

Workers の組み込み API HTMLRewriter を使うと、オリジンから返ってきた HTML を CSS セレクタで捕まえて、属性の変更や要素の追加・削除ができる。全体をメモリに読み込まずストリームで処理するので速い。

コード例

export default {
  async fetch(req: Request): Promise<Response> {
    const res = await fetch(req);
    return new HTMLRewriter()
      .on('a[href^="http://"]', {
        element(el) {
          const href = el.getAttribute("href")!;
          el.setAttribute("href", href.replace("http://", "https://"));
        },
      })
      .on("head", {
        element(el) {
          el.append('<meta name="robots" content="noindex">', { html: true });
        },
      })
      .transform(res);
  },
};

使いどころ

既存サイトにバナーやタグを差し込む、リンクを一括で書き換える、A/B テスト用に要素を差し替える

注意点

テキストはチャンク単位で届くので、text() ハンドラで文字列を扱うときは分割に注意する。
JS で後から描画される要素（クライアントサイドレンダリング）は対象外。

出典

@zaru · 2026-06-14