Q1. 브라우저 저장소에 대해서 알려주세요.
브라우저 저장소는 웹 애플리케이션의 데이터를 저장하는 일종의 창고라고 할 수 있습니다.
크게 세가지 저장소가 있는데 Local & Session Storage, Cookie 가 있습니다.
Local Storage는 데이터를 반영구적으로 보존할 수 있으며 저장용량이 크지만
보안에 취약하며 모든 브라우저에서 지원하지 않기 때문에 호환성 이슈가 있을 수 있습니다.
Session Storage는 local Storage 와 유사하지만
브라우저 세션 동안만 데이터를 유지한다는 차이점이 있습니다.
Cookie는 모든 브라우저에서 지원되고 보안도 다른 스토리지 보다는 안전하지만,
저장공간의 용량이 4kb 정도로 작으며 결국 데이터가 클라이언트에 저장되는 것은
같기 때문에 보안적인 문제에 대해서 완벽하게 대응할 수는 없습니다.
로컬 스토리지의 보안이슈 ?
- XSS(Cross-Site-Scripting) 공격 : 악의적인 사용자가 코드를 삽입해 로컬 스토리지 데이터 탈취
- CSRF(Cross-Site Request Forgery) 공격 : 악의적인 사용자가 로컬 스토리지에 저장된 데이터를 이용하여 다른 웹사이트에 요청을 보내고, 이를 이용해 공격하는 방식
해결방안
- 대칭키 혹은 공개키 암호화 방식으로 데이터를 암호화
대칭키 암호화 : 하나의 키로 암호화 복호화 둘 다 가능, 속도가 빠르나 키를 안전하게 관리해야 함
공개키 암호화 : 암호화 키, 복호화 키를 따로 관리. 안전하지만 속도가 느리고 대용량에는 적합하지 않음
- 악성 스크립트를 실행할 수 없도록 쿠키를 이용해 데이터 전송
- SameSite 속성 설정 : 쿠키를 발급한 도메인에서만 해당 쿠키를 전송할 수 있게 설정
CSRF 공격을 막기위한 기능. - CSP : 로드되는 리소스의 경로를 명시적으로 지정하여 악성 스크립트 실행 방지
XSS 공격을 막기위한 기능
쿠키의 보안 이슈 해결방법
- HTTPOnly 플래그 사용
쿠키를 Javascript로 접근할 수 없도록 제한. XSS 공격에 의한 쿠키 탈취 차단. - Secure 플래그 사용
HTTPS 프로토콜을 사용하는 경우에만 쿠키를 전송하도록 제한. 중간자 공격 차단. - SameSite 속성 사용
쿠키가 전송될 수 있는 도메인 제한. CSRF 공격 차단. - 쿠키 유효기간 관리
유효기간을 설정하여 자동으로 쿠키 데이터가 삭제되도록 관리 - 데이터 암호화
중요한 데이터를 저장할 시 암호화 해서 관리
Q2. require 와 import 의 차이점을 알려주세요.
Javascript 에서 모듈을 불러오는 방법입니다.
require는 Node.js 에서 주로 사용되는 모듈 로더 입니다.
상대경로, 또는 절대경로를 사용하며 CommonJS 형식으로 모듈을 불러옵니다.
Import는 ES6에서 정의된 모듈 로더 입니다.
상대경로, 절대경로 이외에도 URL 경로를 사용할 수 있으며 ES6 형식으로 모듈을 불러옵니다.
둘의 가장 큰 차이점은 모듈을 읽는 시기라고 할 수 있습니다.
require는 동기적으로, import는 비동기적으로 모듈을 불러옵니다.
동기적으로 작동한다는 것은 모듈이 다 읽히기 전까지 아래 코드를 실행하지 않는다는 것을
의미합니다. 그에 반해 import는 상관없이 다음 코드를 실행할 수 있습니다.
그래서 Node.js에서 모듈을 사용해야 하는 환경, 서버 환경에서는 require를 사용하고,
클라이언트 사이드에서 모듈을 사용해야 하는 경우에는 import를 사용합니다.
CommonJS ? ES6?
-
CommonJS
Node.js 에서 사용되는 모듈 시스템
동기적으로 모듈을 로드
모듈이 로드된 후 객체로 반환되어 다른 모듈에서 이를 사용할 수 있음
모듈간의 의존성 관리가 용이함
브라우저에서는 CommonJS 모듈을 지원하지 않음 -
ES6
비동기적으로 모듈을 로드
Import로 모듈을 로드하고 export로 모듈을 내보냄
브라우저에서도 지원하기 때문에 클라이언트에서 사용가능
모듈 간의 의존성 관리를 정적으로 수행하기 때문에 번들링을 위한 추가작업 필요
