Dynamic Image Transformation for Private Files

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

/**
 * Fetches an image, resizes it based on the provided template, validates the source, and caches the response.
 * If the image is already in the cache, it returns the cached image.
 * 
 * @param {Request} request - The request object containing the URL of the image and the template for resizing.
 * @param {FetchEvent} event - The fetch event object used to wait until the response is put in the cache.
 * 
 * @returns {Promise<Response>} - A promise that resolves with the response object containing the resized image.
 */
async function handleRequest(request, event) {
  // Check if the image is in the cache.
  let response = await caches.default.match(request)

  // If it is, return the cached image.
  if (response) return response

  // Parse request URL to get access to query string
  let url = new URL(request.url)

  // Cloudflare-specific options are in the cf object.
  let options = { cf: { image: {} } }

  // Define template sizes
  const templates = {
    "tiny": 32,
    "small": 50,
    "med": 160,
    "big": 360,
    "bigger": 600,
    "large": 800,
    "xlarge": 1920
  }

  // Get template from query string
  let tpl = url.searchParams.get("tpl")

  // Check if template exists and set width
  if (tpl && templates[tpl.replace(":box", "")]) {
    options.cf.image.width = templates[tpl.replace(":box", "")]
  }

  // Check if box shape is requested and set fit
  if (tpl && tpl.includes(":box")) {
    options.cf.image.fit = "cover"
    options.cf.image.height = options.cf.image.width
  }

  // Get URL of the original (full size) image to resize.
  const imageURL = url.searchParams.get("image")

  if (!imageURL) return new Response('Missing "image" value', { status: 400 })

  //This whole part is about some validation logic, you can use your custom approach here
  //These are some dummy suggestions.
  try {
    // TODO: further customize validation logic
    const { protocol, hostname, pathname } = new URL(imageURL)

    // Check if the protocol is 'http' or 'https'
    if (protocol !== 'http:' && protocol !== 'https:') {
      return new Response('Invalid protocol. Must be "http" or "https"', { status: 400 })
    }

    // Only accept "image-storage.example.com" images (set it to other hostname if your images are elsewhere)
    if (hostname !== 'image-storage.example.com') {
      return new Response('Access denied.', { status: 403 })
    }

    // Check if the image is from your own specific folder
    if (!pathname.startsWith('/my-super-secure-folder')) {
      return new Response('Access denied.', { status: 403 })
    }

  } catch (err) {
    return new Response('Invalid "image" value', { status: 400 })
  }

  const imageRequest = new Request(imageURL);

  // Fetch the image, resize it, and store it in the cache.
  response = await fetch(imageRequest, options)

  // Clone the response so we can read the body.
  let responseClone = response.clone()

  // Read the body into a variable.
  let body = await responseClone.blob()

  // Create a new response with the same body and status.
  let responseToCache = new Response(body, {
    status: response.status,
    statusText: response.statusText,
    headers: response.headers
  })

  // Set the Cache-Control header.
  responseToCache.headers.set('Cache-Control', 'public, max-age=86400')

  // Put the response in the cache.
  event.waitUntil(caches.default.put(request, responseToCache))

  return response
}