항해 6주차 를 회고하며....

벌써.. 미니프로젝트 들어갔습니다!!
로그인 기능을 넣긴 했는데... 서버 연결에서 계속 실패하고 있습니다..
프론트에 연결하는 부분을 공부하다 보니.. cors가 무섭게 느껴지고 있습니다..

이번주 키워드는 cors!!

CORS

CORS란?

CORS(Cross-Origin Resource Sharing)는 출처가 다른 자원들을 공유한다는 뜻으로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념입니다. 직역하면, 교차되는 출처 자원들의 공유입니다. 다른 출처에 있는 자원을 요청한다고 하면, 이를 교차 출처 요청이라고 부릅니다.

교차 출처 리소스 공유

CORS

출처란?

먼저 출처라는 개념을 알아야 합니다. 다른 블로그에서 이쁘게 정리한 사진을 가져와봤습니다. 평소 접근하는 URL이 어떤 구성요로 이루어져 있는지 아래에 나와 있습니다. 여기서 어디까지를 같은 출처라고 부를까요?

https://beomy.github.io/tech/browser/cors/

위의 구성요소 중에서 Protocol + Host + Port 3가지가 같으면 동일 출처(Origin)라고 합니다.

동일 출처 예시

http://example.com/http://example.com/ HTTP 기본 Port인 80번이 생략되어있으므로 동일 출처입니다

다른 출처 예시

http://example.com/app1https://example.com/app2 Protocol이 다릅니다

다른 출처 요청일 경우, CORS 정책에 준수하여 요청해야만 정상적으로 응답을 받습니다.

다른 출처 요청의 위험성

<img>, <script>, <frame>, <video>, <audio> 등이 웹에 등장하면서, 페이지 로딩 이후에 브라우저에서 이러한 하위 자원들을 가져올 수 있게 되었습니다. 그러므로 동일 출처, 다른 출처 모두 호출이 가능하게 되었습니다

CORS 정책이 없고 모든 다른 출처 요청이 가능한 브라우저를 생각해봅시다.

내 은행 계좌 ㅠㅠ

홈페이지를 서핑하고 있는데, <script>가 심어진 evil.com 페이지를 열었다고 생각해봅시다. 굉장히 유용한 정보를 담고 있는 사이트이지만, 페이지를 열면서 <script>가 실행되어 은행에 'Delete /account'를 요청하도록 되어 있습니다. AJAX 호출로 은행 API를 호출하여 나의 은행 계좌를 삭제해버리는 사고가 발생합니다.

따라서, 다른 출처의 접근을 막기 위해서 동일 출처 정책이 등장했습니다.

동일 출처 정책(Same-origin policy)

동일 출처 정책(Same-origin policy)는 다른 출처로부터 조회된 자원들의 읽기 접근을 막아 다른 출처 공격을 예방합니다. 그러나,  다른 출처에서 얻은 이미지를 담는 <img>, 외부 주소를 담는 <link> 같은 여러 태그들을 허용합니다. 동일 출처 정책의 정확한 구현 명세는 없지만 최신의 브라우저들은 일정 규칙을 따르고 있습니다. ( RFC6454 )

동일출처 정책은 다른 출처 자원을 가져오는 것을 굉장히 제한적으로 허용했습니다. 또한 SPA와 미디어 중심 웹 사이트들이 더욱 늘어나고 있으므로 관련 규칙들도 계속 늘어납니다. 따라서, 다른 출처 리소스에 접근성을 높이기 위해서 CORS가 등장했습니다.

동일 출처 요청 vs 다른 출처 요청 그림

동일 출처 요청과 다른 출처 요청이 어떻게 다른지 그림을 통해서 비교해보겠습니다.

요청하는 클라이언트와 요청받는 서버가 같은 출처에 있으면 동일 출처, 서로 다른 서버에 있으면 다른 출처 요청입니다.

왼쪽의 핸드폰의 URL은 domain-a.com 입니다.

오른쪽 서버의 URL은 domain-a.com과 domain-b.com 2가지 입니다.

domain-a.com 유저가 domain-a.com 서버에 요청하면 동일 정책이기 때문에 아무런 문제가 없지만,domain-a.com 유저가 domain-b.com 서버에 요청하면 호스트(Host_가 다르기 때문에 다른 출처 요청을 합니다

도메인 이외에, 같은 프로젝트 내에 정의된 css 파일 요청은 동일 출처 요청이고,

font같은 경우에는 다른 외부 사이트에서 실시간으로 import를 통해 가져온다면 다른 출처 요청입니다.

이처럼, 같은 출처가 아닌 외부에 자원을 요청하는 경우가 있는지 잘 확인해보아야 합니다.

기본적으로 동일 출처 요청만 자유롭게 요청이 가능하며 동일 출처 정책(Same-Origin Policy) 이라고 합니다.

하지만 기준을 완화하여 **다른 출처 요청도 할 수 있도록 기준을 만든 체제가 다른 출처 정책(Cross-Origin Policy)**입니다.

• 참고

CORS with Spring

Cross-Origin Resource Sharing and Why We Need Preflight Requests

Deep dive in CORS: History, how it works, and best practices

교차 출처 리소스 공유 (CORS)

23.02.25

• 48일 해야할 일
  • [x] 알고리즘 문제 1개 풀기
  • [x] 미니 프로젝트 기획 수정 완료
  • [x] 회원가입, 로그인, JWT, 시큐리티 완성!!
  • [x] 로그인에서 에러 해결 완료 → 예외 처리 전까지 일단 텍스트로 전달함. 이건 예외처리하면 바로 json으로 변환 가능!
  • [ ] 카카오 로그인 기능 에러 해결하기

미니 프로젝트를 하고 있는데, 일주일이라는 시간에서 구현이 다 가능할지 의문이 들었습니다. 깃허브도 어려워서 다시 공부를 시작했습니다..!!! 로그인을 빨리 한 이유는 공통 작업을 해야하는 JWT와 시큐리티의 기틀을 잡아야 게시판을 만드는 분이 한결 수월하기 때문에 빨리 완성하게 되었다.

카카오 로그인으로 가입한 사람을 넣는게 힘들것 같다. 이미지를 넣는 것도 힘들어 보이는데 이건 꼭 완성하고 싶다!! 이거 다 하면 로그아웃도 해보고 싶다! 정말 하고 싶은건 많은데 시간이 부족한거 같아요ㅠㅠㅠㅠ

노트북을 맥으로 바꿔서 내일은 서버를 연결하는 연습을 할 생각입니다!
그래야 프론트분들이랑 연결도 하죵 ㅎㅎ

• 로그인 기능연결이 제대로 되지 않은 것을 추측

  @ResponseBody
      @PostMapping("/login")
      public ResponseEntity<MessageDto> login(@RequestBody @Valid LoginRequestDto loginRequestDto, HttpServletResponse reponse) {
          return userService.login(loginRequestDto, reponse);
      }
  

  @Transactional(readOnly = true)
      public void login(LoginRequestDto loginRequestDto, HttpServletResponse response) {
          String username = loginRequestDto.getUsername();
          String password = loginRequestDto.getPassword();
  
          // 사용자 확인
          User user = userRepository.findByUsername(username).orElseThrow(
                  () -> new IllegalArgumentException("등록된 사용자가 없습니다.")
          );
          // 비밀번호 확인
          if(!user.getPassword().equals(password)){
              throw  new IllegalArgumentException("비밀번호가 일치하지 않습니다.");
          }
  
          response.addHeader(JwtUtil.AUTHORIZATION_HEADER, jwtUtil.createToken(user.getUsername(), user.getRole()));
      }
  

  @ResponseBody
      @PostMapping("/login")
      public String login(@RequestBody @Valid LoginRequestDto loginRequestDto, HttpServletResponse reponse) {
          userService.login(loginRequestDto, reponse);
          return "로그인 성공";
      }
  

  로그인 쪽에 연관관계를 제대로 넣어주지 않아서 생긴오류!
• // 비밀번호 일치 확인 if(!user.get().getPassword().equals(password)){ throw new IllegalArgumentException("비밀번호가 일치하지 않습니다."); }
• 2023-02-25 01:03:28.356 ERROR 9912 --- [nio-8080-exec-3] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is java.lang.IllegalArgumentException: 비밀번호가 일치하지 않습니다.] with root cause java.lang.IllegalArgumentException: 비밀번호가 일치하지 않습니다.
• 카카오 로그인 기능
• 회원가입에 이메일이 들어 있지 않고 유효성에서 탈락이 되는데 가능하는가가 문제였다. 아직 해결은 안되었지만, 연결은 성공했고, 가입하고 다시 돌아오는 과정에서 DB에 저장이 되지 않아서 어떻게 해결해야할지 고민하는중! 이메일을 추가하거나 아이디를 입력하는 곳에서 유효성을 수정하는 식 (이메일로 가입하게 하는 식으로 변경하면 가능할 것 같다. 결국 이메일만 받아오면 해결되는 문제가 아닐까 추측중!!

23.02.24

• 47일 해야할 일
  • [x] spring 강의듣기! (복습! + HTTP강의 5개 듣기)
  • [x] 알고리즘 문제 1개 풀기
  • [x] 미니 프로젝트 기획 완료
  • [x] 회원가입, 로그인 구현 완료

오늘은 미니 프로젝트를 시작했습니다~

프론트와 백앤드의 첫 협업!!

기획을 세분화 해서 하긴했는데, 많이 어렵군요..

로그인과 회원가입을 맡기로 하고 코드를 쭉 쓰고 있는데, 현재는 시큐리티를 적용하고 있습니다.

카카오톡 로그인을 추가로 구현은 했는데, 아직 시큐리티가 완성되지 않아 에러 투성이~

자기 전까지 시큐리티를 완성하고 잘 계획입니다!

아침에 깃허브 프로젝트를 활용해서 커밋할 계획입니다!

오늘 작성한 ERD

https://drawsql.app/register

ERD 디자인이 예쁜 툴을 발견!! 다시 작성할 때 사용하기로 했습니다!