CODEWITHSUNDEEP
next.jssupabase
Manolo Rajaonah
Manolo Rajaonah

Reputation: 16

NEXTJS and Supabase, Image security

how can I deny access of an Image URL only outside of my WEB application. When i put the Image storage and copy that in new window of chrome for example, It should be not appear. How can I implement that.

I tried to use createSignedUrl() but with no result.

Upvotes: 0

Views: 572

Answers (2)

dshukertjr
dshukertjr

Reputation: 18670

It is not possible to prevent images from being displayed only within your application. That is why you should protect your data properly using RLS and signed URLs. You can read about how to setup RLS on your Supabase storage here.

You should set your expiration time for the signed URL as short as needed to display the image. That way, if someone with bad intent obtains the URL of your image, the URL is already expired, and they cannot view the image.

Upvotes: 0

Manolo Rajaonah
Manolo Rajaonah

Reputation: 16

'use client';

interface ISupabaseLoaderParams {
  src: string;
  width: number;
  quality?: number;
}

const bucketName: string = process.env.NEXT_PUBLIC_BUCKET_NAME || '';

export default function supabaseLoader({
  src,
  width,
  quality,
}: ISupabaseLoaderParams) {
  const url = new URL(
    `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/${bucketName}/${src}`,
  );
  url.searchParams.set('width', width.toString());
  url.searchParams.set('quality', (quality || 75).toString());

  return url.href;
}

Here is my code, how to sign this Image

Upvotes: 0

Related Questions