Limiting access to video on webpage

I’m curious to know if I can configure the assets on my site, particularly video content, to not open if a user follows the URL in the video element path? Something like a token where the request is only valid if coming from the webpage I am hosting the video on?

You’re trying to prevent hotlinking, if I’m not wrong. There’s sadly no easy way to do this. You’d have to rely on Netlify functions. Unfortunately I don’t have a working example for this yet, but if I find or make one, I’ll update you.

Till then if anyone else chips in, that’d be awesome.

1 Like

As Hrishikesh has mentioned, I would use Netlify Functions to check the referrer and ensure it matches whatever domain you allow, then return the content.

@AaronP can you please demonstrate this?

I haven’t used Functions before and I’m trying since the past hour but I can’t seem to get it to work.

This kind of a thing would help me too.

Im currently working, however thinking a little more, I would imagine that I would use client-side js to pickup the referrer header and then if it matches what I accept then send the request for the video / image etc? Might not need functions. Ill try to look at this in a bit if I get a chance :slight_smile:

It’s a good experiment but you’ll be fighting an up-hill battle :stuck_out_tongue: Anything that’s publicly exposed on the web and available on a webpage will be… publicly available. Verifying that a video is being loaded through a browser or on a particular host/webpage is something that could easily be spoofed by someone on a command line. Public things are public :stuck_out_tongue:

Even if you wanted to build a user-authentication system whereby users have to login before seeing a particular video, once that video content is sent to that user over the web, they can download it. You may be able to make it difficult, but at the end of the day, you’re sending that video data to that user and they can capture those packets / that data. This tends to be why legal cases and licensing is more important than actual preventative measures — YouTube’s licensing can sue a company that’s downloading their videos without the correct licenses, but they can’t really stop them from doing it, logistically.

Anything beyond that is just smoke and mirrors :confused: embedding some sort of token into the HTML or even using a Function to get a one-time token and another to validate the token and display the video etc. etc. is all still public and anybody can walk through that process / get the data.

I hope that makes sense! Security is a powerful and important thing but we must be diligent in understanding the lines between content being public and it not. Obfuscating something is helpful but it’s still public. :+1:t2:

Hope that helps


Jon

I took this as not an issue of being able to download the video and then share but an issue of hotlinking the video onto their own site so then it’s using their netlify bandwidth for users not on their site?

If you add a referer check, it isn’t bulletproof and can be spoofed but would stop the typical copy url, request fetch onto it etc without extra effort going into it.

Just to add Hrishikesh, I checked the functions thing and you can access referer on the event object.

exports.handler = function(event, context, callback) {
  console.log(event.headers.referer)
 // then fetch xyz if referer = "my domain"
  callback(null, {
    statusCode: 200,
    body: "Hello, World"
  });
};

Ah, I understand. Well luckily you can’t actually host videos on Netlify :slight_smile: Netlify doesn’t support streamed media! And if you’re looking for large-file-size images to not load for other sites, you can just set some CORS headers in your _headers file :slight_smile:

Yeah I read that on a lot of places on the internet, but sadly, at least in netlify dev, this doesn’t work:

image

I had got some luck with this:

exports.handler = async (event, context) => {
  if (process.env.URL.includes(event.headers.host)) {
    return {
      statusCode: 200,
      headers: {
        Location: //load page,
      },
    }
  } else {
    return {
      statusCode: 301,
      headers: {
        Location: //error page,
      }
    }
  }
}

but that ends in an infinite loop.

Yeah, I think they meant they were hosting it somewhere else, and wanted to request it only from their domain :slight_smile:

Really? This is kind of new to me. I have been doing it on my personal portfolio website. The buffering was slow when I had the entire video as a MP4, but then I switched to smaller HLS files and it seems to work.

Lol sorry I keep misinterpreting you :stuck_out_tongue: but then this is just a matter of setting CORS header on whichever video hosting service is being used, not something that could be accomplished Netlify-side.

It’s likely that your browser just download the whole file then played it in both cases. That can work for smaller videos but it’s not recommended. Streaming protocols were made to allow users to load and watch videos with high performance instead of causing a giant loading roadblock :stuck_out_tongue: YMMV :smiley:

My bad, that’s true thanks @jonsully . Edited previous posts.

I suppose it would be easier on the host side of things but maybe they don’t provide that functionality for some reason? All just speculation until OP provides a little more insight :smiley: I haven’t been involved in Netlify specific usage for videos but this trick came to mind as soon as I read it haha.

For completeness sake @hrishikesh for your edification, I span up a little example here to show you that the function retrieves the referer.

https://quirky-hawking-e214fd.netlify.app/

2 Likes

Thanks. I guess it works when a link takes you to the function, which makes sense as there won’t be a referrer otherwise.

Thanks Jon, I appreciate the clarification. I suppose my goal is to just have some smoke and mirrors! I think at the point where a CLI can be used to download the file I’m fine to yield. I’d like to complicate it at least up to the point where a user can inspect the element and copy the link from the src attribute in the DOM. It is my current understanding that preventing hotlinking may achieve this?

I’m still learning a lot here, but if the videos are stored in the same repository as the site (its about 30Mbyte of data) I assumed they are also hosted by Netlify?

Yeah, the attribute can be copied but with hotlinking prevented, only your website will be able to play the video.

Yes, they’re.

1 Like

@rlhcxm After further reading, trying and testing, I think what you’re trying to achieve is not currently possible on Netlify. People have been requesting hotlink protection, but the closest anyone has come to this is by using CloudFlare’s hotlink protection.

Ah I see, well now I’ve got quite a roadmap to approach a solution! Thank you all for the input :blush: !

Hi there.

It seems you are looking for a DRM solution. You may head to Google’s Widevine, mainly for MPEG DASH, Apple FairPlay, mainly for HLS. Both of them can protect the files from the hotlink stuff by encrypting your video before distribution. It is better to spare enough time for this.

Hope my answer helps.

1 Like