Serve S3 images from your own domain using Cloudflare worker

serve_s3_images_from_own_domain.js

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

/**
 * When we receive a request, fetch it from our S3 bucket
 * 
 * For example, a request for:
 *   https://mydomain.com/images/castle01.jpg
 * will be fetched from:
 *   https://s3-de-central.profitbricks.com/my-images/test-folder/castle01.jpg
 */
async function handleRequest(request) {
  // map our request folder to the s3 folder
  let requestFolder = '/images'
  let s3Folder = '/my-images/test-folder'
  
  let url = new URL(request.url)
  let origPathname = url.pathname

  // fetch from the folder on our s3 bucket
  url.hostname = 's3-de-central.profitbricks.com'
  url.pathname = origPathname.replace(new RegExp('^'+escapeRegExp(requestFolder)), s3Folder)

  return await fetch(url, request)
}
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\\/]/g, '\\$&'); // $& means the whole matched string
}

This script runs on Cloudflare as a worker script and allows you to serve files stored on your S3 bucket. The files appear to be coming from your domain and the S3 bucket is hidden.

Of course, this script is no substitute for maintaining proper security on your S3 bucket.

Does caching still work using this method?