피드백 스타일 : [Q&A 희망] Supabase를 사용해보면서 궁금한 점이 생겼어요!

강의 너무 잘 보고 있습니다! 완강 후 플랫폼 형태의 서비스를 만들어 보고 싶어서 전반적으로 통신하는 과정에서의 보안관련 이슈들이 이해가 잘 안가고 궁금한 것 같습니다. 혹시라도 질문들을 보시고 조언해 주실 부분이 있으시다면 부탁드립니다! 감사합니다!

Q: supabase에서 CORS 처리는 보통 어떤식으로 하나요?? supabase메뉴나 검색을 했을때는 edge function을 사용하는 방향으로 밖에 찾지 못했는데 특정 도메인에만 supabase api 접근 권한을 주려면 어떤 방법이 있을까요? anon key가 없다면 어차피 api 호출을 할 수 없으니 CORS에 대한 부분을 아예 신경쓸 필요가 없는 건지 API 호출 관련한 보안에 대한 부분이 궁금합니다!

A: 좋은 질문을 주셨네요! 우선 Supabase의 경우 저희가 CORS 설정을 별도로 해주지 않습니다. 말씀주신 것처럼 대시보드 상에도 CORS 설정을 별도로 해주는 부분이 없어요 ㅎㅎ

Supabase의 경우 저희가 CORS 설정을 해주지 않아도 API Key값만 잘 들어온다면 도메인에 크게 신경쓰지 않도록 설정이 되어있습니다. 다만, Supabase에서 제공하는 서버리스 기능인 Edge Function의 경우 직접 코드를 호스팅해서 배포하기 때문에 CORS 설정이 가능합니다.

Q: 배포 후에도 네트워크 탭을 보면 API를 호출하는 과정에서 anon key가 공개되어 버리는데 이 부분이 괜찮은건지 궁금합니다... 다른 방법이 있는 걸까요..??

A: Supabase에는 크게 2가지의 API Key가 있습니다. 하나는 Anon Key이고 하나는 Service Role Key 입니다.

Anon Key는 Anonymouns, 즉 공개적으로 사용이 가능한 API Key 입니다. 브라우저 상에서도 전부 사용이 가능한게 이 API Key의 특징이에요 🙂 API를 호출하는 과정에서 anon key가 공개되는건 자연스러운 일입니다.

다만 Anon Key를 사용할 때 모든 테이블, 모든 데이터에 접근할 수 있도록 하면 큰일이 나겠죠..! 이를 막아줄 수 있는 기능이 RLS(Row Level Security) 입니다. RLS에 대한 자세한 내용은 인스타그램 프로젝트 심화과정에서 설명을 드리고 있으니 해당 파트를 꼭 수강해주시길 바랍니다.

또 다른 API 키는 Service Role Key라고 불리는 어드민 API 키입니다. 해당 키는 절대로 브라우저 상에 노출되면 안됩니다. Service Role Key를 통한 API 호출의 경우 RLS 등의 보안 정책들이 무시되게 되며, 말 그대로 어드민 역할로서 API가 동작하게 됩니다. 저희 강의에서는 모든 유저들의 정보를 가져오는 API를 구현할 때 Service Role Key를 사용해서 구현을 진행했습니다.

Q: 기존에 멘토님 강의를 듣기전 react-query안에서 바로 supabase api를 호출하는 방식으로 개발했었는데 굳이 server action을 써야하는 이유를 잘 모르겠습니다. API 호출하는 부분과 client단 부분을 완전히 나눠서 사용하고 싶은데 server action을 사용하니 이게 불가능하더라구요!

A: 결론부터 말씀드리면, 수강생 분들께서 Next.js와 Supabase에 익숙해지셨으면 하는 마음에 최대한 Server Action을 사용하도록 강의를 제작했습니다 🙂 말씀주신 것처럼 react-query 안에서 바로 supabase api에 접근하도록 짜는게 오히려 권장되는 방향이에요.

유료 강의에서 설명드리는 RLS(Row Level Security)라는 개념은 강의 후반부에 등장합니다. 그 전까지는 RLS를 모두 꺼놓은 상태로 DB 테이블들을 생성하고 관리했어요.