방지하는 쉬운 팁들을 알려드릴게요.
- cloudflare tunnel 을 이용하세요.
tailscale 로 프록시로만 외부에서 접근가능하게 하는 방식이 있는데, 이 부분은 셋업이 어려우실 수도 있고, 폰에 별도로 tailscale 앱을 깔아야하기도 하고 vpn 껏다켰다 좀 귀찮아요.
그래서 쓰는게 cloudflare tunnel 입니다.
사진에 보이는거처럼 Cloudflare Access 에서 설정 가능하거나, API Key 설정 후에 AI 한테 설정해달라고 하면 되요.
이건 tailscale 처럼 내부적으로 터널을 뚫고, 클라우드 플레어에 연결한 본인 도메인의 서브도메인을 내 내부 컴퓨터 포트랑 연결해줘요.
연결된 도메인으로만 접근이 가능해집니다. 그럼 여기에 구글 로그인이나 그런 기본 설정을 하면 일단은 어느정도 외부에서 내 내부 웹 서버는 못 들어오는 상태에요.
근데 문제는 누구나 일단 내 웹서버에 요청이 가능해지는게 문제인데, 이 부분은 cloudflare access 에 보면 Policy 라는 부분에서 정책을 설정할 수 있어요.
특정 이메일로 OTP 연결을 해야지만 내 도메인에 접근이 가능하도록 해주는 기능이에요.
이거를 해두면 로그인 보안 + nextjs 와 같은 서버 컴포넌트를 쓰는 프레임워크에 로그인 없이도 보안 취약점 노리는 시도 자체가 막혀요.
구글 로그인만 추가하면 보안이 된다고 생각하는 분이 많은데.. 위에 사진에 나온 방식은 로그인으로 해결되는게 아니에요.
nextjs 는 링크 요청할 때, 서버를 통해 요청하는 /api 형태나 _next chunk 부분에서 서버 컴포넌트를 통하는 요청에 대해서 실제 해당 서버에서 실행되는 부분을 이용한 취약점 공격이에요.
그렇기에 그냥 로그인과 관계없이 공격당할 수 있어요.
물론 최신 버전의 nextjs 에는 위에 말한 취약점은 고쳐져있어요.
하지만 고친 이후에도 여러번 취약점이 발견되는게 서버 컴포넌트입니다. 언제든지 털릴 수있기에 애초에 접근을 막는 cloudflare access 방식이 안전해요.
- nextjs 업데이트 또는 nextjs app router 대신 pages 사용.
nextjs 가 대부분 웹 페이지에서 쉽게 만들어주는 템플릿 사이트에요.
왜냐하면 shadcn 이라 불리는 UI 컴포넌트가 대부분 바이브코딩에서 쓰는 UI 라이브러리인데, 여기 개발자가 vercel 출신이에요.
vercel 은 nextjs 를 만든곳이고 그러다보니 AI 들이 활용하기 좋게 툴들을 잘 만들어놔서 그런지 바이브코딩을 하면 nextjs 로 많이 만들어줘요.
그리고 최신 스택은 무조건 app router 방식인데, 이 방식은 위에 말한거처럼 취약점이 많아요.
저는 pages 를 많이 썼다가 최근에 app router 로 옮기긴했는데, pages 로도 문제가 거의 없어요.
그렇기 때문에 보안이 걱정되면 pages 로 전환하거나, nextjs 최신 업데이트를 자주 해주세요.
일단은 cloudflare tunnel + access 조합을 강추. 예전에도 추천드렸던 조합입니다.