이번 강의에서는
웹 애플리케이션에서
남은 작업들을 전부 검증해보겠습니다
그 다음 두번째 API로 Post 요청을 불러오고
CSRF 토큰과 관련된 변경사항들이
잘 작동되는지 확인해보겠습니다
여기 가지고 있는 자격증명으로
애플리케이션에 로그인을 시도하는데
예를 들어 happy@example.com과 12345 였습니다
로그인을 클릭하자마자
제 웹 애플리케이션에 로그인되고 대시보드가 표시됩니다
Account 탭을 눌러보겠습니다
account 테이블 안에 있는 모든
고객 정보들이 표시됩니다
특정 정보들 Account Number(계좌번호), Account Type(계좌종류)이나
Branch Address(지점 주소) 같은 것들은 account 테이블에서 가져옵니다
Name(이름), Email(이메일), Mobile Number(전화번호)와 같은 정보는
customer 테이블에서 오는 것입니다
이 API accounts는 잘 작동됩니다
대시보드로 돌아가 봅시다
balance를 클릭해봅시다
여기 보시면 현재 잔고와
이 은행 계정을 쓰면서
생긴 모든 거래내역들이 보입니다
amazon.com, Online Transfer 같은 거래내역이 보입니다
이는 삽입된 거래내역의
요약본이며
내역이 출금이었는지
입금이었는지 남은 잔고는 얼마였는지 등이 있습니다
비슷하게 loans와 같은 서비스도 검증해보겠습니다
loans도 역시 이 특정 은행에서
현재 보유중인 모든 loans 정보를 표시합니다
사용한 대출이 총 얼마인가
얼마를 냈는지, 부채는 얼마인지
대출의 시작일은 언제였는지 등등
마찬가지로 cards를 보면
여기도 이 은행과 관련된
모든 카드 정보를 표시합니다
GET API들이 잘 작동되고 있습니다
CSRF 체인이 잘 작동하고 있는지 확인하려면
보안된 API 중 하나를 POST 요청으로
불러와야 합니다
그래서 accounts, balances, loans나 cards 중
하나를 POST로 바꿔보겠습니다
아니면 이 contact us를 보안 API로 만들어서
CSRF 토큰 작업들을
검증해보고 그 다음에
다시 contact API를 공공 API로 돌려보겠습니다
이 contact API 를 보호된 API로 바꾸려면
먼저 이 API를 permit all 리스트에서 삭제해야 합니다
그 다음에 언급할 것은
authenticated 리스트입니다
이런 작업들로 contact API가 보호 처리 되었습니다
이 작업들 말고도
contact API 경로를
IgnoringRequestMatchers 리스트에서 제거합니다
더이상 contact가 공공 API가 아니기 때문이죠
그 다음에는
전에 구현했었던 CSRF 솔루션을
다시 돌려놓습니다
먼저 계획은 contact API를
UI 애플리케이션에서 로그인 함으로 테스트해보고 403 에러를 봐야합니다
지금 어떠한 CSRF 솔루션도 구현되어있지 않기 때문입니다
그 다음 CSRF 솔루션을 되돌려놓고
잘 작동하는지 확인합니다
오늘 계획을 잘 이해하셨습니까?
수정 내용을 저장하고 여기다 빌드를 해보겠습니다
그동안 contact API를 보호된 API로 바꿔놓고
프론트엔드에서도 작업해야할 것이 몇 가지 있습니다
첫번째는 header.component.html입니다
이 contact가 헤더로써
로그인된 유저들에게만 보여야 합니다
마찬가지로
이 != check를 수정해줍니다
=check 입니다
이제 contactors는
오직 로그인된 유저들에게만 보입니다
다음으로 해야 할 작업은
dashboard.service.ts를 보면
모든 REST API들이 백엔드에서
불러와지고 있습니다 공공 API 때문입니다
이 withCredentials 를 true로 보내지 않습니다
보안된 API와 보호된 API들은
이런 정보를 보낼 필요가 없기 때문입니다
authentication관련 쿠키들과
정보들만 UI 클라이언트에서
백엔드로 돌려보내집니다
이런 부분들을 설명하려고 했던 것이고
이제 이런 작업을 통해 contact API는
보호된 API처럼 실행되어야 하고 이것은 http.post 입니다
그리고 여기서 POST 요청을 만든다는 사실을 확인할 수 있습니다
먼저 로그인 한 다음 문의하기(Contact us) 페이지를 테스트해보면
실패 할 것입니다
지금 백엔드에는 CSRF 토큰이
구현되어 있지 않기 때문입니다
그 코드들은 지웠습니다
이제 다시 로그인해보겠습니다
지금은 문의하기 페이지를
볼 수 없습니다
그러니 자격증명을 입력하고
입력을 다 하고 나면
로그인을 눌러줍니다
contact us 탭을 클릭해서
정보들을 입력해보겠습니다.
일단 아무 데이터나 작성해보겠습니다
주제 칸에 그냥 아무 글이나 넣어봅니다
어차피 실패할 것이기 때문입니다
그리고 개발자 콘솔을 열어서
에러가 잘 보이도록 합니다
전송 버튼을 클릭하면
권한 접근 금지 에러가 발생합니다
왜냐하면 현재 contact API가
보호된 API로 실행 중이기 때문입니다
그리고 백엔드 서버에 CSRF 토큰 관련
구현을 전혀 하지 않았습니다
실패할 수 밖에 없습니다
그럼 이제 전에 구현해놓았던 CSRF를
다시 되돌려 보겠습니다
macOS로는 명령키 + Z 를 눌러주면 됩니다
이제 ProjectSecurityConfig 안에
CSRF 솔루션들이 되돌려졌습니다
이 솔루션 덕분에
이제 Spring Security 프레임워크가 로그인 동작 중에
CSRF 토큰을 생성할 겁니다
내용을 저장하고 여기에 빌드를 해보겠습니다
빌드가 완료되면
UI에서도 바뀐 것들을 검증해봅시다
CSRF 토큰을 생성하기 위해
UI 애플리케이션에서 다시 한번 로그인 해보겠습니다
다시 로그아웃을 해주고
애플리케이션에 다시 로그인해서 인증 정보를 입력합니다
로그인을 누르자마자 대시보드로 불러와졌습니다
이 유저의 네트워크를 확인해보면
쿠키 안에 CSRF 토큰을 확인할 수 있습니다
지금 JSESSIONID와 함께
백엔드에서 XSRF 토큰을 받는 중입니다
이것이 값입니다
보시다시피 이 쿠키들을
도메인 localhost에 할당되었고
오직 localhost를 통해 들어온 쿠키만 사용할 수 있습니다
이제 문의하기 페이지로 가줍니다
이번엔 적당한 데이터를 입력해줍니다
Good Day가 좋을 것 같습니다
이메일은 이렇게 tutor@easybytes.com
주제 칸에는 Sample query
메시지 칸에는 그냥
새로운 계정을 개설하려고 한다고 하면 될 것 같습니다
제출하려는 내용들입니다
이제 콘솔에서
전송하기 버튼을 누르면 이번엔
이번엔 확실히 성공적인 응답을 받아야 합니다
메시지가 제출되었다고 말입니다
그리고 이건 그에 상응하는 service request number 입니다
콘솔을 보시면
이번에는 권한 접금 금지 에러가 없습니다
CSRF 토큰을 Post 요청으로 보내고
백엔드에는 아무 문제가 없기 때문에
우리가 보내려는 요청을
잘 전달하는 것입니다
이제 contact API를 보호하기 위해 했던 작업을
전부 되돌려 보겠습니다
이 작업들을 되돌려 볼 것인데
/contact가 ignoringRequestMatchers로 들어오고
마찬가지로 더 되돌려 보자면
contact API를 authenticated 에서
permitAll로 옮깁니다
이걸로 백엔드 서버에서도
코드 수정이 다 완료되었습니다
그럼 내용을 저장하고 빌드를 해보겠습니다
다음 단계로는 UI 애플리케이션의 작업도
되돌려 보겠습니다
두 곳을 되돌려야 하는데
하나는 dashboard.service.ts
withcredentials 가 true 라는 것을
제거합니다
그 다음은 header.component.html
header.component.html 안에서
다시 != 조건으로 되돌려 줍니다
이제 문의하기 페이지는 누구나 접근할 수 있는 공공 페이지가 되었습니다
빠르게 검증해보겠습니다
로그아웃 해보겠습니다
이제 문이하기 페이지를 공용 페이지로 접근할 수 있습니다
이로써 이번 섹션에서
두 보안 개념에 대해
깊게 배워보았습니다
하나는 CORS 브라우저가 제공하는 보안 정책
또 하나는 CSRF 공격이었습니다
그리고 우리의 애플리케이션이
Spring Security 프레임워크를 활용해
두 개념을 잘 다룰 수 있는지 확인해보는 시간이었습니다
비슷하게 다가오는 섹션들에서는
더 흥미로운 주제들을
다뤄 볼 예정입니다
특히 심화 주제 중 JWT와 OR2
굉장히 흥미로운 주제일 것입니다
저와 함께 하는 과정을 즐기셨으면 좋겠습니다
이번 섹션을 마무리 하기 전에
이번 섹션에 관련한 프로젝트들을
GitHub에 올려놨는데 보여드리고자 합니다
GitHub 리포지터리 안에서
스크롤을 내려보면
section6라는 이름의 폴더가 있고
그 폴더 안에
CORS와 CSRF를 배워보기 위해 했던
작업들이 있습니다
section6를 클릭해보면
여러 폴더들이 있습니다
제일 첫번째꺼는 Angular 애플리케이션의
초기 코드가 있있습니다
이번 섹션의 초기 강의 내용입니다
그리고 섹션 마지막까지
작업했던 프로젝트와
모든 수정 작업들은
두번째 폴더 안에 담아 두었습니다
Angular 애플리케이션 안에는
CSRF 토큰과 관련된 작업만 해놓았습니다
CORS는 UI를 작업할 필요가 없었습니다
CSRF 토큰과 관련해서
공부했던 내용들을
더 잘 이해하고 싶다면
이 프로젝트를 참고하시기 바랍니다
일반 Maven Spring Boot 프로젝트는
springsecuritysection6라는 이름으로 있습니다
마지막으로 업로드 해둔 PDF에
로컬시스템 안에
Angular UI 애플리케이션을 구축할 때
필요한 내용이 있습니다
이것으로 이번 섹션을 마무리하겠습니다
감사합니다 다음 강의 때 뵙겠습니다
수고하셨습니다