How to add hotlink protection in Workers

Hi, I am using Cloudflare workers for google drive indexing and sharing and sharing files and pdf with my users, but some people copy the URL and share it on their website. So someone please tell me how to add hotlink protection in my Cloudflare workers so only my domain names can access the file link and when other websites try to access the URL they get redirected to my website.
Thank you.

add this to your worker code -

const HOMEPAGE_URL = "https://tutorial.cloudflareworkers.com/"
const PROTECTED_TYPE = "image/"

async function handleRequest(request) {
  // Fetch the original request
  const response = await fetch(request)

  // If it's an image, engage hotlink protection based on the
  // Referer header.
  const referer = request.headers.get("Referer")
  const contentType = response.headers.get("Content-Type") || ""

  if (referer && contentType.startsWith(PROTECTED_TYPE)) {
    // If the hostnames don't match, it's a hotlink
    if (new URL(referer).hostname !== new URL(request.url).hostname) {
      // Redirect the user to your website
      return Response.redirect(HOMEPAGE_URL, 302)
    }
  }

  // Everything is fine, return the response normally.
  return response
}

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

and edit the respective fields in the red color you want it should work :blush:
Let me know if it worked for you

1 Like

Hi thank you for replying
Can you please edit the fields for me I don’t understand, I am new to this platform

This is the worker’s domain name storage.s1-gamekillermods.workers.dev
and the files I want to protect are in the domain like storage.s1-gamekillermods.workers.dev/0:/files.pdf and this is the home page domain theblogger.xyz

Thank you.

const HOMEPAGE_URL = "https://yourdomain.com"
const PROTECTED_TYPE = "pdf/"

async function handleRequest(request) {
  // Fetch the original request
  const response = await fetch(request)

  // If it's an image, engage hotlink protection based on the
  // Referer header.
  const referer = request.headers.get("yourdomain.com")
  const contentType = response.headers.get("Content-Type") || "pdf"

  if (referer && contentType.startsWith(pdf)) {
    // If the hostnames don't match, it's a hotlink
    if (new URL(referer).hostname !== new URL(request.url).hostname) {
      // Redirect the user to your website
      return Response.redirect(https://yourdomain.com, 302)
    }
  }

  // Everything is fine, return the response normally.
  return response
}

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

try this code now

Hi this code is not working I have to change the URLs but it sowing Error 522 on my main domain and the test domain also.

pls share a screenshot of where you have added the code and the screenshot of the error

you can find more info here - https://developers.cloudflare.com/workers/examples/hot-link-protection

you can tag @Deimos_Col

Here
I have added your code at the end of other codes

This post was flagged by the community and is temporarily hidden.

Can you please share your full code and what route this is mapped to?

@CreatorRevealed support do not really deal with Workers issues unless you need a limit raise or such. Furthermore, emailing should not be encouraged. There is a place to create tickets on support.Cloudflare.com. This will link it to your account and make it way easier on the teams + yourself.

1 Like

Not related to Workers, but I would like to share an alternative method to perform the hotlink protection/redirect in case someone is interested.

First, create a URL Rewrite rule like this (under Transform Rules):

Next, create a page rule like this:

This is useful for someone that is looking for an inexpensive way to do that.

3 Likes

Hi I have generated the code from this website https://goindex.glitch.me/