Prevent access to non-transformed Netlify Large Media images

Support
,
1

For a non-profit client, I’m designing and building a website on the JAMstack. I’m intending to use Netlify’s Large Media on the project, mainly to make use of the image transformations. As this is a non-technical client and for the sake of being future proof, I’d prefer the users to upload images in their original quality and filesize (through Netlify CMS, of course). They are concerned however, about the original images being available to the public by altering the image url.

Is there a way to prevent access to the original images, but allow access to the transformed images? I know this is not a native feature of NLM, but maybe it could be done with redirects? If not, consider this a feature request :upside_down_face:

Allow:
https://domain.netlify.app/assets/images/uploads/filename.jpg?nf_resize=fit&w=768&h=768

https://www.custom-domain.com/assets/images/uploads/filename.jpg?nf_resize=fit&w=768&h=768

Disallow:
https://domain.netlify.app/assets/images/uploads/filename.jpg

https://www.custom-domain.com/assets/images/uploads/filename.jpg

2

Maybe you can use Edge Handlers and check if a query parameter exists. If not, redirect to another page (possibly a 403).

1 Like
3

Hey @tomrutgers :wave:

This is a really great question! I sent this over to a member of our team who has some deeper knowledge of large media files. Hopefully we can get some ideas generated for you here.

1 Like
5

@hrishikesh Could you elaborate on what that would look like in terms of scripts, settings etc?

6

Since it’s in Beta, I haven’t tried it myself, but it might look something like this:

export function onRequest(event) {
  if (event.request.url.pathname.endsWith('jpg')) {
    event.replaceResponse(() => {
    if (window.location.search) {
      var response = new Response({
        status: 200,
        headers: {
          location: event.request.url
        }
      });
    } else {
      var response = new Response({
      '<h1>Access Denied</h1>',
        status: 403,
        headers: {
          'content-type': 'text/html'
        }
      });
    }
    return response;
    });
  };
};

Something along these lines might work. If this works, it will work with any query parameter, so you might have to add additional checks to see if they’re only the parameters that you want to allow.

1 Like
7

Hi, @tomrutgers. I don’t have a good solution for you using redirects. I’ve not found a way using redirects to block access to the untransformed image.

I can enter a feature request for this but there isn’t much activity on the Large Media project so I don’t have a promise of when or even if that feature might become available. Should I proceed with that feature request?

8

Thanks @luke, a feature request would be good, although I’ll probably resort to Github actions or Edge Handlers on the short term.

1 Like