프론트단 필수 모듈
- crypto.js
[암호화 방식 개요]
- 서버 쪽에서 양방향 암호화를 위한 퍼블릭 키, 프라이빗 키 생성
- 프론트 쪽에서 AES 키 생성 후 자체적으로 pw 1차 암호화
- 프론트 쪽에서 생성한 AES키를 서버쪽에서 전달받은 퍼블릭 키로 암호화
- 서버쪽에 암호화된 AES키와 pw 전달
- 서버쪽은 전달받은 AES키를 먼저 복호화 하고
- 최종적으로 복호화된 AES키를 가지고 pw를 복호화
[세부 내용 - 프론트 동작]
1. 프론트단 AES 키 생성
- crypto 모듈 사용. 16바이트 base64
- 로컬 스토리지에 생성한 키 저장
2. 사용자 pw 암호화
- 16바이트 난수 iv 생성
- 로컬 스토리지에서 AES 키 져옴
- 난수 iv와 AES키로 crypto 모듈을 사용해 암호화 로직 생성 (aes-128-cbc 방식)
- 생성된 암호화 로직으로 사용자 pw 암호화 (hex 형)
- 암호화된 사용자 pw와 난수 iv 리턴 (둘 다 hex형)
3. 암호화된 pw 문자열 생성
- 이하의 내용을 모두 hex형으로 통일해 하나의 문자열로 합침
서버에서 정해준 임의의 prefix + iv길이 + iv + 암호화된 pw길이 + 암호화된 pw
4. 서버에서 양방향 암호화를 위한 퍼블릭, 프라이빗 키 생성 후 퍼블릭 키를 보내줌
5. 서버에서 받은 퍼블릭 키를 가지고 로컬 스토리지의 AES키를 또 암호화
6. 최종적으로 uid, 암호화된 pw 문자열, 암호화된 AES 키를 서버에 전송
[세부 내용 - 서버 동작]
7. 서버는 암호화된 AES키를 가지고 있는 프라이빗 키를 사용해 복호화
8. 암호화 된 pw 문자열에서 iv와 암호화된 pw 추출
9. 추출한 iv와 복호화 한 AES 키를 가지고 암호화된 pw 복호화
10. 로그인 성공 유무 판별
[유의사항]
- 서버와 프론트는 서로 암호화 방식을 알고 있어야 한다. (프론트에서 암호화한 것을 서버에서 복호화 해야하기 때문)
- 서버에서 정해주는 prefix는 데이터 통신으로 받지 않는다.
- 로그인 확인이 완료된 다음에도 로그인 권한이 필요한 모든 데이터 통신은(계정 설정 변경) 2,3 동작 후 암호화된 문자열을 함께 보낸다. 서버는 로그인 시점에서 이미 AES키를 받아 복호화 해서 가지고 있기 때문에 AES키를 암호화 하고 전송하는 과정은 반복하지 않는다. 서버는 가지고 있는 AES키를 이용해 통신 때 함께 받은 암호화 문자열을 복호화 한 후 권환 확인이 완료되면 동작을 수행한다.
- 10초 ~ 60초 에 한번씩 주기적으로 로그인 상태를 체크하는 서블릿을 호출한다.
'프론트엔드 > 기타' 카테고리의 다른 글
[ESLint&airbnb] 기억해 둘 스타일 가드 (0) | 2021.03.08 |
---|---|
[프론트엔드 기술의 변천사] (0) | 2021.01.26 |
[git] 브랜치 네이밍, 웹호스팅 (0) | 2020.12.22 |
vscode에 git 연동해 사용하기 (0) | 2020.11.20 |
프론트엔드 개발환경의 이해 (중) - 바벨, 린트 (0) | 2020.11.16 |