Proper Cloudapp White-labelling

Developers Workers
1

Cloudapp has been branding every link and cranny, we can solve that with a Worker and white-label it 100%.

The below version hotlinks the media content instead of downloading the media.

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

/**
 * Respond to the request
 * @param {Request} request
 */
async function handleRequest(request) {

  // Retrieve the HTML body and get the actual image URL.
  const dropResponse = await fetch(request.url);
  const textBody = await dropResponse.text();
  const videoUrl = textBody.match(/videoURL="(.*?)"/);
  const imageUrl = textBody.match(/property="og:image:secure_url" content="(.*?)"/);
  
  // Respond with a HTML5 video player.
  if (videoUrl !== null) {
    return new Response(`
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Video Snapshot</title>
      <style>
        body {
          background: #000;
        }
      </style>
    </head>
    <body style="display: flex;align-items: center;justify-content: center;">
      <video controls>
        <source src="${videoUrl[1]}" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </body>
    </html>
    <html>`, {
      status: 200,
      headers: {
        'Content-type': 'text/html;'
      }
    })
  }
  
  // If we have no image or video, make it fully white-label.
  if (imageUrl === null) {
    return new Response(`Please check your URL. There's no content here.`, {status: 200, headers: {
        'Content-type': 'text/html;'
    }})
  }
  
  // Setup a HTML wrapper and add image.
  return new Response(`
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Screenhot</title>
      <style>
        body {
          background: #000;
        }
        img {
          max-width: 100%;
        }
      </style>
    </head>
    <body>
      <div style="display: flex;align-items: center;justify-content: center;" >
        <img src="${imageUrl[1]}"/>
      </div>
    </body>
    </html>
    <html>`, {status: 200, headers: {
      'Content-type': 'text/html;'
  }})
}

Note: Cloudapp might mess up the White-label domain when the Let’s Encrypt Certificate renews (90 days) - in that case, just disable proxy on the domain in CF, renew WL domain in Cloudapp and then re-enable the proxy in CF. I tried setting a filter to watch for well-known in the URL and then just pass it along, but that caused a circular request so…