Cloudflare Worker Proxy R2 Bucket Access

Introduction

Cloudflare R2 is a S3-compatible object storage service that provides a cost-effective and scalable solution for storing and serving data. It is much cheaper than traditional cloud storage services, such as Amazon S3, because it does not charge for data egress. To expose Cloudflare R2 buckets to the public internet with more control, we can use Cloudflare Workers to create a proxy that allows us to access R2 buckets.

In this blog post, I would like to share how to access Cloudflare R2 buckets via Cloudflare Workers.

Cloudflare Worker Proxy R2 Bucket Access

Suppose I have a Cloudflare R2 bucket called r2-trial, and there is an image 2026-02-28-2026-Brazen-Victory-10K/IMG_4332.JPEG in the bucket. My goal is to expose this image to the public internet. Although it can be exposed easily using a Cloudflare-managed https://r2.dev subdomain for non-production use cases, features like WAF custom rules, caching, access controls, or bot management are not available when using the r2.dev development url. To use these features, we must configure our bucket behind a custom domain or a Cloudflare Worker.

Purchasing a custom domain just for hosting images is not necessary. I created Cloudflare Worker delicate-water-7fed.dukeleimao.workers.dev just from the hello world template. To bridge the Worker to the R2 bucket, I will have to follow the steps below:

• Go to Worker settings > Settings > Variables.
• Under R2 Bucket Bindings, click Add Binding.
• Variable name: MY_BUCKET (This variable name will be used in the Worker code to access the bucket)
• R2 bucket: Select r2-trial from the dropdown.
• Save and Deploy.

Then I could edit the Worker code to access the R2 bucket and return the image in the response. The Worker code is as follows:

const BUCKET_BINDING = "MY_BUCKET";

export default {
  async fetch(request, env) {
    const bucket = env[BUCKET_BINDING];
    const url = new URL(request.url);

    // .slice(1) removes the leading "/" from the URL path
    // decodeURIComponent handles spaces or special characters in folder names
    const key = decodeURIComponent(url.pathname.slice(1));

    // Basic check: did the user actually provide a path?
    if (!key) {
      return new Response("Bucket connected. Please specify a file path.", {
        status: 200,
      });
    }

    // Set BUCKET_BINDING at the top to match your R2 bucket binding variable name
    const object = await bucket.get(key);

    if (object === null) {
      return new Response("Image Not Found in " + bucket.name, {
        status: 404,
      });
    }

    // Set headers (content-type, etc.) so the browser knows it's an image
    const headers = new Headers();
    object.writeHttpMetadata(headers);
    headers.set("etag", object.httpEtag);

    return new Response(object.body, { headers });
  },
};

Then we can access the image via the URL https://delicate-water-7fed.dukeleimao.workers.dev/2026-02-28-2026-Brazen-Victory-10K/IMG_4332.JPEG.

Web application firewalls (WAF) are an essential security layer for web applications, and Cloudflare Workers can be used to implement custom WAF rules to protect our R2 bucket. For example, I can restrict access to the images in the R2 bucket to only our GitHub Pages site by checking the Referer header in the Worker code. If the Referer header does not match our GitHub Pages site, we can return a 403 Forbidden response. The modified Worker code with this WAF rule is as follows:

const BUCKET_BINDING = "MY_BUCKET";
const ALLOWED_ORIGIN_LIST = [
  "https://yourusername.github.io/",
  "https://www.yourdomain.com/",
];

export default {
  async fetch(request, env) {
    const bucket = env[BUCKET_BINDING];
    const url = new URL(request.url);

    const referer = request.headers.get("Referer");

    // 1. SECURITY CHECK: Only allow requests coming from allowed origins
    const isAllowed =
      !!referer &&
      ALLOWED_ORIGIN_LIST.some((origin) => referer.startsWith(origin));
    if (!isAllowed) {
      return new Response("Access Denied: You cannot hotlink these images.", {
        status: 403,
      });
    }

    // .slice(1) removes the leading "/" from the URL path
    // decodeURIComponent handles spaces or special characters in folder names
    const key = decodeURIComponent(url.pathname.slice(1));

    // Basic check: did the user actually provide a path?
    if (!key) {
      return new Response("Bucket connected. Please specify a file path.", {
        status: 200,
      });
    }

    // Set BUCKET_BINDING at the top to match your R2 bucket binding variable name
    const object = await bucket.get(key);

    if (object === null) {
      return new Response("Image Not Found in " + bucket.name, {
        status: 404,
      });
    }

    // Set headers (content-type, etc.) so the browser knows it's an image
    const headers = new Headers();
    object.writeHttpMetadata(headers);
    headers.set("etag", object.httpEtag);

    return new Response(object.body, { headers });
  },
};

Conclusions

Compared to other free hacky solutions for hosting files, such as using GitHub repositories, Cloudflare R2 buckets is a professional, scalable, and manageable solution for hosting files, especially for hosting images for blogs. Compared to the similar solutions from other cloud providers, such as Amazon S3, Cloudflare R2 buckets is much cheaper because it does not charge for data egress. By using Cloudflare Workers as a proxy to access R2 buckets, we can have more control over how the files are accessed and served, and we can also implement custom WAF rules to protect our files from unauthorized access.