Computer Science Knowledge Storage

제가 공부한 내용을 정리하는 블로그입니다.
아직 많이 부족하고 배울게 너무나도 많습니다. 틀린내용이 있으면 언제나 가감없이 말씀해주시면 감사하겠습니다😁

스프링부트와 리액트를 활용해 로그인을 구현 프로젝트를 진행합니다. 순서는
1. 프로젝트 초기화
2. 쿠키를 이용한 로그인 구현
3. 세션을 이용한 로그인 구현
4. JWT 토큰을 활용한 로그인 구현
입니다. 

네번째는 Security 이론입니다.

Spring Security란

스프링 보안은 강력하고 고도로 사용자 지정 가능한 인증 및 액세스 제어 프레임워크입니다. 스프링 기반 애플리케이션을 보호하기 위한 사실상의 표준입니다.

Spring Security는 Java 애플리케이션에 인증과 권한 부여를 모두 제공하는 데 중점을 둔 프레임워크입니다. 모든 Spring 프로젝트와 마찬가지로 Spring Security의 진정한 힘은 사용자 지정 요구 사항을 충족하기 위해 얼마나 쉽게 확장할 수 있는지에서 찾을 수 있습니다
- Spring Security 공식 docs

Spring Security는 Spring 기반 애플리케이션의 인증, 권한관리 그리고 데이터 보호기능을 포함하는 프레임워크입니다. 인증(Authentication), 권한 부여(Authorization), 데이터 보호 등의 기능을 제공하여 애플리케이션의 보안 요구 사항을 쉽게 해결할 수 있도록 돕습니다. 특히 웹 애플리케이션의 다양한 보안 위협(CSRF, XSS 등)을 방어하고, 사용자가 인증된 상태에서 적절한 리소스 접근 권한을 갖도록 제어합니다.

Spring Security의 핵심 역할은 다음과 같습니다:

• 사용자가 누구인지 확인(인증)
• 사용자가 무엇을 할 수 있는지 결정(권한 부여)
• 웹 애플리케이션의 데이터를 안전하게 보호

Spring Security를 사용하는 이유

1. 보안 위협 방어
   • Spring Security는 CSRF(Cross-Site Request Forgery), XSS(Cross-Site Scripting), 세션 고정 공격(Session Fixation) 등 다양한 보안 위협에 대한 기본 방어 기능을 제공합니다.
2. 인증과 권한 관리의 편의성
   • 기본적으로 제공되는 인증 및 권한 부여 로직을 활용하거나, 커스터마이징하여 복잡한 보안 요구 사항을 구현할 수 있습니다.
3. 손쉬운 통합
   • Spring Security는 Spring Framework 및 Spring Boot와 자연스럽게 통합되며, 설정과 구성이 간단합니다.
4. 확장성과 커스터마이징
   • 사용자 정의 인증, 권한 정책, 필터 등을 구현하여 프로젝트 요구 사항에 맞는 보안 구조를 설계할 수 있습니다.
   • IoC/DI 패턴과 같은 확장 패턴을 염두하여 개발이 가능하였습니다.
5. 업계 표준 준수
   • OAuth2, JWT, OpenID Connect 등 표준 보안 프로토콜을 지원하여 최신 보안 트렌드에 맞는 애플리케이션을 개발할 수 있습니다.

Spring Security 주요 개념

1. Authentication (인증)
   인증은 사용자가 본인이 맞는지를 확인하는 과정입니다. 사용자가 올바른 자격 증명(예: 아이디와 비밀번호)을 제공했는지 확인합니다.
   • AuthenticationManager: 인증 처리를 담당하는 인터페이스.
   • UserDetailsService: 사용자 정보를 로드하는 서비스.
   • PasswordEncoder: 비밀번호 암호화 및 검증 처리.
   • 인증방식
     • credential 방식: username, password를 이용하는 방식
       principal -> 아이디(username), credential -> 비밀번호(password)
     • 이중 인증(twofactor 인증): 사용자가 입력한 개인정보를 인증 후, 다른 인증 체계를 이용하여 두가지의 조합으로 인증하는 방식
     • 하드웨어 인증: 자동차 키와 같은 방식
2. Authorization (인가)
   권한 부여는 사용자가 특정 리소스나 작업을 수행할 권한이 있는지 확인하는 과정입니다.
   • GrantedAuthority: 사용자의 권한 정보.
   • AccessDecisionManager: 권한 부여 판단을 담당.
3. Security Context
   SecurityContextHolder를 통해 애플리케이션 전반에서 현재 사용자의 인증 및 권한 정보를 관리합니다.
   
   
4. Filter Chain
   Spring Security는 HTTP 요청을 처리하기 위해 여러 필터를 체인 형태로 연결합니다.
   주요 필터:
   • UsernamePasswordAuthenticationFilter: 사용자 인증 처리.
   • BasicAuthenticationFilter: HTTP Basic 인증 처리.
   • CsrfFilter: CSRF 보호.

Spring Security 동작 원리

아키텍처

1. 클라이언트가 서버에 요청을 보냅니다.
2. AuthenticationFilter가 요청을 인터셉트하고 이를 AuthenticationManager에 전달합니다.
3. AuthenticationManager는 등록된 AuthenticationProvider를 탐색하여 인증 처리를 위임합니다.
4. AuthenticationProvider는 사용자 데이터를 확인하고, 인증된 UserDetails 객체를 반환합니다.
5. 인증 결과는 SecurityContextHolder에 저장되며, 저장된 사용자 정보는 Spring Controller에서 활용할 수 있습니다.

참조

제가 공부한 내용을 정리하는 블로그입니다.
아직 많이 부족하고 배울게 너무나도 많습니다. 틀린내용이 있으면 언제나 가감없이 말씀해주시면 감사하겠습니다😁

스프링부트와 리액트를 활용해 로그인을 구현 프로젝트를 진행합니다. 순서는
1. 프로젝트 초기화
2. 쿠키를 이용한 로그인 구현
3. 세션을 이용한 로그인 구현
4. JWT 토큰을 활용한 로그인 구현
입니다. 

세번째는 세션을 이용한 로그인 구현입니다.

서론

이전 쿠키 포스팅에서 STATELESS한 HTTP 프로토콜에서 STATEFUL한 서비스를 위한 장치로 헤더에 쿠키를 저장하는 로직으로 설계하였습니다.

하지만 해당 방법은 개인 정보들을 브라우저 단에 저장하여 위변조 및 도용이 쉽다는 문제가 있습니다. 보안적인 부분은 클라이언트가 아닌 서버에서 관리하여 외부로 해당 개인정보를 숨겨 보안성을 높여야합니다. 따라서 클라이언트는 키만 가지고 있으며 해당 정보는 서버에서 관리하고 있는 방법을 세션이라고 합니다.

저는 이 포스팅에서 세션을 두가지 방법으로 구현합니다. 첫번째는 쿠키를 이용한 세션과 속성 기반으로 세션을 구현할 예정입니다.

세션

정의

세션(Session)은 서버가 클라이언트의 상태를 유지하기 위해 일정 기간 동안 저장하는 정보를 의미합니다. 클라이언트의 요청마다 동일한 사용자임을 식별할 수 있도록 하는 상태 관리 방식입니다. 보통 서버는 클라이언트가 전달한 세션 ID를 기반으로 특정 사용자와 연결된 정보를 조회합니다.

역할

• 사용자 식별: 세션 ID를 통해 동일 클라이언트의 요청임을 서버가 식별합니다.
• 상태 유지: 로그인 상태, 장바구니 정보 등 사용자의 상태 정보를 서버에서 저장 및 관리합니다.
• 보안 강화: 민감한 정보는 서버에 저장하고, 클라이언트는 세션 ID만 전달하므로 정보 위변조 위험을 줄입니다.

구조

• 클라이언트 측
  • 브라우저는 서버로부터 세션 ID를 받아 저장(주로 쿠키에 저장)하고, 이후 요청마다 세션 ID를 포함하여 서버에 전달합니다.
• 서버 측
  • 서버는 세션 저장소(메모리, 데이터베이스 등)에 세션 ID와 상태 정보를 저장하고, 세션 ID를 키로 사용하여 클라이언트 데이터를 관리합니다.

장점

1. 보안성
   • 민감한 데이터가 서버에 저장되므로 클라이언트에서 정보가 노출될 위험이 줄어듭니다.
2. 유연성
   • 상태 정보는 서버에 저장되므로 클라이언트가 브라우저를 닫더라도 세션이 만료되지 않으면 상태를 유지할 수 있습니다.
3. 확장성
   • 서버의 세션 저장소를 확장하여 대량의 사용자 상태를 관리할 수 있습니다.

단점

• 서버 부담
  • 세션 데이터를 서버에서 관리하므로 사용자 수가 많아질수록 서버 메모리나 저장소 사용량이 증가합니다.
• 스케일링 문제
  • 서버가 분산 환경일 경우, 세션 데이터를 공유하기 위한 추가 작업(예: 세션 클러스터링)이 필요합니다.
• 만료 관리
  • 세션 만료 시간 설정이 필요하며, 만료되지 않은 오래된 세션 데이터가 서버의 리소스를 점유할 수 있습니다.

Session-login(쿠키 기반)

Frontend

localhost:3000/login-session에 접근하기 위해 routepath를 지정합니다.

// RoutePath.ts
export enum RoutePath {
    HOMEPAGE = "/",
    COOKIE = "/login-cookie",
    SESSION = "/login-session"
}

// AppRoutes.tsx

const AppRoutes = () => {
    return (
      <Router>
          <Routes>
              <Route path={RoutePath.HOMEPAGE} element={<HomePage />} />
              <Route path={RoutePath.COOKIE} element={<CookieLogin />} />
              <Route path={RoutePath.SESSION} element={<SessionLogin />} />
          </Routes>
      </Router>
    )
  }
  
  export default AppRoutes

로그인과 로그아웃 기능입니다. 이전 쿠키와 동일하지만 credential을 include 속성을 넣어줍니다.

const loginV1 = async () => {
    try {
        const response = await fetch('http://localhost:8080/session/loginV1', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: new URLSearchParams({
                username: username,
                password: password
            }),
            credentials: 'include'
        });

        if (response.ok) {
            const data = await response.text(); // 서버의 응답 메시지
            console.log(data);
            setLoginMessage(data);
            setIsAuthenticated(true);
        } else {
            const errorData = await response.text();
            setLoginMessage('Login failed: ' + errorData);
        }
    } catch (error) {
        setLoginMessage('Login failed: ' + error);
    }
};

// 로그아웃 V1 (세션 만료)
const logoutV1 = async () => {
  try {
      const response = await fetch('http://localhost:8080/session/logoutV1', {
          method: 'POST',
          credentials: 'include'
      });

      if (response.ok) {
          const data = await response.text(); // 서버의 응답 메시지
          console.log(data);
          setLogoutMessage(data);
          setIsAuthenticated(false);
      } else {
          const errorData = await response.text();
          setLogoutMessage('Logout failed: ' + errorData);
      }
  } catch (error) {
      setLogoutMessage('Logout failed: ' + error);
  }
};

Backend

마찬가지로 username과 password를 토대로 member가 존재하면 SessionManager를 통해 쿠키를 생성하여 response에 넣어줍니다.

@Slf4j
@RestController
@RequestMapping("/session")
@RequiredArgsConstructor
@CrossOrigin(origins = "http://localhost:3000", allowedHeaders = "*", allowCredentials = "true")
public class SessionController {

    private final AuthService authService;
    private final SessionManager sessionManager;


    @PostMapping("/loginV1")
    public ResponseEntity<String> loginV1(@RequestParam String username,
                                          @RequestParam String password,
                                          HttpServletResponse response) {
        log.info("session cookie login id: {}, password: {}", username, password);

        // Authorization User
        Member member = authService.login(username, password);

        if (member != null) {
            sessionManager.createSession(member, response);
            return ResponseEntity.ok("Success session-login");
        }

        return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Fail login");
    }

    @PostMapping("/logoutV1")
    public ResponseEntity<String> logoutV1(HttpServletRequest request) {
        log.info("logout session cookie");

        if (sessionManager.expire(request)) {
            return ResponseEntity.ok("Success session-logout");
        }

        return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Fail logout");
    }
}

이 프로젝트에서는 sessionManager를 메모리에서 관리합니다. 쿠키 이름을 spring-react-auth의 쿠키로 sessionId를 UUID 값으로 넣어줍니다. 

@Component
public class SessionManager {

    public static final String SESSION_COOKIE_NAME = "spring-react-auth";
    private final Map<String, Object> sessionStore = new ConcurrentHashMap<>();

    public void createSession(Object value, HttpServletResponse response) {
        // Generate a unique session ID and store the session data.
        String sessionId = UUID.randomUUID().toString();
        sessionStore.put(sessionId, value);

        // Create a session cookie with the generated session ID.
        Cookie sessionCookie = new Cookie(SESSION_COOKIE_NAME, sessionId);
        sessionCookie.setHttpOnly(true); // Enhance security by restricting client-side access
//        sessionCookie.setPath("/");      // Make the cookie accessible across the application
        response.addCookie(sessionCookie);
    }
    
    public boolean expire(HttpServletRequest request) {
        Cookie sessionCookie = findCookie(request, SESSION_COOKIE_NAME);
        System.out.println("sessionCookie = " + sessionCookie.getName());

        if (sessionCookie != null) {
            sessionStore.remove(sessionCookie.getValue());
            return true;
        }
        return false;
    }

    public Cookie findCookie(HttpServletRequest request, String cookieName) {
        if (request.getCookies() == null) {
            return null; // No cookies present in the request
        }
        return Arrays.stream(request.getCookies())
                .filter(cookie -> cookie.getName().equals(cookieName))
                .findFirst()
                .orElse(null);
    }
}

Session-login(속성 기반)

Frontend

로그인과 로그아웃 기능입니다. 앞선 기능들과 동일합니다.

// 로그인 V2 (세션 객체로 로그인)
const loginV2 = async () => {
  try {
      const response = await fetch('http://localhost:8080/session/loginV2', {
          method: 'POST',
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
          },
          body: new URLSearchParams({
              username: username,
              password: password
          }),
          credentials: 'include'
      });

      if (response.ok) {
          const data = await response.text(); // 서버의 응답 메시지
          setLoginMessage(data);
          setIsAuthenticated(true);
      } else {
          const errorData = await response.text();
          setLoginMessage('Login failed: ' + errorData);
      }
  } catch (error) {
      setLoginMessage('Login failed: ' + error);
  }
};
  
// 로그아웃 V2 (세션 무효화)
const logoutV2 = async () => {
  try {
      const response = await fetch('http://localhost:8080/session/logoutV2', {
          method: 'POST',
          credentials: 'include'
      });

      if (response.ok) {
          const data = await response.text(); // 서버의 응답 메시지
          setLogoutMessage(data);
          setIsAuthenticated(false);
      } else {
          const errorData = await response.text();
          setLogoutMessage('Logout failed: ' + errorData);
      }
  } catch (error) {
      setLogoutMessage('Logout failed: ' + error);
  }
};

Backend

이번에는 속성을 통해서 넣어줍니다. LOGIN_MEMBER의 속성에 member를 넣어주면 JSESSIONID가 할당됩니다.

@Slf4j
@RestController
@RequestMapping("/session")
@RequiredArgsConstructor
@CrossOrigin(origins = "http://localhost:3000", allowedHeaders = "*", allowCredentials = "true")
public class SessionController {

    private final AuthService authService;
    private final SessionManager sessionManager;
    private final String LOGIN_MEMBER = "Spring-React-Session-Login";

    @PostMapping("/loginV2")
    public ResponseEntity<String> loginV2(@RequestParam String username,
                                          @RequestParam String password,
                                          HttpServletRequest request) {
        log.info("session Attribute login id: {}, password: {}", username, password);

        Member member = authService.login(username, password);
        if (member != null) {
            // Login success handling
            // Return the existing session if it exists; otherwise, create a new session
            HttpSession session = request.getSession();
            // Store login member information in the session
            session.setAttribute(LOGIN_MEMBER, member);

            return ResponseEntity.ok("Success session-login using request");
        }

        // Return an error response if login fails (optional: add this block for clarity)
        return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Invalid username or password");
    }

    @PostMapping("/logoutV2")
    public ResponseEntity<String> logoutV2(HttpServletRequest request) {
        log.info("logout session Attribute");

        StringBuilder sb = new StringBuilder();
        sb.append("Success session-logout: ");

        HttpSession session = request.getSession(false);
        if (session != null) {
            Member member = (Member) session.getAttribute(LOGIN_MEMBER);
            System.out.println("session value: " + (member == null ? "not found member" : member.getUsername()));
            session.invalidate();
            sb.append("expire session");
        }

        return ResponseEntity.ok(sb.toString());
    }
}

결과

깃허브 및 참조