정호성

작성한 질문수 2

1

@정호성

백엔드 서버 측에서도 2중으로 권한 검증을 진행하되 아래와 같이 bind를 사용해서 createReviewAction.bind(null, bookId) 형태로 보내게 되면 데이터 조작을 방지하여 보안을 좀 더 강화할 수 있습니다.

// ReviewEditor.tsx
const ReviewEditor = ({ bookId }: ReviewFormProps) => {
  return (
    <section>
      <form action={createReviewAction.bind(null, bookId)}>
        <input required name="content" type="text" placeholder="리뷰 내용" />
        <input required name="author" type="text" placeholder="작성자" />
        <button type="submit">리뷰 작성</button>
      </form>
    </section>
  );
};

// createReviewAction.ts
export const createReviewAction = async (bookId: number, formData: FormData) => {
  const content = formData.get("content")?.toString();
  const author = formData.get("author")?.toString();

  if (!bookId || !content || !author) {
    return;
  }

  return;

  await createReview({ bookId, content, author });
};

 

1

안녕하세요 이정환입니다.

예리하시군요 👀 요런 엣지 케이스 때문에 보통은 백엔드 서버 측에서도 2중으로 권한 검증을 진행합니다. 만약 별도의 백엔드 서버 검증 로직 없이 기능을 구현해야 한다면 서버 액션 내부에 권한 검증 로직을 설정해 주어야 합니다.

0

안녕하세요, 인프런 AI 인턴입니다.

정호성님, 서버 액션을 통해 클라이언트에서 데이터를 전송할 때 hidden input의 value를 조작할 수 있다는 점은 보안 측면에서 우려될 수 있습니다. 데이터 조작을 방지할 수 있는 몇 가지 방법을 소개할게요.

1. 서버측 검증 강화

서버에서 데이터를 수신할 때, 모든 요청 데이터의 유효성 검증을 철저히 해야 합니다. 클라이언트 측에서 데이터가 조작될 수 있다는 점을 항상 염두에 두고, 서버에서 데이터가 신뢰할 수 있는지 확인하십시오.

2. 인증 및 인가

사용자가 적절한 권한을 가지고 있는지 확인하는 과정을 추가하십시오. JWT 토큰이나 세션을 활용하여 사용자 인증 상태를 검증하는 것이 좋습니다.

3. 데이터 검증 및 리다이렉션

데이터의 무결성을 검증할 수 있도록 서버에서 데이터베이스의 상태와 비교하여 무결성을 확인하고, 차이가 있을 경우 적절한 리다이렉션 또는 에러 메시지를 사용자에게 보여줍니다.

4. 서버 액션 개선 방법

서버 액션에서 처리할 때는 사용자로부터 온 모든 데이터를 신뢰하지 말고, 데이터베이스의 상태나 서버에서 권한 검사로 확실하게 검증한 후 처리하는 것이 안전합니다. 필요하다면 CLUE 같은 보안 강화를 위해 추가적인 미들웨어를 사용할 수 있습니다.

관련하여 더 구체적으로 다루고 있는 기존 답변을 확인하시기 위해 유사한 질문이 등록된 기존 게시물도 함께 살펴보세요.
백엔드 서버가 존재할 때에도 서버 액션을 사용하는 것이 바람직할까요?

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.